扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >浅谈typescript中keyof与typeof操作符用法
  • 291

0
分享到

浅谈typescript中keyof与typeof操作符用法

2024-04-02 19:04:59 291人浏览 安东尼
摘要

目录一、keyof 简介二、keyof 的作用三、keyof 与对象的数值属性四、keyof 与 typeof 操作符一、keyof 简介 typescript 允许我们遍历某种类型

一、keyof 简介

typescript 允许我们遍历某种类型的属性，并通过 keyof 操作符提取其属性的名称。keyof 操作符是在 TypeScript 2.1 版本引入的，该操作符可以用于获取某种类型的所有键，其返回类型是联合类型。
下面我们来看个例子：

interface Person {
  name: string;
  age: number;
  location: string;
}

type K1 = keyof Person; // "name" | "age" | "location"
type K2 = keyof Person[];  // number | "length" | "push" | "concat" | ...
type K3 = keyof { [x: string]: Person };  // string | number

除了接口外，keyof 也可以用于操作类，比如：

class Person {
  name: string = "Semlinker";
}

let sname: keyof Person;
sname = "name";

若把 sname = “name” 改为 sname = “age” 的话，TypeScript 编译器会提示以下错误信息：

Type '"age"' is not assignable to type '"name"'.

keyof 操作符除了支持接口和类之外，它也支持基本数据类型：

let K1: keyof boolean; // let K1: "valueOf"
let K2: keyof number; // let K2: "toString" | "toFixed" | "toExponential" | ...
let K3: keyof symbol; // let K1: "valueOf"

此外 keyof 也称为输入索引类型查询，与之相对应的是索引访问类型，也称为查找类型。在语法上，它们看起来像属性或元素访问，但最终会被转换为类型：

type P1 = Person["name"];  // string
type P2 = Person["name" | "age"];  // string | number
type P3 = string["charAt"];  // (pos: number) => string
type P4 = string[]["push"];  // (...items: string[]) => number
type P5 = string[][0];  // string

二、keyof 的作用

javascript 是一种高度动态的语言。有时在静态类型系统中捕获某些操作的语义可能会很棘手。以一个简单的prop 函数为例：

function prop(obj, key) {
  return obj[key];
}

该函数接收 obj 和 key 两个参数，并返回对应属性的值。对象上的不同属性，可以具有完全不同的类型，我们甚至不知道 obj 对象长什么样。

那么在 TypeScript 中如何定义上面的 prop 函数呢？我们来尝试一下：

function prop(obj: object, key: string) {
  return obj[key];
}

在上面代码中，为了避免调用 prop 函数时传入错误的参数类型，我们为 obj 和 key 参数设置了类型，分别为 {} 和 string 类型。然而，事情并没有那么简单。针对上述的代码，TypeScript 编译器会输出以下错误信息：

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'

元素隐式地拥有 any 类型，因为 string 类型不能被用于索引 {} 类型。要解决这个问题，你可以使用以下非常暴力的方案：

function prop(obj: object, key: string) {
  return (obj as any)[key];
}

很明显该方案并不是一个好的方案，我们来回顾一下 prop 函数的作用，该函数用于获取某个对象中指定属性的属性值。因此我们期望用户输入的属性是对象上已存在的属性，那么如何限制属性名的范围呢？这时我们可以利用本文的主角 keyof 操作符：

function prop<T extends object, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}

在以上代码中，我们使用了 TypeScript 的泛型和泛型约束。首先定义了 T 类型并使用 extends 关键字约束该类型必须是 object 类型的子类型，然后使用 keyof 操作符获取 T 类型的所有键，其返回类型是联合类型，最后利用 extends 关键字约束 K 类型必须为 keyof T 联合类型的子类型。 是骡子是马拉出来遛遛就知道了，我们来实际测试一下：

type Todo = {
  id: number;
  text: string;
  done: boolean;
}

const todo: Todo = {
  id: 1,
  text: "Learn TypeScript keyof",
  done: false
}

function prop<T extends object, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}

const id = prop(todo, "id"); // const id: number
const text = prop(todo, "text"); // const text: string
const done = prop(todo, "done"); // const done: boolean

很明显使用泛型，重新定义后的 prop<T extends object, K extends keyof T>(obj: T, key: K) 函数，已经可以正确地推导出指定键对应的类型。那么当访问 todo 对象上不存在的属性时，会出现什么情况？比如：

const date = prop(todo, "date");

对于上述代码，TypeScript 编译器会提示以下错误：

Argument of type '"date"' is not assignable to parameter of type '"id" | "text" | "done"'.

