# 如何修改 Visual Studio Code 內建的 TypeScript 版本

最近這兩周由於 [Angular 2](https://angular.io/) 已經來到了 **RC5** 版本，且 [Angular CLI](https://cli.angular.io/) 也來到了 **1.0.0-beta.11-webpack.2** 版本，正式改用 [webpack](https://webpack.github.io/) 作為 Angular 2 今後的模組管理工具，專案的整體編譯速度比以前用 [SystemJS](https://github.com/systemjs/systemjs) 快了好幾倍，我們用的非常開心。但唯獨有一點不太理想，就是當 Angular CLI 升級後所建立的專案，在 Visual Studio Code 裡面一直會出現討厭的警告訊息 ( 紅色下曲線 )，在經過幾天的消化與研究之後，終於發現原來是 Visual Studio Code 與 TypeScript 的問題，欲知詳情，請繼續看下去！

我們先來看看這個惱人的錯誤畫面：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/e0e4f65c322fd8e128ad-image_2926.png)

只要有用到 [Decorators](https://www.typescriptlang.org/docs/handbook/decorators.html) 的地方，就會出現這個警示訊息，從錯誤訊息中可以得知，這個 [Decorators](https://www.typescriptlang.org/docs/handbook/decorators.html) 其實還是一個實驗性的功能，他未來可能會被加到 ECMAScript 2016 (ES7) 規格中，只是目前這份規格尚未推出正式版，因此才會顯示這個警告。

但是解決方法也很簡單，只要到 tsconfig.json 設定 experimentalDecorators 為 true，照理說就可以消除這個錯誤訊息，如下圖示：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/0493eb7ab4dec06049a1-image_2927.png)

先前在 Angular 2 RC4 的時候並沒有這個狀況，當我們將專案升級至 RC5 並且用 Angular CLI 1.0.0-beta.11-webpack.2 建立新專案後才有的問題，卡了我們好幾天的時間都無解。

我今天突然想到 Angular 2 RC5 已經改用 TypeScript 2.0.0 Beta 版本來編譯所有 \*.ts 程式碼，或許跟這個部分有關係，幾經研究之下，試圖去查找 Visual Studio Code 與 TypeScript 之間的關係，這才發現原來 Visual Studio Code 內建的 TypeScript 語言服務 (Language Service) 預設是採用 TypeScript 最新的穩定版，而當 Visual Studio Code 在對專案中的 \*.ts 做即時分析與檢查時，會直接參考 Visual Studio Code 所設定的那個版本來直接，這當然也包含會自動讀取專案目錄內的 tsconfig.json 設定檔。

最後我在 Visual Studio Code 官方文件的 [TypeScript Programming with Visual Studio Code](https://code.visualstudio.com/docs/languages/typescript) 頁面找到了 [Using Newer TypeScript Versions](https://code.visualstudio.com/docs/languages/typescript#_using-newer-typescript-versions) 這個章節，這裡有教我們如何修改 Visual Studio Code 指定的 TypeScript 版本，當我設定過去之後，所有問題就自然解決了，心中真是一陣暢快啊！ ^\_^

以下就是解決此問題的方法與步驟：

1.  在專案目錄下找到 **tsserver.js** 檔案，這個檔案應該會放在 **node\_modules/typescript/lib** 這個路徑下
2.  開啟專案的工作區設定，開啟後會自動在專案建立 **.vscode/settings.json** 檔案  
    ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/40a756015f63b7160d06-image_2928.png)
3.  接著請在此檔案設定 **typescript.tsdk** 參數，並指向 **node\_modules/typescript/lib** 這個路徑：  
    {  
        "typescript.tsdk": "node\_modules/typescript/lib"  
    }
4.  接著請重開 Visual Studio Code 編輯器，所有警告訊息都自動消失了，耶~~~~~~  
    ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/dcaa55c098d63b0b09b2-image_2929.png)

**相關連結**

-   [Decorators · TypeScript](https://www.typescriptlang.org/docs/handbook/decorators.html)
-   [Exploring EcmaScript Decorators — Google Developers — Medium](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841#.ohzxtzt6e)
-   [TypeScript Programming with Visual Studio Code](https://code.visualstudio.com/docs/languages/typescript)
-   [TypeScript 2.0 Beta版 － 強大功能釋出！](https://blogs.msdn.microsoft.com/msdntaiwan/2016/07/19/typescript-2-0-beta/)
-   [Announcing TypeScript 2.0 Beta](https://devblogs.microsoft.com/typescript/announcing-typescript-2-0-beta-2/)