如何使用 TypeScript 对使用 Moment 的 .js 文件进行类型检查？

Question

我有一个使用 Moment 的小 .js 文件，旨在直接在浏览器中运行，我想使用 TypeScript 编译器进行类型检查：

document.querySelector("body").textContent = moment().toString();

如果我尝试使用tsc 对其进行类型检查，编译器会抱怨它找不到moment 的声明，即使我安装了moment npm 包：

$ npm install typescript moment
$ node_modules/.bin/tsc --allowJs --checkJs --noEmit index.js
index.js:1:46 - error TS2304: Cannot find name 'moment'.

1 document.querySelector("body").textContent = moment().toString();
                                               ~~~~~~
Found 1 error.

如何让 TypeScript 编译器自动检测 moment 全局对象或在 JS 文件中显式导入它？

Answer 1

暂时

使用内容创建一个文件moment.shims.d.ts：

import moment from '../../node_modules/moment/moment';

export = moment;

export as namespace moment;

（更改导入行以指向您在 node_modules 中安装的 moment 版本。）

将此 shims 文件与您的 TypeScript 项目的其余部分一起编译。

您可能需要在您的tsconfig.json 或您对tsc --esModuleInterop true 的呼叫中启用esModuleInterop 选项：

{
    ...
    "compilerOptions": {
        ...
        "esModuleInterop": true,  // needed by: moment.shims.d.ts
    },
}

暂时 > 2.24.0

一旦this PR 被接受，无需特殊操作。

Answer 2

如果它在全球范围内可用，您可以使用：

declare var moment:any

这告诉 typescript 时刻在别处声明，它不应该抛出错误。

如果你想要更强类型的代码，你也可以指定类型而不是any

Answer 3

你是如何导入moment 包的？

我在这里使用 require / CommonJS 语法没有收到任何错误：

// index.js

const moment = require("moment")

document.querySelector("body").textContent = moment().toString();

用tsc --allowJs --checkJs --noEmit src/index.js 测试没有错误。

现在如果你想使用 ES6 语法，你可以这样做：

// index.js

import moment from 'moment'

document.querySelector("body").textContent = moment().toString();

并在您的 tsconfig.json 文件中的 compilerOptions 下添加 "esModuleInterop": true。