这就阻止我们尝试读取不存在的属性。

三、keyof 与对象的数值属性

在使用对象的数值属性时，我们也可以使用 keyof 关键字。请记住，如果我们定义一个带有数值属性的对象，那么我们既需要定义该属性，又需要使用数组语法访问该属性， 如下所示：

class ClassWithNumericProperty {
  [1]: string = "Semlinker";
}

let classWithNumeric = new ClassWithNumericProperty();
console.log(`${classWithNumeric[1]} `);

下面我们来举个示例，介绍一下在含有数值属性的对象中，如何使用 keyof 操作符来安全地访问对象的属性：

enum Currency {
  CNY = 6,
  EUR = 8,
  USD = 10
}

const CurrencyName = {
  [Currency.CNY]: "人民币",
  [Currency.EUR]: "欧元",
  [Currency.USD]: "美元"
};

console.log(`CurrencyName[Currency.CNY] = ${CurrencyName[Currency.CNY]}`);
console.log(`CurrencyName[36] = ${CurrencyName[6]}`);

上面的代码中，首先定义了一个 Currency 枚举用于表示三种货币类型，接着定义一个 CurrencyName 对象，该对象使用数值属性作为键，对应的值是该货币类型的名称。该代码成功运行后，控制台会输出以下结果：

CurrencyName[Currency.CNY] = 人民币
CurrencyName[36] = 人民币

为了方便用户能根据货币类型来获取对应的货币名称，我们来定义一个 getCurrencyName 函数，具体实现如下：

function getCurrencyName<T, K extends keyof T>(key: K, map: T): T[K] {
  return map[key];
}

console.log(`name = ${getCurrencyName(Currency.CNY, CurrencyName)}`);

同样，getCurrencyName 函数和前面介绍的 prop 函数一样，使用了泛型和泛型约束，从而来保证属性的安全访问。最后，我们来简单介绍一下 keyof 与 typeof 操作符如何配合使用。

四、keyof 与 typeof 操作符

typeof 操作符用于获取变量的类型。因此这个操作符的后面接的始终是一个变量，且需要运用到类型定义当中。为了方便大家理解，我们来举一个具体的示例：

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

let man: Person = {
  name: "Semlinker",
  age: 30
}

type Human = typeof man;

了解完 typeof 和 keyof 操作符的作用，我们来举个例子，介绍一下它们如何结合在一起使用：

const COLORS = {
  red: 'red',
  blue: 'blue'
}

// 首先通过typeof操作符获取color变量的类型，然后通过keyof操作符获取该类型的所有键，
// 即字符串字面量联合类型 'red' | 'blue'

type Colors = keyof typeof COLORS 
let color: Colors;
color = 'red' // Ok
color = 'blue' // Ok

// Type '"yellow"' is not assignable to type '"red" | "blue"'.
color = 'yellow' // Error

最后留到思考题，有兴趣的小伙伴可以想一想：

interface StringIndexArray {
  [index: string]: string;
}

interface NumberIndexArray {
  [index: number]: string;
}

type K1 = keyof StringIndexArray // type K1 = string | number
type K2 = keyof NumberIndexArray // type K2 = number

到此这篇关于浅谈typescript中keyof与typeof操作符用法的文章就介绍到这了,更多相关typescript中keyof与typeof操作符内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: 浅谈typescript中keyof与typeof操作符用法

