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这个库