在 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