webpack 如何在TypeScript(Node.js)包中包含全局文件类型声明

qc6wkl3g 于 2023-10-19 发布在 Webpack

关注(0)|答案(3)|浏览(145)

我正在编写一个软件包，打算在npmjs上公开发布。让我们称之为“文本包”。
我希望在默认情况下安装该软件包时，您可以直接导入.txt文件并获得正确的类型（开箱即用），如下所示：

import text from './file.txt'

text变量的类型应该是string，因为软件包已经定义了它的类型，使用类似这样的东西（在全局.d.ts中）：

declare module '*.txt' {
    export const text: string;
    export default text;
}

如果我在我的包中包含global.d.ts，并且我从这个包中导入一些东西，那么在导入.txt文件时，我将自动获得正确的类型。
但问题是，有时我只需要导入一个.txt文件，而不需要从“文本包”中导入任何东西，这就是为什么我想知道是否有某种方法，因为你安装一个包来安装一个全局类型，不需要导入任何其他类型来应用。
换句话说，只要你安装了我的“txt包”，declare module '*.txt'就会立即应用于我的整个项目。
有没有办法做到这一点，或者安装我的软件包的人必须声明自己的全局类型（例如，declarations.d.ts）才能全局导入.txt文件？
我知道，即使导入类型工作，它仍然需要Webpack或其他插件才能真正工作，但这个问题只是关于类型。

webpack

来源：https://stackoverflow.com/questions/72187763/how-to-include-a-global-file-type-declaration-in-a-typescript-node-js-package

3条答案

按热度按时间

mpgws1up1#

简短的回答是：

TypeScript不支持全局类型，除非导入引用该类型的文件。

更多详情：

我发现这样做的一个例子是Next.js -当使用npx create-next-app@latest --typescript创建TypeScript应用程序时，您可以开始导入*.css文件（例如）并获得正确的类型。
我感到困惑的是，我最初认为类型来自next-env.d.ts，但即使我删除了文件，*.css导入仍然在Visual Studio代码中工作。但原因是，因为pages目录中的一个文件正在导入Next.js的index.d.ts文件。
基本上，在Visual Studio Code中，只要你在项目中导入一个类型，如果它是全局的，它将在任何地方都可以访问。

解决方法

那么，当前的TypeScript功能可以做些什么呢？要支持新的文件类型，您需要一个文件加载器，如Webpack。合乎逻辑的做法是在文件加载器本身中添加对文件类型声明的引用。这样，一旦你配置你的文件加载器能够导入文件，你将继承类型：
1.在我们的软件包的源目录中创建一个txt.d.ts（例如：src）-您可以使用任何文件名，这并不重要
1.如果你使用的是eslint，添加一个条目来忽略类型文件（例如：ignorePatterns选件中的'src/*.d.ts'
1.由于您要在源中添加一个不受tsc管理的d.ts文件，因此需要添加一个执行以下操作的脚本：
1.将txt.d.ts复制到包的编译文件的目标目录中
1.将这一行添加到你的包的文件加载器的顶部（例如：loader/index.d.ts：/// <reference types="../txt" />\r\n-这将把声明文件链接回你的包。请注意，您可以将此引用添加到包的任何文件中。
只有当你将文件引用导入到声明中时，这种解决方法才能起作用-这是TypeScript可以知道这种类型存在的唯一方法（参见https://github.com/microsoft/TypeScript/issues/49124）。
另一种替代方法是添加手动步骤（在自述文件中）来添加全局类型声明文件。