解密TS的声明文件

指尖轻敲
272 阅读2分钟

声明文件的语法

在之前的TS开发中，一直都在使用声明文件，但是一直都是一知半解，需要手动添加声明文件或内容的时候就直接上网搜，然后就CV大法好。今天我就要彻底搞懂声明文件该怎么写，明白每一段代码的含义。

首先声明文件是以.d.ts结尾的，然后从 declare 开始，declare 是声明一个已经存在的变量/函数/类型/class/模块module/命名空间namespace 的关键字，只做声明不做实现。

declare const globalName: string
declare function fn(name: string): string
declare class Person {
  constructor(name: string)
  public age: number
  eat(): void
}
declare type A = { a: number }
declare module 'my-lib' {
    let a: number
    function b(): void
}
declare namespace MySpace {
    let a: number
    function b(): void
}
declare global {
    interface Window {
        myCustomFunction: () => void;
    }
}

  1. 模块和命名空间的使用比较相似，怎么区分呢？当要声明一个已有模块的时候使用module，当想想要把多个逻辑单元封装整合到一起的时候使用namespace，可以避免命名冲突等。

  2. declare global 可以为全局对象添加属性和方法，上面声明后，全局可使用window.myCustomFunction();

  3. 如果声明的是TS类型，则不写declare也可以。

当安装一个npm依赖时，可以看其package.json文件中的 typings 或 types 字段，、指向的就是该库的ts声明文件。ts会从这里进行解析，从而实现代码提示。

声明文件的引入

在文件中可以使用 ///命令 来引用其他声明文件。

/// <reference path="./xxx.d.ts" />
/// <reference types="xxx" />
/// <reference lib="es2020">

reference支持三个属性：

  • path：要引入文件的路径，在编译的时候会将引入的文件一起编译。普通ts文件也可用/被用

  • types：依赖的类型库，一般在node_modules/@types/xxx下的index.d.ts

  • lib：指定编译时需要包含的内置库文件，如es2020就是lib.es2020.d.ts（内置库文件）

注意：/// 命令只能出现在文件头部

类型声明文件的生成

如果使用一个第三方库的时候，该库没有提供ts类型声明文件，这时可以先查一下看是否有人已经实现过并上传到npm了（一般名字为：@types/xxx），如果有就可以直接下载使用，如果没有就需要自己手写了。

还有一种情况就是自己在开发一个库的时候，如果要手写声明文件那将是一个巨大的工程，所以我们不需要手写，在tsconfig.json中配置自动生成即可,这样在ts编译时就会自动声明一份声明文件。

{
  "compilerOptions": {
    "declaration": true
  }
}
avatar
文章
阅读
粉丝