我如何编写和使用@types 或DefinitelyTyped 上不存在的自定义声明文件？

Posted 2023-03-13

【中文标题】我如何编写和使用@types 或DefinitelyTyped 上不存在的自定义声明文件？

【英文标题】：How can I write and use custom declaration files that don't exist on @types or DefinitelyTyped?

【发布时间】：2017-12-01 10:30:07

【问题描述】：

我正在使用一个名为 foo 的 npm 包，该包在 DefinitiveTyped 上不存在。换句话说，@types/foo 不存在（或可能已过时！）

我希望在noImplicitAny 等更严格的设置下仍然能够使用它，所以我需要自己编写自定义定义文件。最终，我想向 DefinitiveTyped 发送一个拉取请求，以便该文件对我的项目之外的其他人有用。

有一些简单的解决方案，例如创建一个名为 ./src/types.d.ts 的全局文件，我可以在其中编写以下内容

declare module "foo" 
    export function hello(): void;
    export function world(): void;

但是如果我使用这种语法，当我将它提交给DefinitelyTyped 时，我可能需要重写我的模块。

我如何构建我的项目，以便我可以轻松地创作本地 .d.ts 文件，然后将其发送到DefinitelyTyped？

【参考方案1】：

我将逐步解释这一点，所以这可能看起来很长，但按照给出的说明操作应该只需要几分钟。事实上，这是您可以在 bash 或 PowerShell 中运行的简短版本！

mkdir -p ./local-types/foo
cd ./local-types/foo
npm init --scope types --yes
echo "export function hello(): void; export function world(): void" > ./index.d.ts
cd ../..
npm install ./local-types/foo

背景

让我们想象一下下面的项目结构：

proj/
├─ tsconfig.json
└─ src/
   └─ ...

在项目的根目录下创建一个 local-types 文件夹。

不管它叫什么，但我们称它为local-types。一旦你很好地掌握了我们在这里所做的事情，你就可以将其更改为你想要的任何内容。

proj/
├─ tsconfig.json
├─ local-types/
└─ src/
   └─ ...

在本示例之外的大多数情况下，我可能只是将其命名为 types。

在本地类型目录中创建一个新包

由于您正在尝试导入名为 foo 的模块，我们将创建一个名为 foo 的文件夹，其中包含 index.d.ts。

// local-types/foo/index.d.ts

export function hello(): void;

export function world(): void;

我们还想通过创建一个 package.json 来使它成为一个 npm 包：

cd local-types/foo
npm init --scope types --yes

此时，您的项目应如下所示：

proj/
├─ tsconfig.json
├─ local-types/
|  └─ foo/
|     └─ index.d.ts
|     └─ package.json
└─ src/
   └─ ...

您现在应该能够从src 中的任何文件导入foo。

import  hello, world  from "foo";

hello();
world();

请记住，您可能没有带有index.d.ts 的单入口点软件包。在这种情况下，您需要模仿在 npm 上发布的包结构。

将包添加为依赖项（或潜在的 devDependency）

如果您正在编写一个库，您可能希望在依赖项中使用它，但应用程序可能希望使用 devDependencies。只需添加file:./local-types/foo 作为@types/foo 的版本即可：

"dependencies": 
    "@types/foo": "file:local-types/foo"

发布到绝对类型

您的.d.ts 文件是否完整且有用？考虑编写一些测试并向DefinitelyTyped 发送拉取请求，以便其他人可以从您所做的工作中受益！

如果您能够在运行时毫无问题地导入这些包，那么您就已经拥有了适当的包结构。

注意事项

不要在任何这些本地类型包中使用declare module "..." 语法。 ...除非您尝试编写模块扩充。但你可能不是。 确保您的文件至少有一个 import 或 export，除非它们是真正的脚本/全局文件。 Follow advice given from the TypeScript website on authoring declaration files.

【讨论】：

感谢您提供详尽解释的答案！

我认为详细版本中缺少命令 'npm install ./local-types/foo'