打字稿中的 *.d.ts 与 *.ts 有啥区别？

Posted 2023-03-13

【中文标题】打字稿中的 *.d.ts 与 *.ts 有啥区别？

【英文标题】：What is the difference between *.d.ts vs *.ts in typescript?打字稿中的 *.d.ts 与 *.ts 有什么区别？

【发布时间】：2015-05-25 15:22:39

【问题描述】：

我开始使用我觉得非常棒的 TypeScript。但我对*.d.ts 和*.ts 之间的区别感到困惑。他们之间有什么区别？谁能用适当的例子解释一下？

【问题讨论】：

inshort- .d.ts 文件是 .ts 和 .js 文件之间的桥梁。一旦在.d.ts 文件中声明，.ts 文件就会了解.js 文件中的类型，并且编译器会获知这些.d.ts 文件。

【参考方案1】：

TypeScript 声明文件 (*.d.ts)

这些文件用于描述用于 TypeScript 的 javascript 文件的“形状”。

例如，假设我在 TypeScript 编译器知道的范围之外的某个文件中有以下 JavaScript 代码：

function displayMessage(message) 
    alert(message);

单独使用这个文件，我的 TypeScript 代码不会知道这个函数是否存在。它不知道它的名字，也不知道它的参数。我们可以通过在声明文件中描述它来解决这个问题（Example.d.ts）：

declare function displayMessage(message: string);

现在我可以在 TypeScript 中使用函数 displayMessage 而不会出现编译错误，并且当我使用不正确时会出现编译错误（例如，如果我提供了 2 个参数而不是 1 个参数，则会出现错误）。

简而言之：声明文件允许您使用 TypeScript 中现有的 JavaScript 代码和类型信息，而无需重写 TypeScript 中的代码。

TypeScript 文件 (.ts)

这是您在编写 TypeScript 时使用的标准文件扩展名。它将被编译为 JavaScript。

【讨论】：

我想改进答案：如果你定义一个带有导出接口的文件（不会输出任何js），你应该把它写在一个.d.ts 文件。这样在生成模块的时候就会被编译器排除掉。

【参考方案2】：

*.d.ts 文件中允许的任何内容也可能出现在 *.ts 文件中，但不能反过来。所以 *.d.ts 允许 TypeScript 的一部分功能。

*.d.ts 文件只允许包含不会在输出中生成任何 JavaScript 代码的 TypeScript 代码。如果您尝试使用任何会生成 JavaScript 的 TypeScript 功能，您将收到错误消息。

允许使用接口，因为它们在编译后会完全消失。

也允许使用常量枚举（在 1.4 中添加），这与在输出 JavaScript 中生成对象的普通枚举不同。

***类、变量、模块和函数必须以declare 为前缀。通常你会看到一个***的declare module，因此里面的东西也是纯粹的声明：

declare module Something 
    var x;

它们不仅仅用于将 TypeScript 接口暴露给用 JavaScript 编写的代码。您还可以使用它们来声明一组在您的代码中广泛使用的通用接口，因此不必为了获得这些接口的可见性而require 特定物理模块。