声明文件 📂 #

概述 #

1. 什么是声明文件？ #

以.d.ts结尾的文件

2. 声明文件有什么作用？ #

当ts代码去读js代码的时候，得不到类型声明。声明文件为js代码提供类型声明。

3. 声明文件的位置 #

• 放置到tsconfig.json配置中包含的目录中 (include配置的位置)
• 放置到node_modules/@types文件夹中
• 手动配置，使用手动配置后，上面的规则会失效
• 与js代码所在目录相同，并且文件名也相同的文件。用ts代码书写的工程发布之后的格式 (最佳实践)

手动配置：在tsconfig.json配置

// tsconfig.json
{
    "compilerOptions": {
        // ...
        "typeRoots": [
            "./types"
        ]
    }
}

编写 #

手动编写 #

1. 对已有的库，它是使用js书写而成，并且更改该库的代码为ts成本较高，可以手动编写
2. 对一些第三方库，它们使用js书写而成，并且这些第三库没有提供声明文件，可以手动编写声明文件

全局声明 #

例如，先删除node_modules/@types/node目录，然后新建global.d.ts声明文件 (名称随便取，后缀为.d.ts就行)

// global.d.ts
interface Console {
    log(message?: any): void
    error(message?: any): void
}
// 声明 console
declare var console: Console

type timeHandle = () => void
// 声明 setTimeout
declare function setTimeout(handle: timeHandle, miliseconds: number): number
// 声明 setInterval
declare function setInterval(handle: timeHandle, miliseconds: number): number

也可以这样写

// global.d.ts
declare namespace console {
    function log(message?: any): void
    function error(message?: any): void
}

模块声明 #

例如：我安装loadsh库，如下使用loadsh会发现无法找到模块“loadsh”的声明文件

import _ from "loadsh"

const newArr = _.chunk([3,4,5,6,7], 2)
console.log(newArr);

在同目录下新建loadsh.d.ts

// loadsh.d.ts
declare module "loadsh" {
    export function chunk<T>(array: T[], size: number): T[][]
}

如果你是使用nodemon和ts-node运行的，此时还是无法找到模块声明文件，则配置tsconfig.json

{
    "compilerOptions": {
        // ...
        "typeRoots": [
            "./node_modules/@types",
            "./src/types"
        ]
    }
}

然后新建目录types/loadsh/index.d.ts就可以运行了 (内容还是loadsh.d.ts声明的内容)

三斜线指令 #

在一个声明文件中，包含另一个声明文件，前提是该声明文件要被加载，path被加载声明文件的路径。

// 加载上级目录的index.d.ts
/// <reference path="../index.d.ts" />

自动生成 #

工程是使用ts开发的，发布 (编译) 之后，是js文件，发布的是js文件。

如果发布的文件，需要其他开发者使用，可以使用声明文件来描述发布结果中的类型。

在tsconfig.json配置

{
    "compilerOptions": {
        // ...
        "declaration": true
    }
}

发布 #

1. 当前工程使用ts开发

编译完成后，将编译结果所在文件夹直接发布到npm上即可

2. 为其他第三方库开发的声明文件

发布到@types/**中