1.安裝TypeScript
有兩種方式安裝TypeScript:
-
Via npm
-
通過安裝VS插件，更多可參見這里。
對於npm用戶，可以直接使用下面的命令行安裝：
nmp install -g TypeScript
2.創建第一個TypeScript文件
打開editor，最好使用VSCode並且安裝TypeScript插件支持。創建greeter.ts文件，並寫入：
function greeter(person) { return "Hello, " + person; } let user = "Jane User"; document.body.innerHTML = greeter(user);
3.編譯你的代碼
TypeScript文件后綴都是.ts。雖然我們使用的是ts后綴，但是上面寫的這些code就只是javascript內容，你可以直接copy一下，然后使用這些內容進行測試。打開終端，找到該文件所在目錄，執行以下命令：
tsc greeter.ts
便會生成一個greeter.js文件，里面內容如下：
function greeter(person) { return "Hello, " + person; } var user = "Jane User"; document.body.innerHTML = greeter(user);
其實剛才的ts文件內容和編譯出來的js內容是一樣的，在web application中，可以直接使用編譯出來的js文件。
現在，可以使用TypeScript的一些新特性，添加 : string來注釋person的類型：
function greeter(person: string) { return "Hello, " + person; } let user = "Jane User"; document.body.innerHTML = greeter(user);
4.Type annotations
在TypeScript中，Type annotations可以用來標識變量或者參數的類型，在上面的例子中，使用了string類型來標識person。那么這個時候一旦將代碼更改為：
function greeter(person: string) { return "Hello, " + person; } let user = [1,2,3]; document.body.innerHTML = greeter(user);
編譯器就會報錯：
greeter.ts(7,35): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
同樣地，如果在調用greeter函數的時候什么也不傳入，則會報錯誤：
greeter.ts(7,27): error TS2554: Expected 1 arguments, but got 0.
也就是說，TypeScript會根據代碼結構和提供的類型注釋提供代碼靜態分析。
雖然報錯，但greeter.js還是被生成了，你可以繼續使用包含錯的的TypeScript，但是結果可能不會滿足你的預期。
5.Interface
還是在上面的demo代碼基礎上進行修改，我們可以使用interface來描述一個對象有firstName和lastName兩個屬性。在TypeScript中，如果其內部結構兼容，則兩種類型兼容。這就說明了我們可以通過Interface來實現對象，而不需要implement去實現。
interface Person { firstName: string; lastName: string; } function greeter(person: Person) { return "Hello, " + person.firstName + " " + person.lastName; } let user = {firstName: "Jane", lastName: "User"}; document.body.innerHTML = greeter(user);
這里需要注意，interface里面只能聲明屬性或者簽名，而無法添加方法。
6.class
TypeScript支持JavaScript的新功能，其中很重要的一個功能就是基於類的面向對象編程（OOP）。
這里創建一個Student的類，它有一個構造函數和一個屬性。看一下下面的代碼，你會發現類和Interface在一起結合的很完美，程序員可以自己決定正確的抽象。另外，還有一個public的關鍵字，和java中的public類似：
class Student { fullName: string; constructor(public firstName: string,public middleInitial: string,public lastName: string) { this.fullName = firstName + " " + middleInitial + " " + lastName; } } interface Person { firstName: string; lastName: string; } function greeter(person: Person) { return "Hello, " + person.firstName + " " + person.lastName; } let user = new Student("Jane","M.","User"); document.body.innerHTML = greeter(user);
值得關注的是，我們將上面代碼進行編譯為js文件，你可以看到編譯后的文件為：
var Student = /** @class */ (function () { function Student(firstName, middleInitial, lastName) { this.firstName = firstName; this.middleInitial = middleInitial; this.lastName = lastName; this.fullName = firstName + " " + middleInitial + " " + lastName; } return Student; }()); function greeter(person) { return "Hello, " + person.firstName + " " + person.lastName; } var user = new Student("Jane", "M.", "User"); document.body.innerHTML = greeter(user);
其實就是個Student的函數。
說了這么多，怎么能直接看到運行效果呢？很簡單，創建一個html文件，然后在里面引用編譯的js文件即可：
<!DOCTYPE html>
<head>
<title>TypeScript Greeter</title>
</head>
<body>
<script src="greeter.js"></script>
</body>
</html>
使用瀏覽器打開此html文件即可運行 ~ ~
另外，VSCode的提供也是很強大的，具體自己感受。