Angular 2+中不安装@types如何使用第三方JS库（UMD/全局类）

我经常帮开发者处理这类问题——当你想用一个没有官方@types包的JS库（比如你提到的没装@types/moment的情况），总会遇到模块解析或者类型校验的报错，尤其是那个烦人的require错误。下面给你分场景一步步解决：

一、先搞定require模块错误（让代码先跑起来） #

当你直接import * as moment from 'moment'但没装@types时，TypeScript因为找不到模块的类型定义，会触发模块解析相关的require错误。先按下面的步骤让项目正常运行：

1. 确认库已正确安装 #

首先确保你已经装了moment本身，没装的话先执行：

npm install moment --save

2. 临时跳过类型检查（应急方案） #

如果只是想先让项目跑起来，不想马上写类型，可以用两种方式：

• 在导入语句上方加// @ts-ignore注释，告诉TypeScript忽略这行的类型检查：

  // @ts-ignore
  import * as moment from 'moment';
  

• 或者在tsconfig.json里把noImplicitAny设为false（不过这会关闭所有隐式any的校验，不推荐长期用）。

二、手动添加类型声明（推荐长期方案） #

既然没有官方@types，我们可以自己写一个简单的类型声明文件，既解决报错又保留TypeScript的类型校验优势：

1. 创建自定义类型文件 #

在项目的src目录下新建一个typings文件夹（没有就创建），然后在里面新建moment.d.ts文件，写入基础的类型定义：

declare module 'moment' {
  // 按需补充你用到的moment方法，不用写全，用到啥加啥
  function moment(date?: string | Date): {
    format: (formatStr: string) => string;
    add: (amount: number, unit: 'days' | 'months' | 'years') => any;
    subtract: (amount: number, unit: string) => any;
  };

  export default moment;
}

这个声明告诉TypeScript：moment是一个模块，导出的是一个函数，接受可选的日期参数，返回包含format、add等方法的对象。你可以根据自己实际用的API慢慢扩展。

2. 让TypeScript识别自定义类型 #

打开tsconfig.json，确保include字段包含了你的自定义类型文件路径：

{
  "compilerOptions": {
    // 其他原有配置...
  },
  "include": [
    "src/**/*",
    "src/typings/**/*" // 加上这一行，指向你的类型文件目录
  ]
}

保存后，TypeScript就能找到这个自定义声明，require错误和类型报错都会消失。

三、如果是全局引入的UMD库（比如通过angular.json加载） #

如果你是在angular.json的scripts数组里全局引入moment（比如"node_modules/moment/moment.js"），那不需要用import，直接用全局变量moment就行。这时候要修改类型声明文件来定义全局变量：

修改moment.d.ts：

declare var moment: {
  (date?: string | Date): {
    format: (formatStr: string) => string;
    // 其他你需要的方法...
  };
};

这样你在组件里直接写moment().format('YYYY-MM-DD')，TypeScript也不会报错。

四、快速兼容的小技巧：用any类型过渡 #

如果你暂时不想写详细的类型，也可以把导入的模块转成any类型，比@ts-ignore更清晰：

import * as moment from 'moment';
const momentFn: any = moment;

// 然后正常使用
console.log(momentFn('2024-01-01').format('YYYY/MM/DD'));

这种方式明确告诉TypeScript这个变量是任意类型，不会有意外的类型报错，也比忽略校验更规范。

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