Yarn Workspace启动Telemetry服务时触发Web包TS错误求助

问题根源 #

根目录tsconfig.json的include字段设置为"**/*.ts", "**/*.tsx"，会让TypeScript在编译任意子包时扫描整个项目下的所有TS/TSX文件。启动@project/telemetry开发服务时，Nest CLI触发的TypeScript检查会遍历到@project/web目录下未正确导入React的TSX文件，从而抛出TS2686错误。

另外，根tsconfig中配置了"jsx": "react"，而telemetry是Node端服务不需要JSX支持，继承该配置后会导致TypeScript尝试解析项目中的JSX文件，进一步加剧问题。

解决方案 #

1. 调整根目录tsconfig.json的扫描范围 #

修改根tsconfig.json，将include限制为仅共享的common包和全局类型定义，避免扫描所有子包文件：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "ESNext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "ESNext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react"
  },
  "exclude": [
    "node_modules",
    "packages/web",
    "packages/telemetry"
  ],
  "include": [
    "packages/common/**/*",
    "types.d.ts"
  ]
}

2. 优化telemetry的tsconfig.json #

在telemetry的tsconfig中明确设置jsx为none，并指定仅扫描自身源码目录：

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2017",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "noImplicitAny": false,
    "strictBindCallApply": false,
    "forceConsistentCasingInFileNames": false,
    "noFallthroughCasesInSwitch": false,
    "jsx": "none"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

3. 确认web包的tsconfig独立性 #

保持web包原有tsconfig配置即可，它会自行处理自身的JSX文件扫描和编译规则。

验证 #

执行yarn workspace @project/telemetry start:dev，此时TypeScript只会扫描telemetry和common包的文件，不会触发web包的React相关错误。

内容的提问来源于stack exchange，提问作者Dan