面向 Java/C# 程式設計師的 TypeScript

---

在本教程中，我們將討論 TypeScript，這是一個非常適合擁有 C# 和 Java 等靜態型別語言經驗的程式設計師的選項。我們可以從 TypeScript 的型別系統中受益，它提供了改進的程式碼補全、更早的錯誤檢測以及程式不同部分之間更清晰的通訊。務必記住，TypeScript 基於 JavaScript，它與傳統的 OOP 語言有一些根本區別。透過理解這些差異，我們可以避免從 C#/Java 轉向 TypeScript 的程式設計師可能犯的一些常見錯誤。

語法

使用者可以使用以下語法在 TypeScript 中建立變數：

let variableName: type = value;

在此語法中，`let` 關鍵字用於宣告變數，後跟變數名、冒號和變數的資料型別。最後，使用等號賦值變數的值。

TypeScript 的特性

以下是 Java/C# 程式設計師應該瞭解的 TypeScript 的一些特性：

TypeScript 和 JavaScript 入門

建議在深入學習 TypeScript 之前先了解 JavaScript。這將幫助我們編寫更好的 JavaScript 程式碼，並避免從其他語言過渡過來的程式設計師可能犯的一些常見錯誤。此外，值得注意的是，TypeScript 使用與 JavaScript 相同的執行時，因此任何關於 JavaScript 的資源也可以應用於 TypeScript 程式。

TypeScript 中的類和麵向物件程式設計

在 TypeScript 中，類是一種將資料和函式組合到可重用結構中的方法。但是，與 C# 和 Java 不同，在 TypeScript 中，類不是組織程式碼的必需項，也可以使用自由函式。

如果我們選擇使用類，TypeScript 提供了許多特性，例如介面、繼承和靜態方法。這使得在 TypeScript 中編寫面向物件程式碼更容易。但是，重要的是要理解類只是 TypeScript 工具箱中的一個工具，在某些情況下使用它們是可以的。

自由函式和靜態類

在 TypeScript 中，我們不需要使用像 C# 和 Java 中常用的單例或靜態類這樣的構造。相反，當自由函式（與類無關的函式）和類對我們嘗試解決的問題有意義時，我們可以使用它們。這使我們能夠更靈活地組織程式碼。

名義具體型別系統和型別作為集合

在 C# 和 Java 等一些程式語言中，每個值或物件都只有一個由類或原始型別定義的精確型別。這稱為“名義具體型別系統”，這意味著型別在執行時存在，並透過它們的宣告相關聯。

然而，在 TypeScript 中，最好將型別視為共享某些共同特徵的一組值。型別不是基於顯式宣告，而是基於它們的結構以及與其他型別的關係。這被稱為“型別作為集合”方法。

將型別視為集合允許進行更自然的運算，例如組合或相交型別，這對於一個值可以同時屬於多個型別的情況很有用。TypeScript 提供了幾種使用集合論方式處理型別的方法，使其成為編寫靈活且表達力強的程式碼的有力工具。

結構型別及其在 TypeScript 中的結果

TypeScript 中的結構型別允許更大的靈活性和動態程式設計，因為只要物件和函式具有相同的結構，就可以互換使用它們。這可以使程式碼更易於重用和重構。

但是，如果物件的結構或函式在沒有警告的情況下發生變化，則也可能導致意外行為，從而導致錯誤或型別不匹配。因此，在使用結構型別時，務必牢記潛在的風險和好處，並注意物件和函式的結構。

示例 1

在這個例子中，我們使用物件字面量語法建立了兩個物件，一個人和一個員工，它們具有不同的屬性。一個人具有姓名和年齡屬性，而員工具有姓名、年齡和職位屬性。

接下來，我們使用具有姓名和年齡屬性的物件介面定義了一個 Person 型別。然後，我們定義了一個 printPerson 函式，它接受 Person 型別的引數並將訊息記錄到控制檯。

最後，我們使用 person 和 employee 物件作為引數兩次呼叫 printPerson 函式。由於這兩個物件都具有與 Person 型別匹配的姓名和年齡屬性，因此可以將它們作為引數傳遞給 printPerson 函式而不會出錯。

使用者可以在輸出中觀察到，printPerson 函式正確地將 person 和 employee 物件的姓名和年齡記錄到控制檯。

let person = { name: "John", age: 30 };
let employee = { name: "Mary", age: 25, jobTitle: "Software Engineer" };

type Person = { name: string; age: number };

function printPerson(person: Person) {
   console.log(`${person.name} is ${person.age} years old.`);
}

printPerson(person); 
printPerson(employee);

編譯後，它將生成以下 JavaScript 程式碼：

var person = { name: "John", age: 30 };
var employee = { name: "Mary", age: 25, jobTitle: "Software Engineer" };
function printPerson(person) {
   console.log("".concat(person.name, " is ").concat(person.age, " years old."));
}
printPerson(person);
printPerson(employee);

輸出

以上程式碼將產生以下輸出：

John is 30 years old.
Mary is 25 years old.

示例 2

在這個例子中，我們建立了一個名為 Stack 的泛型類，它可以用來在 TypeScript 中實現堆疊資料結構。該類有一個型別引數 T，它表示將儲存在堆疊中的元素的型別。

接下來，我們定義了一些可以用來操作堆疊的方法，例如 push、pop 和 isEmpty。push 方法接受型別為 T 的引數並將其新增到堆疊頂部。pop 方法刪除並返回堆疊頂部的元素，而 isEmpty 方法檢查堆疊是否為空。

最後，我們建立了一個 Stack 類的例項，其型別引數為字串，並使用 push 方法向堆疊中添加了一些元素。然後，我們呼叫 pop 方法從堆疊中刪除元素並將輸出記錄到控制檯。

使用者可以在輸出中觀察到，pop 方法返回字串型別的元素，這是傳遞給 Stack 類的型別引數。

class Stack<T> {
   private items: T[] = []; 
   push(item: T): void {
      this.items.push(item);
   } 
   pop(): T | undefined {
      return this.items.pop();
   } 
   isEmpty(): boolean {
      return this.items.length === 0;
   }
} 
const stringStack = new Stack<string>();
stringStack.push("Hello");
stringStack.push("World");
stringStack.push("!"); 
while (!stringStack.isEmpty()) {
   const item = stringStack.pop();
   console.log(item);
}

編譯後，它將生成以下 JavaScript 程式碼：

var Stack = /** @class */ (function () {
   function Stack() {
      this.items = [];
   }
   Stack.prototype.push = function (item) {
      this.items.push(item);
   };
   Stack.prototype.pop = function () {
      return this.items.pop();
   };
   Stack.prototype.isEmpty = function () {
      return this.items.length === 0;
   };
   return Stack;
}());
var stringStack = new Stack();
stringStack.push("Hello");
stringStack.push("World");
stringStack.push("!");
while (!stringStack.isEmpty()) {
var item = stringStack.pop();
   console.log(item);
}

輸出

以上程式碼將產生以下輸出：

!
World
Hello

總之，TypeScript 是一種強大的語言，它提供了 Java/C# 程式設計師可以從中受益的多種功能。透過學習 JavaScript 和 TypeScript，開發人員可以編寫更高效、可擴充套件和易於維護的程式碼。