Skip to content

TypeScript 進階介紹

Union Types

聯合類型表示一個值可以是幾種類型之一。它通過使用管道符號(|)來定義多個類型。

function printId(id: number | string) {
  console.log("Your ID is: " + id);
}

Intersection Types

交叉類型是將多個類型合併為一個類型,這通過使用 & 符號實現。

interface BusinessPartner {
  name: string;
  credit: number;
}

interface Contact {
  email: string;
  phone: string;
}

type Customer = BusinessPartner & Contact;

Type Guards

類型守衛是一些表達式,它們在運行時檢查以確保在某個範圍內的類型。

function isNumber(x: any): x is number {
  return typeof x === "number";
}

function isString(x: any): x is string {
  return typeof x === "string";
}

Generics

泛型(Generics)提供一種方法來創建可重用的組件,這些組件可以支持多種類型的數據。

function identity<T>(arg: T): T {
  return arg;
}

泛型也可以用於類別和介面:

class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;
}

interface GenericIdentityFn<T> {
  (arg: T): T;
}

Decorators

裝飾器是一種特殊類型的聲明,它可以被附加到類聲明、方法、存取器、屬性或參數上。

function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

@sealed
class Greeter {
  greeting: string;
}

Mixins

混入是一種將多個類的行為組合成一個類的方式。

class Disposable {
  isDisposed: boolean;
  dispose() {
    this.isDisposed = true;
  }
}

class Activatable {
  isActive: boolean;
  activate() {
    this.isActive = true;
  }
  deactivate() {
    this.isActive = false;
  }
}

class SmartObject implements Disposable, Activatable {
  // ...
}

Promises

Promise 是異步編程的一種方式。它代表了一個將來某個時間點會知道結果的操作。

function delay(ms: number): Promise<void> {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async/await

asyncawait 是基於 Promise 的異步編程的新語法。

async function getAsyncData() {
  let data = await fetchData();
  console.log(data);
}

錯誤處理

異步操作中的錯誤處理通常使用 try...catch 語句。

async function handleData() {
  try {
    let data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error("Error fetching data: ", error);
  }
}

Import 與 Export

TypeScript 支持 ES6 的模塊系統,包括 importexport 語句。

// Exporting individual features
export class SomeType { /* ... */ }
export function someFunction() { /* ... */ }

// Importing individual features
import { SomeType, someFunction } from "./someModule";

// Importing the entire module
import *

 as SomeModule from "./someModule";