ts笔记 - lib.d.ts文件说明

lib.d.ts包含 JavaScript 运行时以及 DOM 中存在各种常见的环境声明,方便我们在写代码时默认获得类型提示

  let a = 11
  a.toString() // 拥有类型提示

  const height = window.innerHeight // 拥有类型提示

lib.d.ts 的内容

lib.d.ts 的内容主要是一些变量声明(如:window、document、math)和一些类似的接口声明(如:Window、Document、Math)。具体请查看node_modules/typescript/lib/lib.es5.d.ts

示例Error对象:

// error 对象
interface Error {
    name: string;
    message: string;
    stack?: string;
}

修改原始类型

为添加window对象新方法

// bar.d.ts
  interface Window {
  helloWorld(): void;
}


// bar.ts
window.helloWorld = () => {
  console.log(11)
}

window.helloWorld()

为Date添加新的静态方法,对于支持通过new调用的对象,扩展DateConstructor来添加新的属性和方法

interface DateConstructor {
    new (): Date;
    now(): number;
    // 一些其他的构造函数签名
    getToday(): number;
}

// bar.ts
Date.getToday = () => {
  return 10
}
const todoay = Date.getToday()

为Date添加实例方法和静态方法,上面的示例只添加了静态方法,如果是使用new创建的示例,如何添加属性和方法呢?

// bar.d.ts,建议适用global.d.ts

export {}; // 确保是模块

declare global {
  interface Date {
      getToday(): void;
  }

  interface DateConstructor {
      today(): void;
  }
}

// bar.ts

Date.today = () => {
  // todo
};

Date.prototype.getToday = () => {
  // todo
}


const date = new Date()

date.getToday(); // 拥有提示

Date.today(); // 拥有提示

上面这种添加方式是终极的,涵盖了扩展原始类型的各种情况

编译目标对lib.d.ts的影响

编译目标就是把代码编译成哪个版本的标准JS,出于对旧浏览器的兼容考虑,我们通常设置为ES5

// tsconfig.json
{
    "compilerOptions": {
        "target": "ES5"
    },
}

但是要注意,设置为ES5就以为着lib.d.ts只会有es5的语法提示

// “Promise” 仅指类型,但在此处用作值。是否需要更改目标库? 请尝试将 “lib” 编译器选项更改为 es2015 或更高版本。
const p = Promise.reject()

如何既让代码编译为ES5,同时又拥有最新的语法提示呢?这里可以通过修改lib选项达到目的

{
    "compilerOptions": {
        "target": "ES5",
        "lib": ["dom", "es6"]
    },
}

--lib 选项提供非常精细的控制,因此你最有可能从运行环境与 JavaScript 功能类别中分别选择一项,如果你没有指定 --lib,则会导入默认库:

  • --target 选项为 es5 时,会导入 es5, dom, scripthost。
  • --target 选项为 es6 时,会导入 es6, dom, dom.iterable, scripthost。

lib选项支持的配置项:

  • JavaScript 功能:
    es5
    es6
    es2015
    es7
    es2016
    es2017
    esnext
  • 运行环境:
    dom
    dom.iterable
    webworker
    scripthost
  • ESNext 功能选项:
    es2015.core
    es2015.collection
    es2015.generator
    es2015.iterable
    es2015.promise
    es2015.proxy
    es2015.reflect
    es2015.symbol
    es2015.symbol.wellknown
    es2016.array.include
    es2017.object
    es2017.sharedmemory
    esnext.asynciterable

在旧的 JavaScript 引擎时使用 Polyfill

拥有了语法提示不代表可以编译为目标环境的代码

// 编译前:
let p = Promise.reject();

// 编译后:
var p = Promise.reject();

对于旧的浏览器我们可能仍然需要core-js这个库

上一篇:ECMAScript简介


下一篇:如何使用ES2015中的let与const