在 TypeScript 中使用 keyof 運算子
-
在 TypeScript 中使用
keyof運算子 -
在 TypeScript 中使用帶有泛型的
keyof運算子 -
在 TypeScript 中對對映型別使用
keyof運算子 -
在 TypeScript 中使用
keyof運算子通過typeof運算子從列舉中提取鍵 -
在 TypeScript 中使用
keyof運算子定義 Getter - まとめ
本教程演示瞭如何在 TypeScript 中使用 keyof 運算子。
在 TypeScript 中，有兩種型別，使用者定義和原始型別，如數字、布林值和字串。
使用者定義型別通常是物件中原始型別的組合。它可以是表示巢狀或簡單鍵值對的物件。
在 TypeScript 中使用 keyof 運算子
我們可以使用 keyof 運算子將型別的公共屬性名稱提取為聯合。它是一個重要的運算子，廣泛用於編寫泛型和重用現有型別。
例子：
interface Person {
name : string;
age : number ;
}
type PersonType = keyof Person;
const AgeAttribute : PersonType = 'age'
const NameAttribute : PersonType = 'name';
上面是一個簡單的例子，說明了我們如何使用 keyof 運算子從 TypeScript 中的使用者定義型別中提取鍵。
keyof 運算子將型別的所有鍵作為型別的字串聯合返回。它還可以找到傳遞給原始型別的鍵。
type PrimitiveNumberKeys = keyof number;
// "toString" | "toFixed" | "toExponential" | "toPrecision" | "valueOf" | "toLocaleString"
儘管 keyof 運算子對於原始型別可能不方便，但我們仍然可以將其應用於原始型別和使用者定義型別。
在 TypeScript 中使用帶有泛型的 keyof 運算子
TypeScript 泛型對於製作廣泛接受的函式定義和型別至關重要。
keyof 運算子可以為函式泛型的自由度新增一些約束。以下程式碼段解釋了我們如何實現這一點。
interface Person {
name : string;
age : number ;
}
function getWitcherAttribute<T, K extends keyof T>( person : T, key : K) : T[K] {
return person[key];
}
const witcher : Person = {
name : 'Geralt',
age : 95
}
console.log(getWitcherAttribute(witcher, 'name'));
輸出：
"Geralt"
這個 keyof 運算子可以用作使用者定義型別的物件的 getter。
K extends keyof T 將分配給 K 的鍵限制為 T 型別的鍵。T[k] 返回與型別 T 相同的型別。
在 TypeScript 中對對映型別使用 keyof 運算子
我們已經看到了 keyof 運算子如何使用 extends 關鍵字來約束泛型中的某些型別。
我們可以使用 in 關鍵字進一步將泛型用作對映型別。
以下是 TypeScript 中 Partial 型別的實現。
Partial 型別用於使 TypeScript 中型別的所有欄位都是可選的。我們使用 ? 來實現它運算子，使鍵可選。
interface Person {
name : string;
age : number ;
}
type Optional<T> = {
[K in keyof T]? : T[K]
}
const witcher : Optional<Person> = {
name : "Witcher"
}
同樣，我們可以在 TypeScript 中實現 Omit 和 Pick 型別。
type PickType<T, K extends keyof T> = {
[P in K] : T[P]
}
type OmitType<T, K extends keyof T> = PickType<T, Exclude<keyof T, K>>
const witcherWithoutAge : OmitType<Person, 'age'> = {
name : "Geralt"
};
const witcherWithOnlyAge : PickType<Person, 'age'> = {
age : 95,
}
這些型別被定義為 PickType 和 OmitType 以避免與原始 Pick 和 Omit 型別重複。這些是 TypeScript 中使用 keyof 運算子的 Pick 和 Omit 的實際實現。
在 TypeScript 中使用 keyof 運算子通過 typeof 運算子從列舉中提取鍵
keyof 運算子還可以從 enum 中提取鍵。
例子：
enum Colors {
Yellow,
Red,
Black,
Blue,
Green
}
type ColorType = typeof Colors;
type AllColors = keyof ColorType;
// "Yellow" | "Red" | "Black" | "Blue" | "Green"
// it can be also be written together
type AllColors = keyof typeof Colors
該操作符非常方便，可用於進一步建立 Record 型別。
假設建立了一個對映，將 colorType 對映到字串型別的日誌訊息。它可以使用 Record 型別來實現。
例子：
type LogColorMap = Record<AllColors, string>
const LogLevel : LogColorMap = {
Black : "Normal",
Blue : "Info",
Green : "Success",
Red : "Danger",
Yellow : "Warning"
}
因此，列舉用於使用 keyof 運算子有效地建立另一種型別。
在 TypeScript 中使用 keyof 運算子定義 Getter
我們可以使用 keyof 運算子為型別建立 getter。我們使用對映型別的概念，並使用 Capitalize 型別將鍵大寫。
例子：
interface Person {
name : string;
age : number ;
}
type Getters<T> = {
[P in keyof T as `get${Capitalize<string & P>}`] : () => T[P];
}
class PersonCls implements Person, Getters<Person> {
age;
name;
constructor(){
this.age = 95;
this.name = "Geralt";
}
getName = () => {
return this.name;
}
getAge = () => {
return this.age;
}
}
const witcher = new PersonCls();
console.log(witcher.getName())
輸出：
"Geralt"
まとめ
因此，keyof 運算子有各種用例，特別是在建立具有許多泛型型別的庫時使用。此外，它還用於從現有型別中提取型別並建立新型別。
