TypeScript：文件 - 5分鐘上手 TypeScript 工具

讓我們從構建一個簡單的 TypeScript Web 應用程式開始。

安裝 TypeScript

將 TypeScript 新增到專案中有兩種主要方式：

透過 npm（Node.js 包管理器）
透過安裝 TypeScript 的 Visual Studio 外掛

Visual Studio 2017 和 Visual Studio 2015 Update 3 預設包含 TypeScript 語言支援，但不包含 TypeScript 編譯器 tsc。如果您沒有隨 Visual Studio 安裝 TypeScript，您仍然可以下載它。

對於 npm 使用者

shell
> npm install -g typescript

構建您的第一個 TypeScript 檔案

在編輯器中，將以下 JavaScript 程式碼輸入到 greeter.ts 檔案中：

ts
function greeter(person) {
  return "Hello, " + person;
}
 
let user = "Jane User";
 
document.body.textContent = greeter(user);Try

編譯程式碼

雖然我們使用了 .ts 副檔名，但這段程式碼其實就是普通的 JavaScript。你可以直接將其從現有的 JavaScript 應用程式中複製貼上過來。

在命令列中，執行 TypeScript 編譯器：

shell
tsc greeter.ts

結果會生成一個 greeter.js 檔案，其中包含了你輸入的相同 JavaScript 程式碼。我們已經成功在 JavaScript 應用中使用 TypeScript 了！

現在我們可以開始利用 TypeScript 提供的一些新工具了。為 ‘person’ 函式引數新增一個 : string 型別註解，如下所示：

ts
function greeter(person: string) {
  return "Hello, " + person;
}
 
let user = "Jane User";
 
document.body.textContent = greeter(user);Try

型別註解

TypeScript 中的型別註解是一種輕量級的方式，用於記錄函式或變數的預期契約。在本例中，我們打算讓 greeter 函式使用單個字串引數呼叫。我們可以嘗試將呼叫 greeter 的引數改為一個數組：

ts
function greeter(person: string) {
  return "Hello, " + person;
}
 
let user = [0, 1, 2];
 
document.body.textContent = greeter(user);
Argument of type 'number[]' is not assignable to parameter of type 'string'.2345Argument of type 'number[]' is not assignable to parameter of type 'string'.Try

重新編譯，你會看到一個錯誤：

shell
error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

同樣地，嘗試刪除 greeter 呼叫中的所有引數。TypeScript 會告知你呼叫該函式時引數數量不對。在這兩種情況下，TypeScript 都能根據程式碼結構和你提供的型別註解提供靜態分析。

請注意，儘管存在錯誤，但 greeter.js 檔案仍然會被建立。即使程式碼中有錯誤，你也可以使用 TypeScript。但在這種情況下，TypeScript 是在警告你程式碼可能無法按預期執行。

介面 (Interfaces)

讓我們進一步開發這個示例。這裡我們使用一個介面來描述具有 firstName 和 lastName 欄位的物件。在 TypeScript 中，如果兩個型別的內部結構相容，它們就是相容的。這允許我們僅透過擁有介面所需的形狀（shape）來實現介面，而無需顯式的 implements 子句。

ts
interface Person {
  firstName: string;
  lastName: string;
}
 
function greeter(person: Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}
 
let user = { firstName: "Jane", lastName: "User" };
 
document.body.textContent = greeter(user);Try

類 (Classes)

最後，讓我們用類（classes）來擴充套件一下這個示例。TypeScript 支援 JavaScript 中的新特性，例如對基於類的面向物件程式設計的支援。

在這裡，我們將建立一個帶有建構函式和幾個公共欄位的 Student 類。請注意，類和介面配合得很好，讓程式設計師能夠決定合適的抽象級別。

另外值得注意的是，在建構函式引數上使用 public 是一種速記法（shorthand），它允許我們自動建立同名的屬性。

ts
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.textContent = greeter(user);Try

重新執行 tsc greeter.ts，你會發現生成的 JavaScript 與之前的程式碼相同。TypeScript 中的類只是 JavaScript 中常用的基於原型（prototype-based）的面向物件程式設計的一種簡寫。

執行你的 TypeScript Web 應用

現在在 greeter.html 中輸入以下內容：

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 操場（playground）中。你可以將滑鼠懸停在識別符號上以檢視其型別。請注意，在某些情況下，這些型別是為你自動推斷出來的。重新輸入最後一行，看看基於 DOM 元素型別的補全列表和引數幫助。將游標放在 greeter 函式的引用上，按 F12 轉到其定義。同樣要注意，你可以右鍵點選一個符號並使用重構功能來重新命名它。

所提供的型別資訊與工具協同工作，可以在應用規模上處理 JavaScript。有關 TypeScript 可能實現的功能的更多示例，請參閱網站的“示例”部分。

Visual Studio picture