如何编写和使用 @types 或 DefinitelyTyped 上不存在的自定义声明文件?
How can I write and use custom declaration files that don't exist on @types or DefinitelyTyped?
我正在使用一个名为 foo
的 npm 包,它在 DefinitelyTyped 上不存在。换句话说,@types/foo
不存在(或可能已过时!)
我希望在 noImplicitAny
等更严格的设置下仍能使用它,因此我需要自己编写自定义定义文件。最后,我想向 DefinitelyTyped 发送一个 pull request,这样这个文件就可以对我项目之外的其他人有用。
有一些简单的解决方案,比如创建一个名为 ./src/types.d.ts
的全局文件,我可以在其中编写以下内容
declare module "foo" {
export function hello(): void;
export function world(): void;
}
但是如果我使用那种语法,当我将它提交给 DefinitelyTyped 时,我可能需要重写我的模块。
我如何构建我的项目,以便我可以轻松创作然后将本地 .d.ts 文件发送到 DefinitelyTyped?
我将逐步进行解释,因此这可能看起来很长,但是按照给出的说明进行操作只需几分钟。事实上,这是您可以在 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
。一旦您很好地掌握了我们在这里所做的事情,您就可以将其更改为您想要的任何内容。
proj/
├─ tsconfig.json
├─ local-types/
└─ src/
└─ ...
In most cases outside of this example, I might just name this 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"
}
发布到 DefinitelyTyped
您的 .d.ts
文件是否完整且有用?考虑编写一些测试并向 DefinitelyTyped 发送拉取请求,以便其他人可以从您所做的工作中受益!
如果您能够在 运行 时毫无问题地导入这些包,那么您已经拥有了合适的包结构。
注意事项
- 不要在任何这些本地类型包中使用
declare module "..."
语法。
- ...除非您正在尝试编写模块扩充。但你可能不是。
- 确保您的文件至少有一个
import
或 export
,除非它们确实是 script/global 个文件。
- Follow advice given from the TypeScript website on authoring declaration files.
我正在使用一个名为 foo
的 npm 包,它在 DefinitelyTyped 上不存在。换句话说,@types/foo
不存在(或可能已过时!)
我希望在 noImplicitAny
等更严格的设置下仍能使用它,因此我需要自己编写自定义定义文件。最后,我想向 DefinitelyTyped 发送一个 pull request,这样这个文件就可以对我项目之外的其他人有用。
有一些简单的解决方案,比如创建一个名为 ./src/types.d.ts
的全局文件,我可以在其中编写以下内容
declare module "foo" {
export function hello(): void;
export function world(): void;
}
但是如果我使用那种语法,当我将它提交给 DefinitelyTyped 时,我可能需要重写我的模块。
我如何构建我的项目,以便我可以轻松创作然后将本地 .d.ts 文件发送到 DefinitelyTyped?
我将逐步进行解释,因此这可能看起来很长,但是按照给出的说明进行操作只需几分钟。事实上,这是您可以在 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
。一旦您很好地掌握了我们在这里所做的事情,您就可以将其更改为您想要的任何内容。
proj/
├─ tsconfig.json
├─ local-types/
└─ src/
└─ ...
In most cases outside of this example, I might just name this
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"
}
发布到 DefinitelyTyped
您的 .d.ts
文件是否完整且有用?考虑编写一些测试并向 DefinitelyTyped 发送拉取请求,以便其他人可以从您所做的工作中受益!
如果您能够在 运行 时毫无问题地导入这些包,那么您已经拥有了合适的包结构。
注意事项
- 不要在任何这些本地类型包中使用
declare module "..."
语法。- ...除非您正在尝试编写模块扩充。但你可能不是。
- 确保您的文件至少有一个
import
或export
,除非它们确实是 script/global 个文件。 - Follow advice given from the TypeScript website on authoring declaration files.