一文读懂TS的(.d.ts)文件

唐志远

发布于 2023-05-03 11:01:57

3.7K0

发布于 2023-05-03 11:01:57

文章被收录于专栏：FE32 Code

概述

随着前端技术的不断发展，TypeScript（简称TS）已经在逐步取代JavaScript（简称JS），尤其在以 Vue3 使用 TS 重构后， TS 更是成为前端框架编写的主力语言。

在使用 TS 的时候，最大的一个好处就是可以给 JS 各种类型约束，使得 JS 能够完成静态代码分析，推断代码中存在的类型错误或者进行类型提示
TS 完成类型推断，需要事先知道变量的类型，如果我们都是用 TS 书写代码，并且给变量都指定了明确的类型，这时 TS 可以很好的完成类型推断工作
但是有时，我们不免会引入外部的 JS 库，这时 TS 就对引入的 JS 文件里变量的具体类型不明确了，为了告诉 TS 变量的类型，因此就有了.d.ts (d即declare)，ts的声明文件。 TS 身为 JS 的超集，那么如何让这些第三方库也可以进行类型推导呢，自然需要考虑到如何让 JS 库也能定义静态类型。今天小编就带大家了解下 JavaScript 和 TypeScript 的静态类型交叉口 —— 类型定义文件.d.ts(TypeScript Declaration File)，类似于 C/C++ 的 .h头文件（#include <stdio.h>），轻松让你的 JavaScript 也能支持定义静态类型。

什么是“.d.ts” 文件

基于 TypeScript 开发的时候，很麻烦的一个问题就是类型定义。导致在编译的时候，经常会看到一连串的找不到类型的提示。d.ts文件用于为 TypeScript 提供有关用 JavaScript 编写的 API 的类型信息。简单讲，就是你可以在 ts 中调用的 js 的声明文件。 TS 的核心在于静态类型，我们在编写 TS 的时候会定义很多的类型，但是主流的库都是 JS 编写的，并不支持类型系统。这个时候你不能用TS重写主流的库，这个时候我们只需要编写仅包含类型注释的d.ts文件，然后从您的 TS 代码中，可以在仍然使用纯 JS 库的同时，获得静态类型检查的 TS 优势。在此期间，解决的方式经过了许多的变化，从 DefinitelyTyped 到 typings 。最后是 @types 。在 Typescript 2.0 之后，推荐使用 @types 方式。

DefinitelyTyped

多数来自 javascript 的库是没有 TypeScript 类型定义的。为了解决这个问题，DefinitelyTyped 被创建出来，它提供了多数流行的脚本库的 TypeScript 定义，你可以使用名为 tsd 的一个工具来管理它。在 Typescript 2.0 中使用 @type 类型定义,这种方式已经不推荐使用。

安装tsd工具

npm install tsd -g
# 或
yarn global add tsd

通过工具安装定义库

# 安装jquery定义库
tsd install jquery --save

配置如果提供了 –save 参数，它会创建一个名为 tsd.json 的配置文件来保存所管理的类型定义包。

{
    "version": "v4",
    "repo": "DefinitelyTyped/DefinitelyTyped",
    "ref": "master",
    "path": "typings",
    "bundle": "typings/tsd.d.ts",
    "installed": {
        "node/node.d.ts": {
            "commit": "6834f97fb33561a3ad40695084da2b660efaee29"
        }
    }
}

以后，直接使用 tsd install 就可以安装定义在配置文件中的所有的包了。

Typings

Typings 也是一个用来管理 Typescript 定义的库。这种方式已经不推荐使用。

安装typings工具

# Install Typings CLI utility.
npm install typings --global
# 或
yarn global add typings

通过工具安装定义库

# 安装jquery定义库
typings install jquery --save

安装之后，在你的项目文件夹中会自动创建一个名为 typings 的文件夹来专门保存类型定义的库。如果这个定义来自 DefinitelyTyped ，则现有加上一个参数 –ambient ，typings install jquery --ambient --save 。

配置它自己需要一个配置文件 typings.json，可以用它来管理项目使用到的类型定义，这样，类似于 NPM，我们可以使用 install 命令来自动安装需要的类型定义。typings.json配置如下:

{
  "ambientDependencies": {
    "jquery": "registry:dt/jquery#1.10.0+20161119044246"
  },
  "dependencies": {
   "jquery": "registry:dt/jquery#1.10.0+20161119044246"
  }
}

以后，直接使用 typings install 就可以安装定义在配置文件中的所有的包了。

@Types

DefinitelyTyped 和 #Typings都需要使用另外一套系统来管理类型定义显然不太方便。在 Typescript 2.0 之后，TypeScript 将会默认的查看 ./node_modules/@types 文件夹，自动从这里来获取模块的类型定义，当然了，你需要独立安装这个类型定义。Microsoft 在 The Future of Declaration Files 介绍了 TypeScript 的这个新特性。

默认情况下，所有的 @types 包都会在编译时应用，任意层的 node_modules/@types 都会被使用，进一步说，在 ./node_modules/@types/ 、../node_modules/@types/ 、../../node_modules/@types/ 都被应用。如果你的类型定义不在这个文件夹中，可以使用 typesRoot 来配置，只有在 typeRoots 中的包才会被包含，配置如下:

{
   "compilerOptions": {
       "typeRoots" : ["./typings"]
   }
}

现在，只有在 ./typings 中的才会应用，而 ./node_modules/@types 中的则不会。如果配置了 types，则只有列出的包才会包含。

{
   "compilerOptions": {
       "types" : ["node", "lodash", "express"]
   }
}

这样将只会包含 ./node_modules/@types/node 、 ./node_modules/@types/lodash 和 ./node_modules/@types/express ，其它的则不会被包含进来。如果配置为"types": []则不会包含任何包。

*.d.ts和@types关系

@types 是 npm 的一个分支，用来存放 *.d.ts 文件，如果对应的 npm 包存放在 @types 中，要使用必须下载！如果是自己本*.d.ts 申明文件，则和 @types 没有任何关系！

编写语法

从类型 type 角度分为: 基本类型（string、number、boolean、undefined、symbol）其混合下面我们介绍下 “.d.ts” 的几种声明的写法

全局类型

变量
函数
用interface 声明函数
class
对象
混合类型
模块化的全局变量

模块化的全局变量

定义全局变量的时候需要引入(别人写的)文件

模块化（CommonJS）

通过 require 的方式引入模块化的代码

// d.ts
declare module "ever" {
    export let a: number
    export function b(): number
    export namespace c{
        let c: string
    }
 }
 // 引用
 cosnt ever = require('ever')
 ever.a = 100
 ever.b = function() {
     return 100 + 300
 }

ES6的模块化方式（import export）

export declare let a1: 1
export declare let a2: 2
// 或
declare let a1: 1
declare let a2: 2

export { a1,a2 }

UMD

有一种代码，既可以通过全局变量访问到，也可以通过 require 的方式访问到。

declare namespace ${
    let a:number
}
 
declare module "$" {
    export = $
}

其他

有时候我们扩展了一些内置对象。给 Date 的内置对象扩展方法

interface Date {
    format(f: string): string
}

案例

/** 作为函数使用 */
declare function People(w: number): number
declare function People(w: string): number

declare class People {
    /** 构造函数 */
    constructor(name: string, age: number)
    constructor(id: number)

    // 实例属性和实例方法
    name: string
    age: number
    getName(): string
    getAge(): number

    /** 作为对象，调用对象上的方法或者变量 */
    static staticA(): number
    static aaa: string
}

/** 作为对象，调用对象上的方法或者变量 */
declare namespace People {
    export var abc: number
}