如何为UMD全局JS库编写TypeScript类型声明文件

你只需要在项目中新增一个全局类型声明文件，不需要在每个业务文件重复声明AutoModel，即可获得完整的类型校验与代码补全能力。

1. 新建类型声明文件
   在TS配置可扫描到的路径下（通常是src/目录下新建auto-model.d.ts，或专门的types/目录存放自定义声明），写入以下内容：

   declare global {
     // 定义AutoModel.Motor实例的类型
     interface AutoModelMotor {
       start(): void;
       // 后续Motor下的其他方法、属性可按相同格式补充，例如 stop(): void
     }
   
     // 定义全局AutoModel变量的类型
     interface AutoModelStatic {
       readonly constructed: boolean;
       open(): void;
       readonly Motor: AutoModelMotor;
       // 后续AutoModel下挂载的其他顶层方法、属性可在此处补充
     }
   
     const AutoModel: AutoModelStatic;
   }
   
   // 空export标记当前文件为模块，确保declare global生效
   export {};
   

2. 清理业务代码中的冗余声明
   你之前在业务文件顶部写的declare const AutoModel: any;可以直接删除，TS会自动读取全局声明获取类型。修改后的业务代码示例：

   export class TestClass {
     doSomething(): void {
       AutoModel.open(); // 自动补全、返回值/参数校验生效
       AutoModel.Motor.start(); // Motor下的成员也会有完整提示
     }
   }
   

常见问题排查 #

如果写完后TS仍提示找不到AutoModel变量，请检查tsconfig.json配置：

• 确认include配置覆盖了你存放d.ts文件的目录，参考配置："include": ["src/**/*.ts", "src/**/*.d.ts", "types/**/*.d.ts"]
• 如果你手动配置了typeRoots字段，需要把自定义声明文件所在的目录加入该列表

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