typescript声明文件-TypeScript系列完结了，什么是声明文件（declare）？

bendan520 typescript

2024-02-10 0 1,689 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

返回目录

第1课，体验打字稿

第2课，基本类型和入门类型

第 3 课，泛型

第 4 课，解释中间类型

第五课，什么是命名空间？

专题文章，从vue3源码学习typescript——“是”

第6课、什么是声明文件（declare）？ - 全球宣言

第七课，我们通过vue3实例讲一下如何在declare module句型中使用模块声明

新开发的vscode插件：任意类型，一键json转ts类型

全球声明

年底我很忙。由于个人时间限制，我暂时将“声明”部分分为“全局声明”和“模块声明”。请多多包涵。这次我要讲的是“全球声明”。

什么是声明文件？

声明文件是为js代码添加类型指示。这样js文件在ts编译环境就不会提示“缺少类型”。

要声明变量，请使用关键字declare来指示其旁边的全局变量的类型，例如：

// packages/global.d.ts
declare var __DEV__: boolean
declare var __TEST__: boolean
declare var __BROWSER__: boolean
declare var __RUNTIME_COMPILE__: boolean
declare var __COMMIT__: string
declare var __VERSION__: string

看过vue3源码的朋友一定知道那些是vue中的变量。上面的代码表明__DEV__等变量是全局的，并表明了它们的类型。这样，无论项目中的哪个ts文件使用了__DEV__，变量ts编译器都会知道它是boolean类型。

声明文件在哪里？

首先，声明文件的文件名有标准要求，必须以.d.ts结尾。看完里面的代码，你肯定会想练习写声明文件，但你可能会想问“写完之后应该放在哪里？”，网上说的是声明文件放置的任意路径/文件名该项目可以被ts编译器识别。不过在实际开发过程中发现，为了避免一些奇怪的问题，建议放在根目录下。

他人撰写的声明文件（@types/xxx）

一般大牌的第三方js插件在npm上都有对应的声明文件。例如，jquery声明文件可以在npm上下载：

npm i @types/jquery

npm i @types/jquery 中的 jquery 可以替换为任何 js 库的名称。当然，前提是有人写了相应的声明文件并发布到npm。

安装完成后，我们可以在node_modules/@types/jquery中看到声明文件。这里我打开mise.d.ts文件：

声明文件对纯js项目有什么帮助？

即使你只写js代码，你也可以安装声明文件，因为如果你使用的是vscode，它会手动分析js代码。如果有对应的声明文件，vscode 会使用声明文件的内容作为代码提示。

jquery安装声明文件后

什么情况下需要自己写申报文件？

如果在“@types/”下找不到声明文件，那么我们需要自己编写。

声明文件怎么写？

声明文件分为两类，一类是全局声明，一类是模块的声明。本节只讲“全局”。

全球宣言

通过declare我们可以指明js全局变量的类型。

申请简单

// global.d.ts
declare var n: number;
declare let s: string;
declare const o: object;
declare function f(s: string): number;
declare enum dir {
    top,
    right,
    bottom,
    left
}

声明后，我们可以直接操作任意文件中的变量：

n = 321
s = '文字'
let o1 = o;
f('123').toFixed();
dir.bottom.toFixed();
// 报错
n = '312'
s = 123

声明命名空间

这个命名空间代表它旁边的全局变量是一个对象：

// global.d.ts
declare namespace MyPlugin {
    var n:number;
    var s:string;
    var f:(s:string)=>number;
}

MyPlugin.s.substr(0,1);
MyPlugin.n.toFixed();
MyPlugin.f('文字').toFixed();
// 报错
MyPlugin.s.toFixed();
MyPlugin.n.substr(0,1);
MyPlugin.f(123);

修改现有的全局声明

其实我们安装完typescript后，会手动为我们安装一些系统变量声明文件，这些文件存放在node_modules/typescript/lib下。

如果要更改现有全局变量的声明，可以这样写。下面以节点下的全局为例：

declare global {
    interface String {
        hump(input: string): string;
    }
}
// 注意: 修改"全局声明"必须在模块内部, 所以至少要有 export{}字样
// 不然会报错❌: 全局范围的扩大仅可直接嵌套在外部模块中或环境模块声明中
export {}