TypeScript：在 web 项目中使用普通的 JavaScript 库，带有自定义类型

Question

我有一个使用 TypeScript 和 Webpack 的网站项目。 现在我需要在这个项目中使用一个外部专有的 JavaScript 库。 这是我的项目结构：

├── dist
│   ├── foo.js
│   ├── main.js
│   └── index.html
├── src
│   ├── foo.d.ts
│   └── index.ts
├── webpack.config.js
└── tsconfig.json

文件dist/main.js由 Webpack 生成，它使用ts-loader编译条目 TypeScript 文件src/index.ts 。 foo.js和main.js都在dist/index.html文件中被引用，使用 html 脚本标签：

<script src="foo.js"></script>
<script src="main.js"></script>

dist/foo.js库是一个普通的旧 JavaScript 文件，它不是 ES6 模块，它只是包含一堆类。

我创建了带有类型的foo.d.ts文件，以帮助 TypeScript 对foo.js中定义的类的使用进行类型检查：

// src/foo.d.ts
export declare class MyClass {
  constructor(message: string);
}

但是我无法正确注册它，以便 TypeScript 和 Webpack 都能正确处理此设置。 问题在于 TypeScript 如何加载类型声明文件。 如果我用相对路径引用它，TypeScript 可以看到并使用它，但 Webpack 抱怨它无法解决它：

此index.ts编译，但 Webpack 给出错误：

import { MyClass } from './foo';
const c = new MyClass('Hello, world!');

Webpack 错误： Module not found: Error: Can't resolve './foo' in '/path-to/src'

Webpack 失败的原因显然是它正在寻找foo代码但未能找到它，因为编译后的 JavaScript 包含require("./foo") 。

所以我需要替换这条线

import { MyClass } from './foo';

告诉 TypeScript 不要在编译代码中包含这个require()调用。 我认为这个ts-loader 讨论中描述了这个问题，但我不确定那里的最终判决是什么。 如果我这样导入

import { MyClass } from 'foo';

TypeScript 编译器给出错误Cannot find module 'foo' or its corresponding type declarations. . 显然，必须在tsconfig.json中为 TypeScript 指定一些东西才能知道在哪里寻找类型声明。 但是添加"include": ["src/**/*"]似乎并没有改变任何东西。

Answer 1

问题是你在谎报你是如何真正得到它的（嗯，不是真的，你只是不知道如何在你的.d.ts文件中拼写“这存在于全局范围内”）。

在运行时，您只是依赖MyClass存在于 scope 链的某个位置，因此您需要告诉 TypeScript 您正在工作的环境就是这种环境。 您这样做的方式是使用修改全局范围的类型定义的环境模块声明 - 这与您的定义非常相似，只是您不使用export关键字：

// src/foo.d.ts
// Note the lack of `export` here
declare class MyClass {
  constructor(message: string);
}

或者，如果您使用window.MyClass ，则使用global声明：

declare global {
  interface Window {
    MyClass: MyClass
  }
}

declare class MyClass {
  myMethod(): void
}

然后，在您的代码中，您只需new MyClass("Hello world")和 TypeScript 就会得到您的支持。