TypeScript - `typeof` 型別操作符

你好，未來的編程巫師們！今天，我們將踏上一段令人興奮的旅程，探索TypeScript的世界，特別聚焦於typeof型別操作符。別擔心你對編程還是新手；我將成為你的友好指導者，我們將一步步探索這個主題。所以，拿一杯你喜歡的飲料，我們一起來深入探討吧！

TypeScript - Typeof Type Operator

`typeof` 型別操作符是什麼？

在我們深入細節之前，讓我們先了解typeof型別操作符是什麼。在TypeScript中，typeof是一個強大的工具，它允許我們提取變量或表達式的型別。它就像一個神奇的放大鏡，讓我們能夠窺探我們代碼中的型別信息。

它有什麼用？

想像你是一個試圖解開謎題的偵探。typeof操作符就像你可靠的放大鏡，幫助你發現代碼中類型的線索。當你處理複雜數據結構或當你想要創建有更多靈活性和可重用性的代碼時，這會非常有用。

語法

typeof型別操作符的語法非常直接。這是它的樣子：

typeof 變量或表達式

就是這麼簡單！你只需在想要檢查的變量或表達式前加上typeof，然後 TypeScript 就會給你型別信息。

範例

現在，讓我們捋起袖子，看看一些實際的範例。我會向你展示typeof型別操作符在不同情況下的超有用性。

範例 1：基本使用

我們從一個簡單的例子開始：

let myNumber = 42;
type MyNumberType = typeof myNumber;

// 使用
let anotherNumber: MyNumberType = 100; // 這是有效的
let myString: MyNumberType = "Hello"; // 錯誤：類型 'string' 不可分配給類型 'number'

在這個例子中，我們使用typeof myNumber來創建一個新的型別MyNumberType。TypeScript 推斷出myNumber是number型別，所以MyNumberType等價於number型別。

範例 2：與對象一起使用

typeof操作符在處理對象時特別出色。我們來看一下：

const user = {
name: "Alice",
age: 30,
isAdmin: false
};

type User = typeof user;

// 使用
const newUser: User = {
name: "Bob",
age: 25,
isAdmin: true
};

const invalidUser: User = {
name: "Charlie",
age: "Twenty" // 錯誤：類型 'string' 不可分配給類型 'number'
};

在這裡，我們使用typeof user來創建一個User型別，它與我們的user對象結構匹配。當你想要確保其他對象具有相同的結構時，這非常有用。

範例 3：函數類型

typeof操作符也可以與函數一起使用。看看這個：

function greet(name: string): string {
return `Hello, ${name}!`;
}

type GreetFunction = typeof greet;

// 使用
const sayHi: GreetFunction = (name: string) => `Hi, ${name}!`;
const invalidGreet: GreetFunction = (name: number) => `Hello, ${name}`; // 錯誤：參數 'name' 不可分配

在這個例子中，我們使用typeof greet來創建一個GreetFunction型別，它與我們的greet函數的簽名匹配。這確保了任何賦值給GreetFunction型別變量的函數都擁有相同的參數和返回類型。

範例 4：枚舉類型

typeof在處理枚舉時特別方便：

enum Color {
Red,
Green,
Blue
}

type ColorType = typeof Color;

// 使用
const colorUtils: ColorType = {
Red: 0,
Green: 1,
Blue: 2
};

const invalidColorUtils: ColorType = {
Red: 0,
Green: 1,
Yellow: 2 // 錯誤：'Yellow' 在類型 'typeof Color' 中不存在
};

在這裡，typeof Color給我們一個代表Color枚舉結構的型別。這在創建有需要與枚舉結構相同對象的情況下非常有用。

範例 5：與 `keyof` 結合使用

typeof操作符與 TypeScript 的其他功能配合得很好。我們來看看它是如何與keyof一起工作的：

const dimensions = {
width: 100,
height: 200
};

type DimensionKeys = keyof typeof dimensions;

// 使用
function getDimension(key: DimensionKeys): number {
return dimensions[key];
}

console.log(getDimension("width")); // 有效
console.log(getDimension("depth")); // 錯誤：參數類型 '"depth"' 不可分配給參數類型 'keyof typeof dimensions'

在這個例子中，我們結合keyof和typeof來創建一個代表我們dimensions對象鍵的型別。這讓我們能夠創建只能接受對象有效鍵的函數。

方法表

這裡是一個總結typeof型別操作符關鍵點的表格：

方法	描述	示例
`typeof 變量`	提取變量的型別	`type T = typeof myVariable;`
`typeof 對象`	創建一個與對象結構匹配的型別	`type ObjectType = typeof myObject;`
`typeof 函數`	創建一個與函數簽名匹配的型別	`type FuncType = typeof myFunction;`
`typeof 枚舉`	創建一個代表枚舉結構的型別	`type EnumType = typeof MyEnum;`
`keyof typeof 對象`	創建一個對象鍵的聯合型別	`type Keys = keyof typeof myObject;`