以下是基于 TypeScript (TS) + Less 的微信小程序模板目录结构介绍，适用于现代小程序开发，结合类型安全和样式预处理能力：

---

TS + Less 小程序模板目录

my-miniprogram/
├── src/                      # 源码目录（核心开发区）
│   ├── pages/                # 页面目录（每个页面独立文件夹）
│   ├── components/           # 自定义组件（TS+Less）
│   ├── services/             # 网络请求/API封装
│   ├── stores/               # 状态管理（如MobX/Pinia）
│   ├── utils/                # 工具函数（TS类型支持）
│   ├── assets/               # 静态资源（图片/字体等）
│   ├── styles/               # 全局Less样式和变量
│   │   ├── variables.less    # Less全局变量
│   │   ├── mixins.less       # Less混入
│   │   └── global.less       # 全局样式
│   ├── app.ts                # 小程序入口（TS）
│   ├── app.less              # 全局Less样式
│   └── app.json              # 全局配置
│
├── typings/                  # 自定义类型声明（.d.ts文件）
├── project.config.json       # 项目配置（启用TS和Less）
├── tsconfig.json             # TypeScript配置
├── sitemap.json              # 微信索引配置
└── package.json              # 依赖管理（Less编译插件等）

---

关键目录/文件详解

1. src/ 源码核心 • pages/

• 每个页面包含 .ts、.less、.wxml、.json 文件。

• 示例：home/index.ts（页面逻辑 + 类型定义） + home/index.less（局部样式）。

• components/

• 可复用组件，使用 TS 定义 Props 和 Data 类型：

```typescript
// components/my-button/index.ts
Component({
  properties: {
    text: { type: String, value: '' }, // 类型安全
  },
  methods: {
    onClick() { /* ... */ }
  }
});
```

• styles/

• Less 预处理：通过 variables.less 定义颜色/间距等变量，其他文件引用：

```less
// variables.less
@primary-color: #1890ff;

// home/index.less
@import '../../styles/variables.less';
.btn { background: @primary-color; }
```

2. TypeScript 支持 • app.ts

• 入口文件，使用 TS 类型增强：

```typescript
App<IAppOption>({
  globalData: { userInfo: {} as UserInfo },
  onLaunch() { /* ... */ }
});

// 在 typings/app.d.ts 中定义类型
interface IAppOption {
  globalData: { userInfo: UserInfo };
}
```

• tsconfig.json

• 配置 TS 编译规则（需开启 strict 和 esModuleInterop）：

```json
{
  "compilerOptions": {
    "strict": true,
    "types": ["@types/wechat-miniprogram"],
    "baseUrl": "./src"
  }
}
```

3. Less 样式预处理 • 配置步骤：

1. 安装 Less 编译插件：

   npm install less less-loader --save-dev

2. 在 project.config.json 中启用 Less：

   {
     "setting": {
       "useCompilerPlugins": ["less"]
     }
   }

4. 状态管理（可选） • stores/

• 使用 MobX 或 Pinia（需适配小程序）：

```typescript
// stores/counter.ts
import { observable, action } from 'mobx';
class CounterStore {
  @observable count = 0;
  @action increment() { this.count++; }
}
export default new CounterStore();
```

---

5. 开发与构建

1. 类型检查：VSCode 自动识别 .d.ts 文件，提供类型提示。
2. 样式隔离：通过 @import 复用全局 Less 变量，避免重复代码。
3. 构建优化：
   • 使用 gulp 或 webpack 进一步压缩 TS 和 Less（非必需，小程序工具已内置处理）。

---

注意事项

1. 类型扩展：覆盖微信原生类型时，在 typings/ 下新增 *.d.ts。
2. Less 变量：全局变量需通过 @import 引入，避免硬编码。
3. 组件通信：父子组件用 properties + TS 接口定义类型约束。

---

通过此模板，可显著提升代码健壮性（TS）和样式可维护性（Less），适合中大型项目开发。