如何让TypeScript有条件地导出本地或发布包的共享API类型？

针对你同时开发server和client项目、需要动态切换本地/发布包类型导出的需求，下面是三种无需手动注释切换的便捷方案：

方案一：TypeScript路径别名+环境化配置 #

这是最稳妥的静态方案，通过TypeScript的路径映射实现自动切换：

1. 在server项目根目录创建两个TS配置文件：
   • tsconfig.dev.json（开发环境用）：

     {
       "extends": "./tsconfig.json",
       "compilerOptions": {
         "paths": {
           "@api/types": ["../client/types"]
         }
       }
     }
     

   • tsconfig.prod.json（生产构建用）：

     {
       "extends": "./tsconfig.json",
       "compilerOptions": {
         "paths": {
           "@api/types": ["./node_modules/@api/types"]
         }
       }
     }
     

2. 在apiTypes.ts里保持固定导出语句：

   export type * from "@api/types";
   

3. 在package.json的scripts里添加环境化命令：

   "scripts": {
     "dev": "cross-env NODE_ENV=development tsc -p tsconfig.dev.json",
     "build": "cross-env NODE_ENV=production tsc -p tsconfig.prod.json"
   }
   

   开发时跑npm run dev会自动映射到本地client的类型文件，生产构建则使用npm包中的类型。

方案二：npm/pnpm本地链接 #

直接利用包管理工具的链接功能，让本地@api/types指向client项目：

1. 进入client项目根目录，执行链接命令：

   # npm
   npm link
   # pnpm
   pnpm link --global
   

2. 进入server项目根目录，关联本地包：

   # npm
   npm link @api/types
   # pnpm
   pnpm link @api/types --global
   

3. apiTypes.ts里依然写export type * from "@api/types"，开发时修改client的类型文件，server会实时同步；生产部署前，执行npm unlink @api/types恢复使用线上包即可。

方案三：构建工具条件注入（适合Vite/Webpack项目） #

如果你的server项目用Vite或Webpack构建，可以通过环境变量控制类型导出：

1. 在构建配置中注入环境变量，比如Vite的vite.config.ts：

   import { defineConfig } from 'vite';
   
   export default defineConfig({
     define: {
       'process.env.LOCAL_DEV': JSON.stringify(process.env.NODE_ENV === 'development')
     }
   });
   

2. 修改apiTypes.ts，利用条件编译（需确保TypeScript开启isolatedModules）：

   // @ts-ignore
   if (process.env.LOCAL_DEV) {
     export type * from "../client/types";
   } else {
     export type * from "@api/types";
   }
   

3. 在package.json的scripts里设置环境：

   "scripts": {
     "dev": "cross-env NODE_ENV=development vite",
     "build": "cross-env NODE_ENV=production vite build"
   }
   

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