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這個庫