TypeScript開發環境的搭建詳解
TypeScript 由微軟開發的開源免費的編程語言，是JavaScript語言的一個超集，本質上爲JavaScript語言添加了可選的靜態類型和基於類的面向對象編程概念。TypeScript的作者是大名鼎鼎的Anders Hejlsberg，是Delphi和C#之父。
TypeScript英文官網
https://www.typescriptlang.org/
TypeScript中文網
typescript 是 javascript 的當前最受歡迎的中間語言，提供了強大靈活的類型系統，typescript 提供一個編譯器 tsc 可以將 typescript 編寫的代碼編譯成 javascript。除了 typescript，你可能還聽過 coffescript, flow, dart 等 javascript 的中間語言。
TypeScript開發環境的搭建
本文介紹兩種TypeScript開發環境的搭建：一是TypeScript命令行開發環境的搭建 ；二是使用VSCode搭建TypeScript開發環境
一、TypeScript命令行開發環境的搭建
命令行的TypeScript編譯器可以使用Node.js之npm工具來安裝。
在命令行窗口中分別輸入node -v 和 npm -v，查看版本信息，驗證是否安裝。
【Node.JS官網https://nodejs.org/en/ ，Node.js默認就帶有npm工具。下載安裝，選擇好安裝路徑，一路回車安裝即可（需要提醒的是：若不想安裝大量的工具，不要點選“automatically install the necessary tools. Note that this will also install chocolatey. The script will pop_up in a new window after the installation completes.“ 意思是：自動安裝必要的工具。注意，這也會安裝chocolatey。安裝完成後，腳本將彈出一個新窗口）。
查看本地下載的包版本信息
npm ls 名字 -g
其中-g查看全局的模塊和包信息，去掉查看本地的】
安裝TypeScript編譯工具
使用npm安裝TypeScript，在命令行窗口中輸入
npm install -g typescript
全局安裝TypeScript。參見下圖：
安裝完成後，可以輸入
tsc -v
查看TypeScript編譯器的版本信息。參見下圖：
獲取幫助
tsc -h
將“ts文件（TypeScript文件）”文件編譯爲“js文件”
tsc [--outDir 輸出js文件的路徑] ts文件
其中：[ ]表示可選，若不用--outDir <輸出js文件的路徑>，表示編譯產生的“js文件”存放在”ts文件”的路徑中。
<ts文件>，可帶路徑
ypeScript 轉換爲 JavaScript 過程如下圖：
新建一個TypeScript文件（ts文件），內容如下：
function say(msg:string) {
return "Hello, " + msg;
}
let str = "TypeScript";
console.log(say(str));
保存到D:\TypeScriptDemo，文件名爲demoA.ts參見下圖：
在命令行窗口中，使用tsc命令編譯
用
tsc --outDir D:\TypeScriptDemo D:\TypeScriptDemo\demoA.ts
或
tsc D:\TypeScriptDemo\demoA.ts
可以使用Node.js對生成的JavaScript文件進行執行
node D:\TypeScriptDemo\demoA.js
TypeScript語法特點
TypeScript 區分大寫和小寫字符。
每行指令都是一段語句，你可以使用分號或不使用， 分號在 TypeScript 中是可選的，建議使用。
TypeScript 支持兩種類型的註釋：單行註釋 ( // ) 多行註釋 (/* */)
二、使用VSCode搭建TypeScript開發環境
先從VSCode官網（https://code.visualstudio.com）下載當前穩定（stable）版本安裝
安裝很簡單，選擇好安裝路徑，一路回車安裝即可。
安裝完成後，打開 Visual Studio Code 界面類似如下：
創建目錄d:\TypeScriptDemo2
使用VSCode選擇該目錄：菜單File—>Open Folder打開d:\TypeScriptDemo2，參見下圖
此時，在EXPLORER欄出現TYPESCRIPTDEMO2（字符變爲大寫）
再點擊菜單 Terminal(終端) —>New Terminal(新建終端），輸入 tsc --init回車（即按下Enter鍵），參見下圖：
創建出的tsconfig.json文件，將顯示在EXPLORER欄。
【注、若提示：
tsc : 無法加載文件 C:\Users\Wang\AppData\Roaming\npm\tsc.ps1，因爲在此係統上禁止運行腳本。有關詳細信息，請參閱 https:/go.microsof
t.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
應對處理：
以管理員身份 打開windows powershell
輸入set-ExecutionPolicy RemoteSigned 選擇 A 或者 Y
再輸入 tsc --init回車即可】
tsconfig.json文件
這是TypeScript的配置文件，有幾個重要的屬性需要解釋一下：
target：編譯之後生成的JavaScript文件需要遵循的標準。有三個候選項：es3、es5、es2015。
noImplicitAny：爲false時，如果編譯器無法根據變量的使用來判斷類型時，將用any類型代替。爲true時，將進行強類型檢查，無法推斷類型時，提示錯誤。
module：遵循的JavaScript模塊規範。主要的候選項有：commonjs、AMD和es2015。爲了後面與node.js保持一致，我們這裏選用commonjs。
removeComments：編譯生成的JavaScript文件是否移除註釋。
sourceMap：編譯時是否生成對應的source map文件。這個文件主要用於前端調試。當前端js文件被壓縮引用後，出錯時可藉助同名的source map文件查找源文件中錯誤位置。
outDir：編譯輸出JavaScript文件存放的文件夾。
include、exclude：編譯時需要包含/剔除的文件夾。
可以根據實際需要，修改tsconfig.json文件
在EXPLORER欄，點擊tsconfig.json文件，我們在此啓用sourceMap和outDir的設置，即去掉這兩項前面的//，並將"outDir": "./"改爲"outDir": "./js"，參見下圖：
編寫TypeScript文件
使用菜單File—>New File，輸入如下代碼：
function say(msg:string) {
return "Hello, " + msg;
}
let str = "TypeScript";
console.log(say(str));
使用菜單File—>Save 保存文件名爲sampleA.ts
編譯
點擊菜單 Terminal(終端) —>Run Build Task(運行生成任務)，在列表中選擇tsc:Watch(監視) - tsconfig.json，啓動編譯
編譯成功，將生成js目錄以及對應ts文件的js文件，並出現在在EXPLORER欄中：
運行
點擊菜單 Terminal(終端) —>New Terminal(新建終端），輸入
node D:\TypeScriptDemo2\js\sampleA.js 或node js\sampleA.js回車（即按下Enter鍵），參見下圖：
還可以使用瀏覽器運行
這需要先在VSCode中建立html文件，在其中將sampleA.js嵌入：
<!DOCTYPE html>
<head>
<title>TypeScript使用示例</title>
</head>
<body>
<script src="js/sampleA.js"></script>
</body>
</html>
保存爲testA.html
在HTML文件中右鍵找到Open In Other Browser，打開相應的瀏覽器。在瀏覽器的控制檯看到執行結果。參見下圖：
【注、若在HTML文件中右鍵找不到Open In Other Browser，需要在VSCode中安裝open in browser這個插件。
在VSCode中安裝open in browser這個插件，參見下圖：
】
最後再給出一個例子
Typescript源碼
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world");
let button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function() {
alert(greeter.greet());
}
document.body.appendChild(button);
保存爲ts_2.ts
html文件：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title> TypeScript使用示例2</title>
</head>
<body>
<script src="js/ts_2.js"></script>
</body>
</html>
保存爲test2.html
編譯運行過程參見前面，運行結果如下：
