5分鐘入門TypeScript (翻譯自官方文件)
讓我們通過使用TypeScript來構建一個簡單的Web應用程式來入門吧
安裝 TypeScript
獲取TypeScript主要有兩種方法：
- 通過npm （Node.js包管理器）
- 通過安裝Visual Studio TypeScript外掛
Visual Studio 2017和VIsual Studio 2015 Update 3 預設包含了TypeScript。 如果你沒有在Visual Studio上安裝TypeScript，你仍然可以從這裡下載它。
對於使用NPM的使用者，通過以下命令安裝：
> npm install -g typescript
建立你的第一個TypeScript檔案
在你的編輯器裡建立一個greeter.ts的檔案， 將下面的程式碼複製到這個檔案中：
function greeter(person) { return "Hello, " + person; } let user = "Jane User"; document.body.innerHTML = greeter(user);
編譯你的程式碼
我們使用了一個.ts的副檔名， 但其實這些程式碼僅使用了JavaScript。你可以直接複製貼上這些程式碼到一個已有的JavaScript程式中去使用。
在命令列中執行TypeScript編譯器：
tsc greeter.ts
這個命令將會生成一個包含了同樣JavaScript程式碼的greeter.js檔案，這樣就可以在我們的JavaScript程式中去使用TypeScript了。
現在我們開始使用一些TypeScript提供的新特性。像下面一樣新增一個 :string 型別的註解到person函式的引數中：
function greeter(person: string) { return "Hello, " + person; } let user = "Jane User"; document.body.innerHTML= greeter(user);
型別註解
型別註解在TypeScript是一個記錄函式和變數預期契約的輕量級方法，在這個例子中，我們預計greeter函式將會在被呼叫時候使用一個string型別的引數。我們可以嘗試傳遞一個數組去呼叫greeter函式：
function greeter(person: string) { return "Hello, " + person; } let user = [0, 1, 2]; document.body.innerHTML = greeter(user);
重新編譯，你將會看到以下的錯誤：
error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
類似，試著在呼叫greeter時候移除所有的引數。TypeScript將會告訴你，在呼叫函式的時候使用了不是預料中個數的引數。在這兩個例子中， TypeScript可以通過基於程式碼結構和型別註解進行靜態分析。
需要注意的是，儘管有一些錯誤，但是greeter.js檔案依然會被建立。你甚至能在你的程式碼有錯誤的時候使用TypeScript，但是這種情況下TypeScript會發出警告,你的程式碼可能不會像預計的那樣執行。
介面
讓我們進一步來改進我們的示例。這裡我們使用介面來描述一個包含firstName和lastName屬性的物件。在TypeScript中如果他們的內部結構相容，那麼這兩種型別是相容的。這允許我們不用顯式的去實現一個介面，僅僅定義好介面的格式就可以。
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);
類
最後，我們使用類來擴充套件這個例子。TypeScript支援新的特性，例如支援基於類的面向物件程式設計。
這裡我們建立一個Student類，包含一個建構函式和幾個公共的欄位。注意類和介面可以很好的在一起使用，讓開發者來決定正確的抽象級別。
同樣值得注意的是，我們在建構函式引數上使用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);
再次執行 tsc greeter.ts ，你將會發現像之前一樣生成了JavaScript檔案。在TypeScript中的類僅僅是針對JavaScript中常用的基於原型面向物件的簡單表達方式。
在你的Web程式中使用TypeScript
現在我們使用下面的程式碼建立 greeter.html檔案:
<!DOCTYPE html> <html> <head><title>TypeScript Greeter</title></head> <body> <script src="greeter.js"></script> </body> </html>
在瀏覽器開啟greeter.html來執行你的第一個基於TypeScript的簡單Web程式。
可選：在Visual Studio開啟greeter.ts或者複製它的程式碼到TypeScript檔案，你可以在變數上懸停以檢視其型別。注意，在某些情況下，這些型別是自動為您推斷的。重新鍵入最後一行，並根據DOM元素的型別檢視完成列表和引數幫助。將游標放在對greeter函式的呼叫上，並按F12鍵，將會跳轉到它的定義。請注意，您也可以右鍵單擊一個成員並使用重構去重新命名它。
The type information provided works together with the tools to work with JavaScript at application scale.。更多示例，請參見網站的示例部分。
翻譯自： http://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html