关于TypeScript中的"*.d.ts"

Question

因为*.d.tsTypeScript的新手而感到好奇.有人告诉我,这种文件类似于C++中的"头文件",但仅适用于JS.但我无法将纯JS文件转换为*.d.ts文件,除非我强制更改*.js为*.ts.所以我有三个文件:一个JS文件,一个TS文件和一个*.d.ts文件.

---

1. 他们之间有什么关系？

2. 我该如何使用该*.d.ts文件？这是否意味着我可以*.ts永久删除该文件？

3. 如果是这样,*.d.ts文件如何知道哪个JS文件映射到自身？

---

非常感谢!如果有人能给我一个例子,那将是非常好的.

Answer 1

"d.ts"文件用于提供有关用JavaScript编写的API的打字稿类型信息.这个想法是你使用的东西,如jQuery或下划线,一个现有的JavaScript库.您想要使用打字稿代码中的那些.

您可以改为编写仅包含类型注释的d.ts文件,而不是重写jquery或下划线或打字稿中的任何内容.然后从您的打字稿代码中获取静态类型检查的打字稿优势,同时仍然使用纯JS库.

Answer 2

d代表声明文件:

当编译TypeScript脚本时,有一个选项可以生成一个声明文件(扩展名为.d.ts),该文件用作编译JavaScript中组件的接口.在此过程中,编译器会删除所有函数和方法体,并仅保留导出类型的签名.然后,当第三方开发人员从TypeScript使用它时,生成的声明文件可用于描述JavaScript库或模块的导出的虚拟TypeScript类型.

声明文件的概念类似于在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库的大量声明文件集合托管在DefinitelyTyped和Typings Registry的 GitHub上.提供了一个名为typings的命令行实用程序,用于帮助从存储库中搜索和安装声明文件.

Answer 3

我无法评论,因此将其作为答案添加.我们试图将现有类型映射到javascript库时遇到了一些麻烦.

要将d.ts文件映射到其javascript文件,您需要为d.ts文件指定与javascript文件相同的名称,将它们保存在同一文件夹中,并将需要它的代码指向d.ts文件.

例如:test.js和test.d.ts在testdir中,然后你在反应组件中这样导入它:

import * as Test from "./testdir/test";

d.ts文件作为命名空间导出,如下所示:

export as namespace Test;

export interface TestInterface1{}
export class TestClass1{}

Answer 4

样例用于特定情况：

假设您有要通过npm共享的my-module。

您使用安装 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;
}

Answer 5

就像@takeshin一样，.d代表打字稿（.ts）的声明文件。

在继续回答此职位之前，有几点需要澄清-

1. Typescript是javascript的语法超集。
2. Typescript不能单独运行，需要将其转换为javascript（将typescript转换为javascript）
3. “类型定义”和“类型检查”是Typescript通过javascript提供的主要附加功能。（检查类型脚本和javascript之间的区别）

如果你想，如果打字稿是只是语法的超集，有什么好处呢它提供- https://basarat.gitbooks.io/typescript/docs/why-typescript.html#the-typescript-type-system

要回答此帖子-

正如我们所讨论的，打字稿是javascript的超集，需要转换为javascript。因此，如果库或第三方代码是用打字稿编写的，则最终会将其转换为可被javascript项目使用的javascript，反之亦然。

对于前-

如果您安装javascript库-

npm install --save mylib

并尝试以打字稿代码导入-

import * from "mylib";

你会得到错误。

“找不到模块'mylib'。”

正如@Chris所提到的，下划线，Jquery之类的许多库已经用javascript编写。不需要为打字稿项目重写这些库，而是需要一种替代解决方案。

为此，您可以在名为* .d.ts的javascript库中提供类型声明文件，就像上面的mylib.d.ts一样。声明文件仅提供在相应的javascript文件中定义的函数和变量的类型声明。

现在，当您尝试-

import * from "mylib";

将导入mylib.d.ts，它充当javascript库代码和Typescript项目之间的接口。

Answer 6

此答案假设您有一些不想转换为 TypeScript 的 JavaScript，但您希望在对.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;

混搭字符串.js

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

主文件

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

这里的关系是：mashString.d.ts定义一个接口，mashString.js实现接口，main.js使用接口。

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

您可以使用创建初始.d.ts文件，tsc -allowJs main.js -d然后根据需要手动编辑它们以改进类型检查和文档。

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

Answer 7

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

\n

\n

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

\n

\n

Answer 8

我想我可以在这里加 2 美分

// somefile.d.ts
export type SomeItem = {
  weight: number
}

export type ItemStorage = {
  name: string
  items: SomeItem[]
}

// somefile.js
// @ts-check
/** @typedef { import('./somefile.d.ts').SomeItem } SomeItem */
/** @typedef { import('./somefile.d.ts').ItemStorage } ItemStorage */

/**
 * @param { StorageItem } item
 */
function doSomething(item) {
  item. // intellisense
  // your code here
}

这样做的巧妙之处在于，我们可以逐渐将类型合并到现有的 javascript 项目中。