关于“* .d.ts"在打印稿

我对.d.ts声明文件很好奇，因为我是TypeScript编程语言的新手。有人告诉我，.d.ts文件是类似的.h头文件在C &然而，c++编程语言的.d.ts文件的工作方式似乎不太一样。目前，我不明白如何正确使用。d。ts文件。它会出现，我不能添加我的.js或.ts文件到.d.ts文件，所以我的项目将工作的唯一方法是，如果它包含所有三种文件类型。看起来有很多文件啊。帮我更好地理解。d。ts文件与JavaScript &TypeScript，我有一些问题想问。

  1. 这三个文件之间是什么关系?他们之间的关系?

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

  3. 如果是这样，*.d.ts文件如何知道哪个JS文件映射到自己?

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

335001 次浏览
小开
最佳答案

“d.ts"file用于提供关于用JavaScript编写的API的typescript类型信息。这个想法是你使用jQuery或下划线之类的东西，一个现有的javascript库。你想从你的typescript代码中使用它们。

而不是重写jquery或下划线或typescript中的任何东西，你可以写d.ts文件，它只包含类型注释。然后，从你的typescript代码中，你可以获得静态类型检查的typescript好处，同时仍然使用纯JS库。

这要感谢TypeScript的约束，不允许你添加".ts"扩展在import语句的末尾。正因为如此，当你引用某个文件时，比如my-module.js，如果它旁边有my-module.d.ts，那么TypeScript就会包含它的内容:

src/
my-module.js
my-module.d.ts
index.ts

<我> my-module.js < / i >

const thing = 42;


module.exports = { thing };

<我> my-module.d.ts < / i >

export declare const thing: number;

<我> index.ts < / i >

import { thing } from "./my-module"; // <- no extension


// runtime implementation of `thing` is taken from ".js"
console.log(thing); // 42


// type declaration of `thing` is taken from ".d.ts"
type TypeOfThing = typeof thing; // number
小开

d代表声明文件:

当TypeScript脚本被编译时，有一个选项可以生成 一个声明文件(扩展名为.d.ts)，用作 接口到编译后的JavaScript中的组件。在这个过程中 编译器剥离所有函数和方法体并保留 仅导出类型的签名。由此产生的 声明文件然后可用于描述导出的虚拟 JavaScript库或模块的TypeScript类型

. developer从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声明文件的大集合 库托管在GitHub上的DefinitelyTyped和类型 注册表< / >。提供了一个名为打字的命令行实用程序来提供帮助 从存储库中搜索并安装声明文件

小开

我从使用.d.ts文件费力地映射JavaScript项目中学到了以下内容。

使用.d.ts文件映射JavaScript需要将.d.ts文件命名为与.js文件相同的名称。每个.js文件需要与具有相同名称的.d.ts文件保持内联(保存在同一目录中)。将需要.d.ts文件类型的JS/TS代码指向.d.ts文件。

test.js和test.d.ts在testdir/文件夹中，然后你像这样在react组件中导入它:

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

.d.ts文件被导出为如下的命名空间:

export as namespace Test;
    

export interface TestInterface1{}
export class TestClass1{}
小开

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

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

  1. Typescript是javascript的语法超集。
  2. Typescript不能自己运行，它需要被转译成javascript (Typescript到javascript的转换)
  3. “类型定义”和“类型检查”是typescript在javascript上提供的主要附加功能。(# EYZ0)

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

# EYZ0

正如我们讨论过的，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项目之间的接口。

小开

工作的例子对应具体案例:

假设您通过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;
}
小开
这个答案假设你有一些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.ts定义接口，mashString.js实现接口，main.js使用接口。

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

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

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

小开

我想我可以在这里发表我的看法

// 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项目中。

小开

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

  1. 创建“anyNameYoulike.d。Ts’(例如，你在SRC文件夹中创建了这个文件)
  2. 文件中 声明模块'alertifyjs'; 李# EYZ0 < / > <李> tsconfig.json 在“compilerOptions" "typeRoots": ["node_modules/@type "， "src/ anynameyoulike . d.s ts"]
    3. .
小开

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

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


提交答案