使用Typescript

根目录新建文件

• tsconfig.base.json

{
  "compilerOptions": {
    // 项目的根目录
    "rootDir": ".",
    // 项目基础目录
    "baseUrl": ".",
    // tsc 编译产物输出目录
    "outDir": "dist",
    // 编译目标 js 的版本
    "target": "es2022",
    //
    "module": "esnext",
    // 模块解析策略
    "moduleResolution": "bundler",
    // 是否生成辅助 debug 的 .map.js 文件。
    "sourceMap": false,
    // 产物不消除注释
    "removeComments": false,
    // 严格模式类型检查，建议开启
    "strict": true,
    // 不允许有未使用的变量
    "noUnusedLocals": true,
    // 允许引入 .json 模块
    "resolveJsonModule": true,

    // 与 esModuleInterop: true 配合允许从 commonjs 的依赖中直接按 import XX from 'xxx' 的方式导出 default 模块。
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,

    // 在使用 const enum 或隐式类型导入时受到 TypeScript 的警告
    "isolatedModules": true,
    // 检查类型时是否跳过类型声明文件，一般在上游依赖存在类型问题时置为 true。
    "skipLibCheck": true,
    "noUnusedParameters": true,
    // 引入 ES 的功能库
    "lib": [],
    // 默认引入的模块类型声明
    "types": [],
    // 路径别名设置
    "paths": {
      "@fang-common/*": ["packages/*/src"]
    }
  },
  "exclude": [
    // 暂时先排除产物目录，packages/xxx/dist/x.config.js 或者 node_modules/pkg/x.config.js 不会被包含进来
    "**/dist",
    "**/node_modules"
  ]
}

• tsconfig.json

// tsconfig.json
{
  "compilerOptions": {
    "target": "es2022",

    // vite 会读取到这个 tsconfig 文件(位于工作空间根目录)，按照其推荐配置这两个选项
    // https://cn.vitejs.dev/guide/features.html#typescript-compiler-options
    "isolatedModules": true,
    "useDefineForClassFields": true
  },
  "files": [],
  "references": [
    // 聚合 ts project
    { "path": "./tsconfig.src.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

• tsconfig.node.json

{
  // 继承基础配置
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    // 该 ts project 将被视作一个部分，通过项目引用(Project References)功能集成到一个 tsconfig.json 中
    "composite": true,
    // node 脚本没有 dom 环境，因此只集成 esnext 库即可
    "lib": ["ESNext"],
    // 集成 Node.js 库函数的类型声明
    "types": ["node"],
    // 脚本有时会以 js 编写，因此允许 js
    "allowJs": true
  },
  "include": [
    "build/src",
    // 目前项目中暂时只有配置文件，如 vite.config.ts，以后会逐步增加
    "**/*.config.*",
    "scripts"
  ],
  "exclude": [
    "packages/**/src",
    "apps/**/src",
    "apps/**/stories",
    // 暂时先排除产物目录，packages/xxx/dist/x.config.js 或者 node_modules/pkg/x.config.js 不会被包含进来
    "**/dist",
    "**/node_modules"
  ]
}

• tsconfig.src.json

// tsconfig.src.json
// tsconfig.src.json
{
  // 继承基础配置
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "composite": true,
    // 组件库依赖浏览器的 DOM API
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    "types": ["node"]
  },
  "include": [
    "typings/env.d.ts",
    "packages/**/src",
    "packages/ui/packages/hooks/**/*.ts",
    "packages/ui/**/*.ts",
    "src/**/*.ts"
  ],
  "exclude": ["**/*.config.*"]
}

• tsconfig.packages.json

// tsconfig.packages.json
// 所有包共享的 TypeScript 构建配置
{
  "extends": "./tsconfig.src.json",
  "compilerOptions": {
    "rootDir": ".",
    "baseUrl": "./",
    "outDir": "./dist"
  },
  "include": ["src"]
}

分包使用

• 类似 utils/tsconfig.build.json

{
  "extends": "../../tsconfig.src.json",
  "compilerOptions": {
    "rootDir": ".",
    "baseUrl": "./",
    "outDir": "./dist"
  },
  "include": ["src"]
}