依照本篇操作步驟實作,就可以在「Windows」、「OS X」操作系統上,使用Visual Studio Code開發TypeScript。
為了解決JavaScript:缺少面向對象語法、缺少編譯期間錯誤檢查...等等問題。微軟提供了一個開源的TypeScript語言,讓開發人員能夠使用面向對象撰寫TypeScript程序代碼,接著再透過TypeScript編譯程序將程序代碼編譯成為JavaScript程序代碼,就能夠建立經過編譯檢查的JavaScript程序代碼來提供平台使用。
本篇文章介紹如何在「Windows」、「OS X」操作系統中,透過Visual Studio Code這個工具開發TypeScript,讓沒有預算添購相關工具的開發人員,也能夠學習TypeScript的語法。主要為自己留個紀錄,也希望能幫助到有需要的開發人員。
首先要安裝Node.js,後續就可以使用NPM這個工具來安裝TypeScript Compiler。而Node.js的安裝程序,可以從Node.js官網下載。
裝完Node.js,接著就可以使用NPM來安裝TypeScript Compiler,之後就能透過這個Compiler來將TypeScript編譯成為JavaScript。開發人員使用命令提示字符(or終端機),輸入下列指令即可完成TypeScript Compiler的安裝。
npm install -g typescript
檢視上一個步驟所安裝的TypeScript Compiler,會發現安裝的版本為1.4.1。但是因為後續步驟,需要使用到1.5.0版新加入的功能,所以開發人員同樣使用命令提示字符(or終端機),輸入下列指令來更新TypeScript Compiler到1.5.0版以上。
npm update -g typescript
有些開發人員的計算機,先前可能已經安裝過TypeScript相關工具,這些工具會在Windows環境變量中加入TypeScript Compiler的安裝路徑。為了統一使用NPM來管理TypeScript Compiler的版本,開發人員需要手動從環境變量中移除TypeScript Compiler的安裝路徑:
C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0\
裝完TypeScript Compiler,接著安裝Visual Studio Code,之後就能透過Visual Studio Code來開發TypeScript程序代碼。而Visual Studio Code的安裝程序,可以從Visual Studio Code官網下載。
完成安裝步驟後,開啟Visual Studio Code,並且選取一個文件夾做為開發TypeScript的工作文件夾(Workspace)。
接著在Workspace加入一個新檔案「tsconfig.json」,並且輸入下列JSON設定參數。
{
"compilerOptions": {
"target": "es5",
"noImplicitAny": false,
"module": "amd",
"removeComments": false,
"sourceMap": true
}
}
再來同樣在Workspace加入一個新文件夾「.settings」,並且在這個文件夾中加入一個新檔案「tasks.json」,接著輸入下列JSON設定參數。
{
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"showOutput": "always",
"args": ["-p", "."],
"problemMatcher": "$tsc"
}
完成上述步驟後,在Workspace加入一個新檔案「main.ts」,並且輸入下列TypeScript程序代碼。
class Greeter {
data: string;
constructor(data: string) {
this.data = data;
}
run() {
alert(this.data);
}
}
window.onload = () => {
var greeter = new Greeter("Clark");
greeter.run();
};
最後按下快捷鍵「Ctrl+Shift+B」,就可以看到Visual Studio Code編譯TypeScript,並且輸出對應的JavaScript檔案:main.js。
var Greeter = (function () {
function Greeter(data) {
this.data = data;
}
Greeter.prototype.run = function () {
alert(this.data);
};
return Greeter;
})();
window.onload = function () {
var greeter = new Greeter("Clark");
greeter.run();
};
//# sourceMappingURL=main.js.map
Visual Studio Code 簡單試用體驗 http://www.linuxidc.com/Linux/2015-05/116887.htm
Visual Studio 2010 & Help Library Manager 安裝說明 http://www.linuxidc.com/Linux/2012-11/74814.htm
OpenCV 2.3.x/2.4.x在Visual Studio 2005/2008和Visual Studio 2010配置方法詳解 http://www.linuxidc.com/Linux/2012-08/68302.htm
使用OpenCV-2.4.0.exe文件編譯x86或x64平台Visual Studio 2005/2008/2010目標文件 http://www.linuxidc.com/Linux/2012-08/68305.htm
Visual Studio LightSwitch增加對HTML5和JavaScript的支持 http://www.linuxidc.com/Linux/2012-06/63397.htm
Visual Studio 11:使用 C++ 開發一個最簡單的 Metro 應用 http://www.linuxidc.com/Linux/2012-06/62657.htm
Visual Studio 的詳細介紹:請點這裡
Visual Studio 的下載地址:請點這裡