TypeScript中怎么定義變量及使用數據類型

TypeScript中怎么定義變量及使用數據類型

TypeScript 是 JavaScript 的一個超集，它為 JavaScript 添加了靜態類型檢查。通過使用 TypeScript，開發者可以在編寫代碼時定義變量的類型，從而在編譯階段捕獲潛在的錯誤，提高代碼的可維護性和可讀性。本文將詳細介紹如何在 TypeScript 中定義變量以及如何使用數據類型。

1. TypeScript 中的變量定義

在 TypeScript 中，變量的定義與 JavaScript 類似，但增加了類型注解。類型注解允許開發者顯式地指定變量的類型，從而在編譯時進行類型檢查。

1.1 基本語法

在 TypeScript 中，定義變量的基本語法如下：

let variableName: type = value;

其中： - let 是聲明變量的關鍵字，也可以使用 const 或 var。 - variableName 是變量的名稱。 - type 是變量的類型。 - value 是變量的初始值。

例如：

let age: number = 25;
let name: string = "Alice";
let isStudent: boolean = true;

1.2 類型推斷

TypeScript 具有類型推斷功能，如果變量在聲明時被賦予了初始值，TypeScript 可以自動推斷出變量的類型，因此可以省略類型注解。

例如：

let age = 25; // TypeScript 推斷 age 的類型為 number
let name = "Alice"; // TypeScript 推斷 name 的類型為 string
let isStudent = true; // TypeScript 推斷 isStudent 的類型為 boolean

1.3 使用 const 和 let

在 TypeScript 中，推薦使用 let 和 const 來聲明變量，而不是 var。let 和 const 提供了塊級作用域，而 var 只有函數作用域。

• let 用于聲明可變的變量。
• const 用于聲明不可變的常量。

例如：

let count = 10;
count = 20; // 合法

const pi = 3.14;
pi = 3.14159; // 非法，會報錯

2. TypeScript 中的數據類型

TypeScript 支持多種數據類型，包括基本數據類型、對象類型、數組類型、元組類型、枚舉類型、任意類型、空類型、未定義類型、函數類型等。下面將逐一介紹這些數據類型。

2.1 基本數據類型

TypeScript 中的基本數據類型包括：

• number: 表示數字，包括整數和浮點數。
• string: 表示字符串。
• boolean: 表示布爾值，即 true 或 false。
• null: 表示空值。
• undefined: 表示未定義的值。

例如：

let age: number = 25;
let name: string = "Alice";
let isStudent: boolean = true;
let nothing: null = null;
let notDefined: undefined = undefined;

2.2 對象類型

對象類型用于表示復雜的數據結構。在 TypeScript 中，可以使用接口或類型別名來定義對象類型。

2.2.1 使用接口定義對象類型

接口是 TypeScript 中定義對象類型的一種方式。接口可以描述對象的形狀，包括對象的屬性和方法。

例如：

interface Person {
  name: string;
  age: number;
  isStudent: boolean;
}

let person: Person = {
  name: "Alice",
  age: 25,
  isStudent: true
};

2.2.2 使用類型別名定義對象類型

類型別名是另一種定義對象類型的方式。類型別名使用 type 關鍵字來定義。

例如：

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

let person: Person = {
  name: "Alice",
  age: 25,
  isStudent: true
};

2.3 數組類型

數組類型用于表示一組相同類型的元素。在 TypeScript 中，可以使用以下兩種方式定義數組類型：

2.3.1 使用類型注解定義數組類型

例如：

let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ["Alice", "Bob", "Charlie"];

2.3.2 使用泛型定義數組類型

例如：

let numbers: Array<number> = [1, 2, 3, 4, 5];
let names: Array<string> = ["Alice", "Bob", "Charlie"];

2.4 元組類型

元組類型用于表示一個固定長度和類型的數組。元組中的每個元素可以有不同的類型。

例如：

let person: [string, number, boolean] = ["Alice", 25, true];

2.5 枚舉類型

枚舉類型用于定義一組命名的常量。枚舉類型使用 enum 關鍵字定義。

例如：

enum Color {
  Red,
  Green,
  Blue
}

let color: Color = Color.Red;

2.6 任意類型

任意類型 (any) 用于表示任意類型的值。使用 any 類型時，TypeScript 不會進行類型檢查。

例如：

let anything: any = "Hello";
anything = 42;
anything = true;

2.7 空類型

空類型 (void) 用于表示沒有返回值的函數。void 類型通常用于函數的返回類型。

例如：

function logMessage(message: string): void {
  console.log(message);
}

2.8 未定義類型

未定義類型 (undefined) 用于表示未定義的值。undefined 類型通常用于可選參數或未初始化的變量。

例如：

