如何在不导入库的情况下获得 VS Code / typescript 自动完成

Question

如果模块（例如 moment.js、knockout 或 big.js）包含在 <script> 标签中，例如

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js">
</script>

定义一个全局属性（例如moment、ko、Big 等），如何在 Typescript 中访问/声明window（或global）上的类型。

例如

const x = moment()
const t = ko.observable()
const b = new Big()

如何在不包括整个 moment.js 库的情况下设置这些全局变量的环境类型？目标是让 VS Code 和 tsc、ts-loader 或 babel-typescript 使用正确类型的全局引用。

对于moment，类型在node_modules/moment/moment.d.ts 公开，但对于其他库（例如knockout 或big.js），它们在@types/[module]/index.d.ts。

感觉这很常见，但我还没有看到一个很好的工作参考来说明如何完成这个。

---

这里是 tsconfig：

{
    "compilerOptions": {
      "target": "ESNext",
      "moduleResolution": "node",
      "allowJs": true,
      "noEmit": true,
      "strict": false,
      "isolatedModules": false,
      "esModuleInterop": true,
      "noResolve": false,
      "baseUrl": ".",
      "paths": {
        "*": [
          "*",
          "js.packages/*"
        ]
      },
      "jsx": "preserve",
      "outDir": "dist/"
  },
  "include": [
    "js.packages/**/*.ts",
    "js.packages/**/*.tsx",
    "js.packages/@types/lib.d.ts",
  ],
  "files": [
    "services/app/src/entry.js"
  ],
  "exclude": [
    "node_modules"
  ]
}

这是lib.d.ts

declare global {
  type Bigable = Big | string | number
  interface Window {
    Big: typeof import('big.js'),
    moment: typeof import('moment'),
    Sentry: typeof import('@sentry/browser'),
  }
}

这是消费应该如何运作的：

const v = new Big(1)
const m = moment()
const s = global.Sentry()
const o = ko.observable()

在 VS Code 中看起来像这样（红色下划线表示失败）：

所以淘汰赛有效，因为@types/knockout/index.d.ts 有：

declare var ko: KnockoutStatic;
declare module "knockout" {
    export = ko;
}

而我同样在interface Window 上声明了一个全局Big。

不幸的是，Sentry 和 moment（在此示例中）似乎不起作用，目前尚不清楚为什么或需要做什么来解决此问题。

Answer 1

您有正确的想法，您需要使用import 类型来获取导入中的类型，您需要在global 中声明变量。问题是您在Window 上声明属性。虽然分配给 Window 的任何键都变成了全局变量 typescript 并没有反映这一点。您可以直接在全局范围内声明变量。

declare global {
  export var moment: typeof import('moment');
  export var Sentry: typeof import('@sentry/browser');
}

const m = moment()
Sentry.init({}) // Sentry() does not seem like it should work according to docs

Answer 2

这个问题并不是特别针对一种类型的平台，但我会告诉你我是如何让moment 在 Angular 中工作的。

首先，您不应该从脚本 URL 加载。您应该运行 npm install moment 将其放入您的 node_modules 文件夹中。这将确保它被打包到您的应用程序的缩小版本中。您不必这样做，但强烈建议这样做。

"scripts": [
          "node_modules/jquery/dist/jquery.slim.min.js",
          "node_modules/moment/moment.js",
           ...
        ]

不管上述情况如何，一旦你在tsconfig（或angular.json）中链接了脚本，使用就像文件顶部的以下行一样简单：

import * as moment from 'moment';

我倾向于将这种语法用于大多数具有对象的库，例如shortid、linq 和 lodash。

其他库与declare var 语句一起工作得更好。例如，我发现 jQuery 以这种方式工作得更好。

declare var $

自动完成

如果您正在寻找自动完成功能，您需要为库加载一个 .d.ts 文件。 moment 的 npm 包自带一个，但有些库需要为此安装另一个 npm 包（例如@types/lodash、@types/jquery）。

Visual Studio 自动完成依赖于 .d.ts 文件来识别类型。配置该功能的文档位于here，或许可以进行配置（见底部附近的注释）。