返回TS學習總目錄
快速開始
我們通過創建一個簡單的web應用來開始使用TypeScript。獲得TS工具的方法主要有兩種，一種是通過NPM（Node包管理器），另一種是通過VS2012安裝TS的插件。VS2013 Update2默認已經包含了TS插件模板。
VS2013的開發者：
VS2015的開發者：
可以直接使用TS了
NPM用戶：
執行命令 > npm install -g typescript
打開我的VS2015 Professional，打開擴展和更新，發現TS已經更新到1.6.3了，看來還是更新的挺快嘛，我趕緊就更新了TS，准備常常鮮。
重啟VS，新建項目——>其他語言——>TypeScript——>起一個好的解決方案和項目名字，點擊確定，會出現下圖的解決方案目錄。
默認，這些文件中都是有內容的，是一個Demo代碼，現在，我們先刪除這些代碼，自己寫一個類似Hello World的腳本。
現在，我新建一個greeter.ts文件，輸入下面的JavaScript代碼，然后將greeter.js的應用放在index.html的</body>之前：
1 function greeter(person) { 2 return "Hello," + person; 3 } 4 5 var user = "World!"; 6 7 document.body.innerHTML = greeter(user);
index.html內容如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>TypeScript Demo</title> <link rel="stylesheet" href="app.css" type="text/css" /></head>
<body>
<h1>TypeScript Demo</h1>
<script src="greeter.js"></script>
</body>
</html>
保存，在瀏覽器查看結果：
雖然我們創建的是ts擴展名的文件，但是代碼依然是JavaScript的代碼，你可以直接將這些代碼復制/粘貼到一個現有的JavaScript應用中去運行。
當然，如果你用的Node.js的NPM，可以使用下面的命令進行ts文件的編譯：
> tsc greeter.ts
下面不再多說關於NPM中如果編譯ts，運行js。只講關於在VS中如何進行演示。
現在，我們開始使用TS中提供的一些新的東西。就像下面演示的那樣，給function的參數person添加一個“:string”注解：
1 function greeter(person:string) {//這里的string就表明了person是string類型 2 return "Hello," + person; 3 } 4 5 var user = "World!"; 6 7 document.body.innerHTML = greeter(user);//相應地，這里傳進來的實參只能是string類型的
TS中的類型注解是記錄目標函數契約或變量的輕量方式。在此例中，我們想要調用一個具有唯一的string類型參數的greeter函數。如果，在調用greeter函數時，傳入的參數是其它類型，再次編譯時就會報錯，一是編輯器中會划出波浪線提示錯誤，而是錯誤列表中也有提示。
類似地，嘗試移除greeter函數調用時的實參。編譯器會告訴你下面的結果：
在這些情況下，ts編譯器會基於代碼的結構和你提供的類型注解，給出靜態的分析結果。
要注意的是，即使存在編譯錯誤，相應的js文件還是會被創建的。但在這種情況下，TS是在警告你，你的代碼很可能不會按你想象的那樣去執行。
繼續代碼的擴展。這里我們使用一個具有firstname和lastname字段的接口。在TS中，如果兩個類型的內部結構是兼容的，那么它們就是兼容的。這樣的話，我們就可以通過創建該接口要求的模型來實現接口，而不用使用顯式的“implements”語句。代碼在線演示
1 interface Person { 2 firstname: string; 3 lastname: string; 4 } 5 function greeter(person: Person) {//這里的string就表明了person是string類型 6 return "Hello," + person.firstname + person.lastname; 7 } 8 9 var user = {firstname:"tkb",lastname:"至簡"}; 10 11 document.body.innerHTML = greeter(user);//相應地，這里傳進來的實參只能是string類型的
最后，讓我們使用TS中的類來擴展這個例子。TS支持當前ES6對於基於類的面向對象編程的提議。
這里我們創建一個具有構造函數和一些公共字段的Student類。注意類和接口可以一起工作，以便程序員決定誰才是合適的抽象級別。
也要注意，構造函數參數的“public”是一種速寫，目的是允許我們自動創建屬性。在線演示
1 class Student { 2 fullname: string; 3 constructor(public firstname, public middleInitial, public lastname) { 4 this.fullname = firstname + middleInitial + lastname; 5 } 6 } 7 interface Person { 8 firstname: string; 9 lastname: string; 10 } 11 function greeter(person: Person) { 12 return "Hello," + person.firstname + person.lastname; 13 } 14 15 var user = new Student("tkb", "-", "至簡" ); 16 17 document.body.innerHTML = greeter(user);
當然，你也可以在vs中保存即可自動編譯，在瀏覽器中瀏覽頁面即可，打開開發者工具，會看到編譯生成的js文件，TS中的類就是在JS中頻繁使用的基於原型的面向對象的一種速寫。
注意使用VS編寫TS代碼有如下優勢：
- 將光標懸停在變量或者參數上，可以看到它們的類型。
- VS基於DOM元素類型的智能提示會讓你看到可用的完整列表和參數幫助。把光標放到函數的引用上，並按F12會看到函數的定義。
- 在一個標記上右鍵，可以使用重構重命名標記。