如何在npm/yarn工作区中无缝导入内部兄弟包的TypeScript代码？

不需要先把包编译成纯JavaScript才能导入工作区里的兄弟包，但要做好几个关键配置，才能解决类型丢失和双重转译的问题：

1. 配置根目录的复合TS项目 #

在工作区根目录创建tsconfig.json，开启复合项目模式，让TS能自动追踪子包的类型依赖：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "NodeNext",
    "strict": true,
    "composite": true,
    "declaration": true,
    "declarationMap": true,
    "skipLibCheck": true
  },
  "include": ["packages/**/src"],
  "references": [
    {"path": "./packages/shared"},
    {"path": "./packages/ui-package-1"},
    {"path": "./packages/ui-package-2"}
  ]
}

2. 每个子包的package.json和tsconfig配置 #

• package.json：指定入口文件和类型入口直接指向源码，同时声明模块类型：

  {
    "name": "@your-org/shared",
    "main": "./src/index.ts",
    "module": "./src/index.ts",
    "types": "./src/index.ts",
    "type": "module"
  }
  

• 子包的tsconfig.json：开启复合模式和声明生成，确保TS能识别依赖关系：

  {
    "extends": "../../tsconfig.json",
    "compilerOptions": {
      "composite": true,
      "declaration": true,
      "isolatedModules": true,
      "rootDir": "./src",
      "outDir": "./dist"
    },
    "include": ["src"]
  }
  

3. 配置Vite避免双重转译 #

在每个子包的vite.config.ts里，把工作区的其他包加入排除列表，告诉Vite不要预构建这些本地包，直接使用源码：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    exclude: ['@your-org/shared', '@your-org/ui-package-1', '@your-org/ui-package-2']
  }
})

4. 规范导出与导入 #

确保每个子包的所有需要共享的类型、接口、组件都在入口文件（比如src/index.ts）导出，比如shared包：

export interface User {
  id: string;
  name: string;
}

export const formatUserName = (user: User) => `${user.name} (${user.id})`;

其他包直接按包名导入即可：

import { User, formatUserName } from '@your-org/shared';

这样配置后，就能像使用第三方包一样无缝导入兄弟包的JS和TS实体，既不会丢失类型提示，也不会出现双重转译的语法错误。

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