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