面向 JavaScript 開發人員的 TypeScript 簡介

TypeScript是JavaScript的超集，為JavaScript新增了選購的靜態型別系統。如果您是JavaScript開發者，最近可能經常聽到關於TypeScript的消息。但它究竟是什麼？為什麼您應該關注它？以及如何在專案中有效地開始使用它？

本文將以簡單的術語解釋TypeScript，幫助您理解是什麼讓它如此強大，以及為什麼它可能是您下一個JavaScript專案的理想工具。

TypeScript是什麼？

核心而言，TypeScript是具有類型的JavaScript。 TypeScript透過添加靜態類型層來增強JavaScript，這有助於在開發過程中捕獲潛在錯誤，甚至在程式碼運行之前。

但不用擔心－TypeScript還是JavaScript！所有有效的JavaScript程式碼也是有效的TypeScript程式碼。 TypeScript只是為您提供了額外的工具來改進您的開發工作流程，使您的程式碼更健壯，並防止錯誤。

為什麼要選擇TypeScript？

您可能會問：「如果TypeScript只是帶有類型的JavaScript，為什麼不堅持使用JavaScript呢？」答案在於安全性和開發者體驗。

1. 靜態型別減少錯誤

   TypeScript透過強制類型來幫助儘早發現錯誤。在JavaScript中，由於意外的資料類型（例如，嘗試對數字呼叫字串方法），您經常會遇到bug。 TypeScript甚至在您執行程式碼之前就能捕捉這些類型的錯誤。

2. 更好的工具和自動完成

   TypeScript提供更好的自動完成、更準確的類型檢查和更輕鬆的重構。您的IDE可以為您提供更聰明的建議和錯誤訊息，從而加快開發速度。

3. 大型專案的可維護性程式碼

   隨著JavaScript專案的成長，使用動態類型的管理大型程式碼庫變得越來越困難。 TypeScript幫助您更好地組織程式碼，使其在長期內更容易維護。

4. JavaScript開發者容易學習

   TypeScript的設計初衷是為了讓JavaScript開發者易於學習。您不必學習一門全新的語言—只需在必要時添加類型即可。您可以在現有的JavaScript程式庫中逐步使用TypeScript。

---

面向JavaScript開發者的關鍵TypeScript概念

如果您熟悉JavaScript，TypeScript會感覺非常熟悉，但有一些關鍵區別。讓我們深入探討一些基本的TypeScript概念：

1. 類型：TypeScript的核心

JavaScript和TypeScript之間最大的區別之一是類型系統。在JavaScript中，類型是動態的，這表示變數可以在執行時間變更類型：

<code class="language-javascript">let message = "Hello, world!";
message = 42;  // 没有错误，即使类型已更改</code>

在TypeScript中，您可以明確定義變數的類型，編譯器將確保指派給它的值與該類型相符：

<code class="language-typescript">let message: string = "Hello, world!";
message = 42;  // 错误：类型“number”无法分配给类型“string”</code>

TypeScript中一些常見的類型包括：

• string – 用於文字字串。
• number – 用於數字（整數和浮點數）。
• boolean – 用於真或假值。
• object – 用於複雜資料類型，如陣列和物件。
• any – 用於任何類型，實際上禁用了類型檢查（謹慎使用）。

2. 介面：描述物件的形狀

TypeScript使用介面來描述物件的形狀。這允許您定義物件必須遵守的結構，包括其屬性及其類型。

<code class="language-typescript">interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "Alice",
  age: 25
};</code>

當您希望確保物件遵循特定結構時，介面非常有用，例如確保所有使用者物件都具有名稱（字串）和年齡（數字）。

3. 帶型的函數

在TypeScript中，您可以為函數參數和傳回值指定類型，讓您的程式碼更可預測，更容易偵錯。

<code class="language-typescript">function greet(name: string): string {
  return `Hello, ${name}!`;
}

greet("Alice");  // 正确
greet(42);  // 错误：类型“number”的参数无法分配给类型“string”的参数</code>

您也可以定義函數類型，包括可選參數、預設值和剩餘參數。

<code class="language-typescript">function sum(a: number, b: number = 0): number {
  return a + b;
}

console.log(sum(5)); // 5
console.log(sum(5, 3)); // 8</code>

4. 聯合型別：處理多種型別

在JavaScript中，變數可以保存多種類型的數值，但是TypeScript允許您使用聯合類型更明確地表達這種靈活性。

例如，您可以定義一個可以保存字串或數字的變數：

<code class="language-typescript">let value: string | number;

value = "Hello";
value = 42;</code>

當您具有可以採用多種形式的值時，聯合類型非常有用，例如可以傳回字串或null的函數。

5. 類別與繼承

TypeScript支援物件導向程式設計（OOP）的概念，如類別和繼承，就像JavaScript（ES6）一樣，但具有額外的類型安全性。

<code class="language-typescript">class Animal {
  constructor(public name: string) {}

  speak(): void {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak(): void {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog("Buddy");
dog.speak();  // 输出：Buddy barks.</code>

在TypeScript中，您可以為類別的屬性和方法指定類型，以使您的程式碼更可預測，並確保類別的實例符合預期的結構。

6. 泛型：寫出靈活且可重複使用的程式碼

泛型可讓您建立適用於任何類型的函數、類別和接口，但仍保留類型安全性。您可以編寫一個適用於多種類型的函數，而不是為每種類型編寫單獨的函數。

<code class="language-typescript">function identity<T>(arg: T): T {
  return arg;
}

console.log(identity("Hello"));  // 类型为string
console.log(identity(42));  // 类型为number</code>

泛型對於建立可重複使用的元件或函數特別有用，例如需要處理多種類型的函式庫或公用程式。

---

開始使用TypeScript

現在您已經了解了基本概念，如何在現有的JavaScript專案中開始使用TypeScript呢？

1. 安裝TypeScript您可以透過npm安裝TypeScript：

<code class="language-bash">npm install -g typescript</code>

2. 建立TypeScript設定檔TypeScript使用設定檔（tsconfig.json）來指定編譯器選項和專案的結構。

您可以透過執行以下命令來產生此檔案：

<code class="language-javascript">let message = "Hello, world!";
message = 42;  // 没有错误，即使类型已更改</code>

3. 編寫.ts檔案TypeScript程式碼通常寫在副檔名為.ts的檔案中。 TypeScript編譯器（tsc）可以將.ts檔編譯成標準的JavaScript檔。

<code class="language-typescript">let message: string = "Hello, world!";
message = 42;  // 错误：类型“number”无法分配给类型“string”</code>

4. 編譯並執行您的程式碼編寫TypeScript程式碼後，您可以透過執行以下命令將其編譯成JavaScript：

<code class="language-typescript">interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "Alice",
  age: 25
};</code>

這將產生可以在瀏覽器或Node.js中運行的JavaScript檔案。

---

總結

TypeScript是一個強大的工具，它讓JavaScript開發更有效率、更安全、更具可擴充性。它為JavaScript的動態特性引入了類型，提供了靜態分析和更好的工具，這有助於減少錯誤並改善開發人員體驗。

如果您已經熟悉JavaScript，那麼TypeScript很容易學習，而且您可以在現有的程式碼庫中逐步採用它。類型安全、更好的調試和更易於維護的程式碼帶來的額外好處，使其成為小型和大型專案的寶貴投資。

祝您使用TypeScript程式設計愉快！ ?

以上是面向 JavaScript 開發人員的 TypeScript 簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！