本文链接: https://lsjlt.com/news/152283.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 浅谈typescript中keyof与typeof操作符用法
    目录一、keyof 简介二、keyof 的作用三、keyof 与对象的数值属性四、keyof 与 typeof 操作符一、keyof 简介 TypeScript 允许我们遍历某种类型...
    99+
    2024-04-02
  • typescript中keyof与typeof操作符怎么使用
    这篇文章主要介绍“typescript中keyof与typeof操作符怎么使用”，在日常操作中，相信很多人在typescript中keyof与typeof操作符怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家...
    99+
    2023-07-02
  • 浅析JavaScript中的操作符与表达式
    1.表达式1.1原始表达式3.14 //数字直接量 "hello world" //字符串直接量 /pattern/ //正则表达式直接量 true //返回一个布尔值： 真 false //返回一个布尔值：...
    99+
    2022-11-22
    javascript
  • 浅谈ubuntu 中sudo update与upgrade的作用及区别
    入门linux的同志，刚开始最迫切想知道的，大概一个是中文输入法，另一个就是怎么安装软件。本文主要讲一下LINUX安装软件方面的特点。 在windows下安装软件，我们只需要有EXE文件，然后双击，下一步直...
    99+
    2022-06-04
    浅谈 区别 作用
  • 浅谈一下Java中的访问修饰符以及作用
    目录publicprotecteddefaultprivate总结：Java 中的访问修饰符用于限制类、接口、字段和方法的访问范围，它们分别表示不同的访问控制级别。Java 中共有四...
    99+
    2023-05-19
    Java 修饰符 Java 访问修饰符
  • 浅谈操作系统中用户级线程与内核级线程的优缺点
    用户级线程、内核级线程、操作系统、进程、线程 用户级线程 用户级线程是创建与管理由用户程序直接实现的线程。在用户级实现线程的过程中，当一个线程阻塞时，其它的线程照样可以继续运行。因此，用户级线程可有效利用多核处理器的特性。 优点： 创...
    99+
    2024-02-03
    用户级线程与内核级线程的优缺点
  • 浅谈Python中用datetime包进行对时间的一些操作
    1. 计算给出两个时间之间的时间差 import datetime as dt # current time cur_time = dt.datetime.today() # one day pre_t...
    99+
    2022-06-04
    浅谈 中用 操作
  • JavaScript变量与操作符的使用方法
    今天小编给大家分享一下JavaScript变量与操作符的使用方法的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我...
    99+
    2024-04-02
  • 浅谈python socket函数中,send与sendall的区别与使用方法
    在python socket编程中，有两个发送TCP的函数，send()与sendall()，区别如下： socket.send(string[, flags]) 　发送TCP数据，返回发送的字节大小。这个...
    99+
    2022-06-04
    浅谈 使用方法 函数
  • JavaScript中rxjs与Observable操作符怎么使用
    这篇文章主要讲解了“JavaScript中rxjs与Observable操作符怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript中rxjs与Observable操作符...
    99+
    2023-07-02
  • C语言操作符#与##使用方法详解
    目录一、# 运算符二、## 运算符三、小结一、# 运算符 # 运算符用于在预处理期将宏参数转换为字符串# 的转换作用是在预处理期完成的，因此只在宏定义中有效编译器不知道 # 的转换作...
    99+
    2024-04-02
  • Python中操作符重载用法分析
    本文实例讲述了Python中操作符重载用法。分享给大家供大家参考，具体如下： 类可以重载python的操作符 操作符重载使我们的对象与内置的一样。__X__的名字的方法是特殊的挂钩（hook），python...
    99+
    2022-06-04
    操作 Python
  • C#中is和as操作符的用法
    本篇内容介绍了“C#中is和as操作符的用法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！c# 中 is和as 操作符是用来进行强制类型转换...
    99+
    2023-06-17
  • Python中常用操作字符串的函数与方法总结
    例如这样一个字符串 Python，它就是几个字符：P,y,t,h,o,n，排列起来。这种排列是非常严格的，不仅仅是字符本身，而且还有顺序，换言之，如果某个字符换了，就编程一个新字符串了；如果这些字符顺序发生...
    99+
    2022-06-04
    字符串 函数 常用
  • 浅析Python中yield关键词的作用与用法
    前言 为了理解yield是什么，首先要明白生成器(generator)是什么，在讲生成器之前先说说迭代器(iterator)，当创建一个列表(list)时，你可以逐个的读取每一项，这就叫做迭代（iterat...
    99+
    2022-06-04
    关键词 作用 Python
  • C语言中操作符的介绍及用法
    这篇文章主要讲解了“C语言中操作符的介绍及用法”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“C语言中操作符的介绍及用法”吧！目录操作符分类算术操作符移位操作符整数存储规则左右移位规则赋值操作...
    99+
    2023-06-20
  • python中字符串最常用的操作方法
    这篇文章给大家分享的是有关python中字符串最常用的操作方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。首先，我们先定义两个字符串，然后后面我们会对其进行一系列操作示范str1="sadf ...
    99+
    2023-06-08
  • Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
    程序中常常需要复制一个对象, 按思路应该是这样的 a = [1, 2, 3] b = a # [1, 2, 3] print b 已经复制好了，但是现在得改变一下第一个元素的值把它改成5 ...
    99+
    2022-06-04
    模块 操作 方法
  • Python3中字符串的常用操作方法有哪些
    这篇文章主要介绍了Python3中字符串的常用操作方法有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Python3中字符串的常用操作方法有哪些文章都会有所收获，下面我们一...
    99+
    2024-04-02
  • 怎么在python中使用format()方法操作字符串
    怎么在python中使用format()方法操作字符串？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。Python主要用来做什么Python主要应用于：1、Web...
    99+
    2023-06-14
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作