TypeScript 中如何使用 keyof

阅读时长 4 分钟读完

在 TypeScript 中,keyof 是一个非常强大的操作符,用于获取一个类型的所有属性名。使用 keyof 可以让我们在编写代码时更加灵活,这篇文章将详细介绍在 TypeScript 中如何使用 keyof

1. 简单使用

我们可以通过下面的代码来获取一个类型的所有属性名:

上面的代码定义了一个 Person 类型,其中包含 nameagegender 三个属性。通过 keyof 我们可以获得该类型的所有属性名,结果为 "name""age""gender"

2. 使用 keyof 来获取对象属性的值类型

我们可以使用 keyof 来获取一个对象属性的值类型,具体代码如下:

上面的代码中,我们通过 Person['name'] 来获取 Personname 属性的值类型,结果为 string。同样的,Person['age'] 的结果为 number

如果 Person 中不存在这个属性,那么将会返回 undefined 类型:

3. 使用 keyof 来动态访问对象属性

使用 keyof 可以让我们在编写代码时更加灵活,可以动态的访问对象的属性、设置对象的属性值等等。下面是一些示例代码:

3.1 获取对象属性的值

-- -------------------- ---- -------
---- ------ - -
    ----- -------
    ---- -------
    ------- ------ - ---------
--

----- ------- ------ - -
    ----- ------
    ---- ---
    ------- -------
--

-------- ------------------- - ------- ----- ------- -- ---- -- -
    ------ ---------
-

----- ---- - ------------------------ -------- -- ------
----- --- - ------------------------ ------- -- ------
----- ------ - ------------------------ ---------- -- ------ - --------

上面的代码中,我们定义了一个 getPropertyValue 函数,该函数接受一个对象和一个属性名作为参数,返回该属性的值。在函数的定义中我们使用了 keyof 来约束属性名必须是对象类型 T 的属性名,这样就可以保证传入的属性名在类型上是正确的。

3.2 设置对象属性的值

-- -------------------- ---- -------
---- ------ - -
    ----- -------
    ---- -------
--

----- ------- ------ - -
    ----- ------
    ---- ---
--

-------- ------------------- - ------- ----- ------- -- ---- -- ------ ----- -
    -------- - ------
-

------------------------ ------- ---------
------------------------ ------ ----

上面的代码中,我们定义了一个 setPropertyValue 函数,该函数接受一个对象、一个属性名和一个新的值作为参数,将该属性的值设置为新的值。同样的,在函数定义中我们使用了 keyof 约束属性名必须是对象类型 T 的属性名,保证了传入的属性名在类型上是正确的。

4. 结论

通过本文的介绍,我们了解了如何使用 keyof 在 TypeScript 中获取一个类型的所有属性名、获取一个对象属性的值类型以及动态访问对象属性等等。使用 keyof 可以在编写 TypeScript 代码时以一种更加灵活和精确的方式操作类型和对象。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/674d5eb9a336082f254cc035

纠错
反馈