在 Typescript 2.0 中使用 @types 類型定義

在 Typescript 2.0 中使用 @type 類型定義

基於 Typescript 開發的時候，很麻煩的一個問題就是類型定義。致使在編譯的時候，常常會看到一連串的找不到類型的提示。解決的方式通過了許多的變化，從 DefinitelyTyped 到 typings。最後是 @types。在 Typescript 2.0 以後，推薦使用 @types 方式。

DefinitelyTyped

這個工具已經不被推薦，僅做介紹。

多數來自 javascript 的庫是沒有 TypeScript 類型定義的。爲了解決這個問題，DefinitelyTyped 被建立出來，它提供了多數流行的腳本庫的 TypeScript 定義，你可使用名爲 tsd 的一個工具來管理它。

首先，你須要安裝這個工具。

npm install tsd -g

而後，可使用這個工具來安裝你須要的定義庫。好比 jquery 的定義庫。

tsd install jquery --save

 

若是提供了 --save 參數，它會建立一個名爲 tsd.json 的配置文件來保存所管理的類型定義包。看起來以下所示。

{
    "version": "v4",
    "repo": "DefinitelyTyped/DefinitelyTyped",
    "ref": "master",
    "path": "typings",
    "bundle": "typings/tsd.d.ts",
    "installed": {
        "node/node.d.ts": {
            "commit": "6834f97fb33561a3ad40695084da2b660efaee29"
        }
    }
}

 

之後，直接使用

tsd install

 

就能夠安裝定義在配置文件中的全部的包了。

Typings

這個也不推薦了。

後來，咱們有了 Typings, 這是也是一個用來管理 Typescript 定義的庫，你須要安裝這個應用。

# Install Typings CLI utility.
npm install typings --global

 若是須要一個庫的定義文件，好比 react

typings install react --save

 安裝以後，在你的項目文件夾中會自動建立一個名爲 typings 的文件夾來專門保存類型定義的庫。

若是這個定義來自 DefinitelyTyped, 則現有加上一個參數 --ambient

typings install jquery --ambient  --save

它本身須要一個配置文件 typings.json，能夠用它來管理項目使用到的類型定義，這樣，相似於 NPM，咱們可使用 install 命令來自動安裝須要的類型定義。

typings install

這個 typings.json 文件的內容示例以下。

{
  "ambientDependencies": {
    "jquery": "registry:dt/jquery#1.10.0+20161119044246"
  },
  "dependencies": {
    "react": "registry:npm/react#15.0.1+20160601175240"
  }
}

仍是須要專門的工具來管理類型系統。咱們可讓這個問題更加簡單一點。

@Types

使用另一套系統來管理類型定義顯然不太方便。

在 Typescript 2.0 以後，TypeScript 將會默認的查看 ./node_modules/@types 文件夾，自動從這裏來獲取模塊的類型定義，固然了，你須要獨立安裝這個類型定義。

好比，你但願 core.js 的類型定義，那麼，你須要安裝這個庫的定義庫。

npm install --save @types/core-js

與咱們安裝一個普通的庫沒有區別。固然了，經常使用的 jquery 也有。Microsoft 在 The Future of Declaration Files 介紹了 TypeScript 的這個新特性。

默認狀況下，全部的 @types 包都會在編譯時應用，任意層的 node_modules/@types 都會被使用，進一步說，在 ./node_modules/@types/,../node_modules/@types/, ../../node_modules/@types/ 都被應用。

若是你的類型定義不在這個文件夾中，可使用 typesRoot 來配置，只有在 typeRoots 中的包纔會被包含，例如：

{
   "compilerOptions": {
       "typeRoots" : ["./typings"]
   }
}

如今，只有在 ./typings 中的纔會應用，而 ./node_modules/@types 中的則不會。

若是配置了 types，則只有列出的包纔會包含。

{
   "compilerOptions": {
       "types" : ["node", "lodash", "express"]
   }
}

這樣將只會包含 ./node_modules/@types/node, ./node_modules/@types/lodash 和 ./node_modules/@types/express ，其它的則不會被包含進來。

若是配置爲

"types": []

則不會包含任何包。

Reference

tsconfig.json