I am curious about .d.ts declaration files because I am new to the TypeScript programming language. I was told by someone that .d.ts files are are similar to .h header files in the C & C++ programming languages, however, the .d.ts files don't seem to work quite the same. Currently, I am failing to understand how to properly use the .d.ts files. It would appear that I cant add my .js or .ts files to the .d.ts files, so the only way my project will work is if it contains all three file types. That seems like a lot of files. To help me better understand how the .d.ts files are related to JavaScript & TypeScript, I have some questions I would like to ask.


这三个文件之间的关系是什么?他们之间的关系? 如何使用*.d。ts文件?这是否意味着我可以删除*。Ts文件永久? 如果是这样,*.d。ts文件知道哪个JS文件映射到自己?


如果有人能给我举个例子就太好了。


当前回答

d代表Declaration Files:

When a TypeScript script gets compiled there is an option to generate a declaration file (with the extension .d.ts) that functions as an interface to the components in the compiled JavaScript. In the process the compiler strips away all function and method bodies and preserves only the signatures of the types that are exported. The resulting declaration file can then be used to describe the exported virtual TypeScript types of a JavaScript library or module when a third-party developer consumes it from TypeScript. The concept of declaration files is analogous to the concept of header file found in C/C++.

declare module arithmetics {
    add(left: number, right: number): number;
    subtract(left: number, right: number): number;
    multiply(left: number, right: number): number;
    divide(left: number, right: number): number;
}

类型声明文件可以为现有的JavaScript手工编写 库,就像jQuery和Node.js一样。 流行JavaScript的大型声明文件集合 库托管在GitHub上的DefinitelyTyped和Typings中 注册表。提供了一个名为typings的命令行实用程序来提供帮助 从存储库中搜索并安装声明文件。

其他回答

来自官方文档(https://www.typescriptlang.org/docs/handbook/2/type-declarations.html#dts-files):

.d。Ts文件是仅包含类型信息的声明文件。这些文件不会产生.js输出;它们只用于类型检查。

如@takeshin所说,.d代表typescript (.ts)的声明文件。

在回答这篇文章之前,有几点需要澄清

Typescript是javascript的语法超集。 Typescript不会自己运行,它需要转换成javascript (Typescript到javascript的转换) “类型定义”和“类型检查”是typescript在javascript上提供的主要附加功能。(检查script和javascript类型的区别)

如果你在想typescript是否只是语法超集,它能提供什么好处- https://basarat.gitbooks.io/typescript/docs/why-typescript.html#the-typescript-type-system

回答这篇文章

正如我们讨论过的,typescript是javascript的超集,需要被转译成javascript。因此,如果一个库或第三方代码是用typescript编写的,它最终会转换为javascript,可以被javascript项目使用,但反之亦然。

对于前-

如果你安装javascript库-

npm install --save mylib

并尝试在typescript代码中导入它

import * from "mylib";

你会得到错误。

"找不到'mylib'模块。"

正如@Chris提到的,很多库,如underscore, Jquery已经用javascript编写了。与其为typescript项目重新编写这些库,还需要另一种解决方案。

为了做到这一点,你可以在javascript库中提供名为*.d的类型声明文件。比如上面的mylib.d.ts。声明文件仅提供在各自javascript文件中定义的函数和变量的类型声明。

现在当你试着

import * from "mylib";

Mylib.d.ts被导入,作为javascript库代码和typescript项目之间的接口。

具体案例的工作示例:

假设你有my-module,你要通过npm共享它。

你用npm install my-module安装它

你可以这样使用它:

import * as lol from 'my-module';

const a = lol('abc', 'def');

模块的逻辑都在index.js中:

module.exports = function(firstString, secondString) {

  // your code

  return result
}

要添加类型,创建一个文件index.d.ts:

declare module 'my-module' {
  export default function anyName(arg1: string, arg2: string): MyResponse;
}

interface MyResponse {
  something: number;
  anything: number;
}

例如,你从npm得到了使用'alertifyjs'模块的问题。

创建“anyNameYoulike.d。Ts’(例如,你在SRC文件夹中创建了这个文件) 在文件中 声明模块'alertifyjs'; 在这里输入图像描述 在tsconfig.json 在“compilerOptions” "typeRoots": ["node_modules/@types", "src/anyNameYoulike.d.ts"]

这个答案假设你有一些JavaScript,你不想转换成TypeScript,但你想从类型检查中获益,对.js进行最小的更改。 .d。ts文件非常类似于C或c++头文件。它的目的是定义一个接口。这里有一个例子:

mashString.d.ts

/** Makes a string harder to read. */
declare function mashString(
    /** The string to obscure */
    str: string
):string;
export = mashString;

mashString.js

// @ts-check
/** @type {import("./mashString")} */
module.exports = (str) => [...str].reverse().join("");

main.js

// @ts-check
const mashString = require("./mashString");
console.log(mashString("12345"));

这里的关系是:mashstring . d.s ts定义了一个接口,mashString.js实现了这个接口,main.js使用了这个接口。

要让类型检查工作,您可以在.js文件中添加// @ts-check。 但这只是检查main.js是否正确使用了接口。为了确保mashString.js正确实现它,我们在导出之前添加/** @type {import("./mashString")} */。

你可以创建你的首字母。d。ts文件使用tsc -allowJs main.js -d,然后根据需要手动编辑它们,以改进类型检查和文档。

在大多数情况下,实现和接口具有相同的名称,这里是mashString。但是你可以有其他的实现。例如,我们可以重命名mashString.js为reverse.js,并有一个替代的encryptString.js。