let value: undefined = undefined;

2.9 函數類型

函數類型用于表示函數的類型。函數類型包括參數類型和返回類型。

例如：

function add(a: number, b: number): number {
  return a + b;
}

let sum: (a: number, b: number) => number = add;

3. TypeScript 中的類型斷言

類型斷言允許開發者手動指定變量的類型。類型斷言有兩種語法形式：

3.1 使用尖括號語法

例如：

let value: any = "Hello";
let length: number = (<string>value).length;

3.2 使用 as 語法

例如：

let value: any = "Hello";
let length: number = (value as string).length;

4. TypeScript 中的聯合類型和交叉類型

4.1 聯合類型

聯合類型用于表示一個變量可以是多種類型中的一種。聯合類型使用 | 符號連接多個類型。

例如：

let value: string | number;
value = "Hello";
value = 42;

4.2 交叉類型

交叉類型用于表示一個變量必須同時滿足多個類型的條件。交叉類型使用 & 符號連接多個類型。

例如：

interface Person {
  name: string;
}

interface Employee {
  employeeId: number;
}

type EmployeePerson = Person & Employee;

let employee: EmployeePerson = {
  name: "Alice",
  employeeId: 12345
};

5. TypeScript 中的類型別名

類型別名用于為類型創建一個新的名稱。類型別名使用 type 關鍵字定義。

例如：

type StringOrNumber = string | number;

let value: StringOrNumber;
value = "Hello";
value = 42;

6. TypeScript 中的類型守衛

類型守衛用于在運行時檢查變量的類型，并根據類型執行不同的邏輯。常見的類型守衛包括 typeof、instanceof 和用戶自定義的類型守衛。

6.1 使用 typeof 進行類型守衛

例如：

function logValue(value: string | number) {
  if (typeof value === "string") {
    console.log("String value: " + value);
  } else {
    console.log("Number value: " + value);
  }
}

6.2 使用 instanceof 進行類型守衛

例如：

class Dog {
  bark() {
    console.log("Woof!");
  }
}

class Cat {
  meow() {
    console.log("Meow!");
  }
}

function makeSound(animal: Dog | Cat) {
  if (animal instanceof Dog) {
    animal.bark();
  } else {
    animal.meow();
  }
}

6.3 用戶自定義的類型守衛

例如：

interface Bird {
  fly(): void;
}

interface Fish {
  swim(): void;
}

function isFish(pet: Bird | Fish): pet is Fish {
  return (pet as Fish).swim !== undefined;
}

function move(pet: Bird | Fish) {
  if (isFish(pet)) {
    pet.swim();
  } else {
    pet.fly();
  }
}

7. TypeScript 中的類型兼容性

TypeScript 中的類型兼容性基于結構子類型。結構子類型是一種基于類型的成員來判斷類型兼容性的方式，而不是基于類型的名稱。

例如：

interface Named {
  name: string;
}

class Person {
  name: string;
}

let p: Named;
p = new Person(); // 合法，因為 Person 類具有 name 屬性

8. TypeScript 中的高級類型

TypeScript 提供了多種高級類型，包括映射類型、條件類型、索引類型等。這些高級類型可以幫助開發者編寫更加靈活和強大的類型定義。

8.1 映射類型

映射類型用于基于現有類型創建新類型。常見的映射類型包括 Readonly、Partial、Pick 等。

例如：

interface Person {
  name: string;
  age: number;
  isStudent: boolean;
}

type ReadonlyPerson = Readonly<Person>;
type PartialPerson = Partial<Person>;
type PickPerson = Pick<Person, "name" | "age">;

8.2 條件類型

條件類型用于根據條件選擇類型。條件類型使用 extends 關鍵字和三元運算符。

例如：

type IsString<T> = T extends string ? true : false;

type A = IsString<string>; // true
type B = IsString<number>; // false

8.3 索引類型

索引類型用于通過索引訪問類型的屬性。索引類型使用 keyof 關鍵字和索引訪問操作符。

例如：

interface Person {
  name: string;
  age: number;
  isStudent: boolean;
}

type PersonKeys = keyof Person; // "name" | "age" | "isStudent"

9. 總結

TypeScript 提供了豐富的類型系統，允許開發者在編寫代碼時定義變量的類型，從而在編譯階段捕獲潛在的錯誤。通過使用類型注解、類型推斷、類型斷言、聯合類型、交叉類型、類型別名、類型守衛、類型兼容性和高級類型，開發者可以編寫出更加健壯和可維護的代碼。

在實際開發中，合理使用 TypeScript 的類型系統可以大大提高代碼的質量和開發效率。希望本文能夠幫助讀者更好地理解和使用 TypeScript 中的變量定義和數據類型。