npm 组件没有types_为 Vue3 学点 TypeScript, 什么是声明文件(declare)? [全局声明篇]

往期目录

全局声明篇

年底比较忙🔥, 受个人时间限制, 暂把"声明"部分的内容分为"全局声明篇"和"模块声明篇", 👷还请多多包涵, 本次先说"全局".

什么是声明文件?

声明文件就是给js代码补充类型标注. 这样在ts编译环境下就不会提示js文件"缺少类型".

声明变量使用关键字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上都有对应的声明文