共计 2217 个字符,预计需要花费 6 分钟才能阅读完成。
前言
TypeScript 的官网文档早已更新,但我能找到的中文文档都还停留在比拟老的版本。所以对其中新增以及订正较多的一些章节进行了翻译整顿。
本篇整顿自 TypeScript Handbook 中「Keyof Type Operator」章节。
本文并不严格依照原文翻译,对局部内容也做了解释补充。
keyof
类型操作符
对一个对象类型应用 keyof
操作符,会返回该对象属性名组成的一个字符串或者数字字面量的联结。这个例子中的类型 P 就等同于 “x” | “y”:
type Point = {x: number; y: number};
type P = keyof Point;
// type P = keyof Point
但如果这个类型有一个 string
或者 number
类型的索引签名,keyof
则会间接返回这些类型:
type Arrayish = {[n: number]: unknown };
type A = keyof Arrayish;
// type A = number
type Mapish = {[k: string]: boolean };
type M = keyof Mapish;
// type M = string | number
留神在这个例子中,M
是 string | number
,这是因为 JavaScript 对象的属性名会被强制转为一个字符串,所以 obj[0]
和 obj["0"]
是一样的。
(注:原文到这里就完结了)
数字字面量联结类型
在一开始咱们也说了,keyof
也可能返回一个数字字面量的联结类型,那什么时候会返回数字字面量联结类型呢,咱们能够尝试构建这样一个对象:
const NumericObject = {[1]: "冴羽一号",
[2]: "冴羽二号",
[3]: "冴羽三号"
};
type result = keyof typeof NumericObject
// typeof NumbericObject 的后果为:// {
// 1: string;
// 2: string;
// 3: string;
// }
// 所以最终的后果为:// type result = 1 | 2 | 3
Symbol
其实 TypeScript 也能够反对 symbol 类型的属性名:
const sym1 = Symbol();
const sym2 = Symbol();
const sym3 = Symbol();
const symbolToNumberMap = {[sym1]: 1,
[sym2]: 2,
[sym3]: 3,
};
type KS = keyof typeof symbolToNumberMap; // typeof sym1 | typeof sym2 | typeof sym3
这也就是为什么当咱们在泛型中像上面的例子中应用,会如此报错:
function useKey<T, K extends keyof T>(o: T, k: K) {
var name: string = k;
// Type 'string | number | symbol' is not assignable to type 'string'.
}
如果你确定只应用字符串类型的属性名,你能够这样写:
function useKey<T, K extends Extract<keyof T, string>>(o: T, k: K) {var name: string = k; // OK}
而如果你要解决所有的属性名,你能够这样写:
function useKey<T, K extends keyof T>(o: T, k: K) {var name: string | number | symbol = k;}
类和接口
对类应用 keyof
:
// 例子一
class Person {name: "冴羽"}
type result = keyof Person;
// type result = "name"
// 例子二
class Person {[1]: string = "冴羽";
}
type result = keyof Person;
// type result = 1
对接口应用 keyof
:
interface Person {name: "string";}
type result = keyof Person;
// type result = "name"
实战
在「TypeScript 之 Generic」这篇中就讲到了一个 keyof
的利用:
咱们心愿获取一个对象给定属性名的值,为此,咱们须要确保咱们不会获取 obj
上不存在的属性。所以咱们在两个类型之间建设一个束缚:
function getProperty<Type, Key extends keyof Type>(obj: Type, key: Key) {return obj[key];
}
let x = {a: 1, b: 2, c: 3, d: 4};
getProperty(x, "a");
getProperty(x, "m");
// Argument of type '"m"' is not assignable to parameter of type '"a" | "b" | "c" | "d"'.
在前面的「Mappred Types」章节中,咱们还会讲到 keyof
。
TypeScript 系列
- TypeScript 之 Narrowing
- TypeScript 之 More on Functions
- TypeScript 之 Object Type
- TypeScript 之 Generics
如果你对于 TypeScript 有什么困惑或者其余想要理解的内容,欢送与我交换,微信:「mqyqingfeng」,公众号搜寻:「yayujs」或者「冴羽的 JavaScript 博客」
如果有谬误或者不谨严的中央,请务必给予斧正,非常感激。如果喜爱或者有所启发,欢送 star,对作者也是一种激励。