如何创建可复用的TypeScript模块声明包供多个React项目导入使用

1. 创建独立的通用类型声明包 #

你可以新建一个轻量npm包，比如命名为@your-scope/common-ts-declarations，包结构无需复杂，核心文件如下：

common-ts-declarations/
├── index.d.ts
└── package.json

把所有需要复用的通用声明都写入index.d.ts，比如你提到的字体、图片声明都可以合并到这里：

// 字体类声明
declare module "*.woff";
declare module "*.woff2";
declare module "*.ttf";

// 图片类声明
declare module "*.jpg" {
  const src: string;
  export default src;
}
declare module "*.png" {
  const src: string;
  export default src;
}
// 其他需要复用的通用声明都可以直接追加到这个文件

然后配置package.json，注意必须加上types字段指向你的声明文件，示例配置：

{
  "name": "@your-scope/common-ts-declarations",
  "version": "1.0.0",
  "description": "通用TypeScript模块声明集合",
  "types": "index.d.ts",
  "author": "你的名称"
}

2. 复用这个声明包 #

• 如果是团队场景可以发布到内部npm源，个人使用也可以发布到公开npm，不想发布的话也可以用npm link本地关联，或者直接把包放到项目同级目录用相对路径安装：

# 发布后安装命令
npm i -D @your-scope/common-ts-declarations

# 本地相对路径安装命令
npm i -D ../common-ts-declarations

如果你的多个项目是用monorepo管理的，直接把这个声明包作为内部包放在monorepo的packages目录下即可，无需额外发布。

3. 业务项目配置 #

安装完成后，只需要在业务项目的tsconfig.json中添加一行配置，把这个包加入类型引用即可：

{
  "compilerOptions": {
    // 保留你原有配置不变，新增下面这行
    "types": ["@your-scope/common-ts-declarations"]
  }
}

也可以选择在业务项目的入口TS文件顶部添加三斜线指令引入，效果完全一致：

/// <reference types="@your-scope/common-ts-declarations" />

后续需要新增或修改通用声明时，只需要更新这个公共包的版本，各个业务项目升级对应版本即可，无需逐个项目修改声明文件。

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