此页内容

TypeScript-d.ts类型声明文件

耶温

766字约3分钟

2024-10-08

在TypeScript 中,类型声明文件( .d.ts 文件)用于为 JavaScript 模块提供类型信息。这些文件允许 TypeScript 编译器理解 JavaScript 模块的接口和类型,从而在开发过程中提供更好的类型检查和代码补全功能。

  • 类型声明:.d.ts 文件包含类型声明,描述了模块、函数、类、接口等的类型信息。
  • 不包含实现:这些文件只包含类型信息,不包含实际的实现代码。
  • 通常用于为没有 TypeScript 类型定义的 JavaScript 库或者插件提供类型支持。

类型声明文件

创建一个 math.js 文件:

// math.js
function add(a, b) {
    return a + b;
}

function subtract(a, b) {
    return a - b;
}

module.exports = { add, subtract };

为上述 math.js 文件创建一个类型声明文件 math.d.ts

// math.d.ts
declare module 'math' {
    export function add(a: number, b: number): number;
    export function subtract(a: number, b: number): number;
}

我们可以在 math.d.ts 文件中声明 math 模块,并使用 declare module 语法来定义模块的导出函数的类型。

// app.ts
import { add, subtract } from 'math';

const sum = add(5, 3);
const difference = subtract(5, 3);
const difference1 = subtract(5, '3'); // 报错


console.log(`Sum: ${sum}`); // 输出: Sum: 8
console.log(`Difference: ${difference}`); // 输出: Difference: 2

如上所示,我们可以在 TypeScript 文件中导入 math 模块,并使用 addsubtract 函数,TypeScript 编译器将根据 math.d.ts 文件中的类型声明进行类型检查和代码补全。

/// 三斜杠命令

在 TypeScript 中,三斜杠命令(Triple-Slash Directives)是一种特殊的注释语法,用于在 TypeScript 文件中引入其他类型声明文件或模块。这些命令以 /// 开头,通常用于提供编译器指令。

1. /// <reference path="" />

/// <reference path="" /> 命令用于引入其他 TypeScript 文件。它告诉编译器在编译当前文件时,需要包含指定的文件。这通常用于在同一个项目中引用其他模块或类型声明文件。

例如,假设我们有一个 math.ts 文件和一个 math.d.ts 文件,我们可以在 math.ts 文件中使用 /// <reference path="math.d.ts" /> 命令来引入 math.d.ts 文件:

/// <reference path="math.d.ts" />

import { add, subtract } from 'math';

const sum = add(5, 3);
const difference = subtract(5, 3);

console.log(`Sum: ${sum}`); // 输出: Sum: 8
console.log(`Difference: ${difference}`); // 输出: Difference: 2

2. /// <reference types="" />

types 参数用来告诉编译器当前脚本依赖某个 DefinitelyTyped 类型库,通常安装在 node_modules/@types 目录。

types 参数的值是类型库的名称,也就是安装到 node_modules/@types 目录中的子目录的名字。

/// <reference types="lodash" />

import _ from 'lodash';

const array = [1, 2, 3, 4, 5];
const doubled = _.map(array, (num) => num * 2);

console.log(doubled); // 输出: [2, 4, 6, 8, 10]

3. /// <reference lib="" />

lib 参数用来告诉编译器当前脚本依赖某个内置类型库,通常不需要手动指定,编译器会自动根据目标 ECMAScript 版本选择合适的内置类型库。

lib 参数的值是内置类型库的名称,例如 es2015es2016es2017 等。

/// <reference lib="es2015" />