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

Posted 2021-04-25 微软中国MSDN

最近这两周由于Angular 2 已经来到了RC5 版本，且 Angular CLI 也来到了1.0.0-beta.11-webpack.2 版本，正式改用 webpack 作为 Angular 2 今后的模组管理工具，专案的整体编译速度比以前用SystemJS 快了好几倍，我们用的非常开心。

但唯独有一点不太理想，就是当 Angular CLI 升级后所建立的专案，在 Visual Studio Code 里面一直会出现讨厌的警告信息( 红色下曲线)，在经过几天的消化与研究之后，终于发现原来是 Visual Studio Code 与 TypeScript 的问题，欲知详情，请继续看下去！

我们先来看看这个恼人的错误画面：

只要有用到 Decorators 的地方，就会出现这个警告信息，从错误信息中可以得知，这个 Decorators 其实还是一个实验性的功能，他未来可能会被加到 ECMAScript 2016 (ES7) 规格中，只是目前这份规格尚未推出正式版，因此才会显示这个警告。

但是解决方法也很简单，只要到 tsconfig.json 设定 experimentalDecorators 为 true，照理说就可以消除这个错误信息，如下图示：

先前在 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 页面找到了 Using Newer TypeScript Versions 这个章节，这里有教我们如何修改 Visual Studio Code 指定的 TypeScript 版本，当我设定过去之后，所有问题就自然解决了，心中真是一阵畅快啊！ ^_^

以下就是解决此问题的方法与步骤：

1. 在专案目录下找到 tsserver.js 档案，这个档案应该会放在node_modules/typescript/lib 这个路径下

   
   

2. 开启专案的工作区设定，开启后会自动在专案建立 .vscode/settings.json 档案

   
   

3. 接着请在此档案设定 typescript.tsdk 参数，并指向 node_modules/typescript/lib 这个路径：

{
    "typescript.tsdk": "node_modules/typescript/lib"
}

    4.接着请重开 Visual Studio Code 编辑器，所有警告信息都自动消失了，耶~~~~~~

遇到相同问题的可以尝试一下哦。