TypeScript 之 Keyof Type Operator

简介: TypeScript 的官方文档早已更新,但我能找到的中文文档都还停留在比较老的版本。所以对其中新增以及修订较多的一些章节进行了翻译整理。

4.png


前言


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
复制代码


注意在这个例子中,Mstring | 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 系列文章由官方文档翻译、重难点解析、实战技巧三个部分组成,涵盖入门、进阶、实战,旨在为你提供一个系统学习 TS 的教程,全系列预计 40 篇左右。点此浏览全系列文章,并建议顺便收藏站点。


微信:「mqyqingfeng」,加我进冴羽唯一的读者群。


如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎 star,对作者也是一种鼓励。



目录
相关文章
|
2月前
|
JavaScript
typeScript进阶(9)_type类型别名
本文介绍了TypeScript中类型别名的概念和用法。类型别名使用`type`关键字定义,可以为现有类型起一个新的名字,使代码更加清晰易懂。文章通过具体示例展示了如何定义类型别名以及如何在函数中使用类型别名。
39 1
typeScript进阶(9)_type类型别名
|
4月前
|
JavaScript 前端开发 开发工具
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
|
5月前
|
JavaScript 安全 前端开发
TypeScript 基础学习笔记:interface 与 type 的异同
TypeScript 基础学习笔记:interface 与 type 的异同
64 0
|
6月前
|
JavaScript
Typescript中 interface 和 type 的区别是什么?
在 TypeScript 中,interface 和 type 都用于定义类型,但它们有一些区别。
175 0
|
JavaScript
Vue+TS/Typescript:Property does not exist on type ‘(() => any) | ComputedOptions<any>‘
Vue+TS/Typescript:Property does not exist on type ‘(() => any) | ComputedOptions<any>‘
273 0
|
JavaScript
typescript(ts) interface 与 type 的异同
接口可以使用 extends 关键字来进行扩展(这个继承是包含关系,如果父级有了,子集不可以声明重复的,会报错的),或者是 implements来进行实现某个接口
typescript(ts) interface 与 type 的异同
typescript65-映射类型(keyof)
typescript65-映射类型(keyof)
100 0
typescript65-映射类型(keyof)
|
JavaScript 前端开发
TypeScript 之 Typeof Type Operator
TypeScript 的官方文档早已更新,但我能找到的中文文档都还停留在比较老的版本。所以对其中新增以及修订较多的一些章节进行了翻译整理。
192 0
TypeScript 之 Typeof Type Operator
|
JavaScript 算法 安全
TypeScript Type Innference(类型推断)
在这一节,我们将介绍TypeScript中的类型推断。我们将会讨论类型推断需要在何处用到以及如何推断。 基础 在TypeScript中,在几个没有明确指定类型注释的地方将会使用类型推断来提供类型信息。
|
29天前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
44 0