日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當(dāng)前位置:首頁 > 科技  > 軟件

TypeScript中遍歷對象鍵的方法

來源: 責(zé)編: 時間:2023-11-28 17:11:24 218觀看
導(dǎo)讀前言在日常的TypeScript開發(fā)中,經(jīng)常需要遍歷對象的鍵來執(zhí)行各種操作。然而,使用Object.keys時可能會遇到一些類型相關(guān)的困擾,因?yàn)樗祷氐氖且粋€字符串?dāng)?shù)組,而不是期望的鍵的聯(lián)合類型。這可能導(dǎo)致在代碼中引入一些不安全

前言

在日常的TypeScript開發(fā)中,經(jīng)常需要遍歷對象的鍵來執(zhí)行各種操作。然而,使用Object.keys時可能會遇到一些類型相關(guān)的困擾,因?yàn)樗祷氐氖且粋€字符串?dāng)?shù)組,而不是期望的鍵的聯(lián)合類型。這可能導(dǎo)致在代碼中引入一些不安全的類型轉(zhuǎn)換。在本文中,我們將深入研究這個問題,并提供幾種解決方案,以便在遍歷對象鍵時更安全、更靈活地操作。Kv928資訊網(wǎng)——每日最新資訊28at.com

背景

使用Object.keys進(jìn)行遍歷并不能按照預(yù)期工作。這是因?yàn)镺bject.keys返回一個字符串?dāng)?shù)組,而不是包含所有鍵的聯(lián)合類型。這是設(shè)計(jì)上的考慮,不會改變。Kv928資訊網(wǎng)——每日最新資訊28at.com

function printUser(user: User) {  Object.keys(user).forEach((key) => {    // 不起作用!    console.log(user[key]);    // 報錯:屬性“key”在類型“User”上不存在。  });}

在適當(dāng)?shù)奈恢眠M(jìn)行keyof typeof類型轉(zhuǎn)換可以解決這個問題:Kv928資訊網(wǎng)——每日最新資訊28at.com

const user = {  name: "Daniel",  age: 26,};const keys = Object.keys(user);keys.forEach((key) => {  // 不再報錯!  console.log(user[key as keyof typeof user]);});

通過自定義類型斷言,可以在行內(nèi)縮小類型:Kv928資訊網(wǎng)——每日最新資訊28at.com

function isKey<T extends object>(  x: T,  k: PropertyKey): k is keyof T {  return k in x;}keys.forEach((key) => {  if (isKey(user, key)) {    console.log(user[key]);    // key現(xiàn)在被縮小為 "name" | "age"  }});

Object.keys

問題在于使用Object.keys似乎無法按照期望的方式工作。這是因?yàn)樗粫祷啬阈枰念愋汀?span style="display:none">Kv928資訊網(wǎng)——每日最新資訊28at.com

const user = {  name: "Daniel",  age: 26,};const keys = Object.keys(user);// keys的類型是 string[]

這意味著你不能使用鍵來訪問對象上的值:Kv928資訊網(wǎng)——每日最新資訊28at.com

const nameKey = keys[0];user[nameKey];// 報錯:屬性“nameKey”在類型“{ name: string; age: number; }”上不存在。

TypeScript之所以返回字符串?dāng)?shù)組,是因?yàn)樗膶ο箢愋褪情_放的。在許多情況下,TS無法保證由Object.keys返回的鍵實(shí)際上存在于對象上 - 因此將它們擴(kuò)展為字符串是唯一合理的解決方案。Kv928資訊網(wǎng)——每日最新資訊28at.com

for...in

如果嘗試使用for...in循環(huán),同樣會失敗,原因是鍵被推斷為字符串,就像Object.keys一樣。Kv928資訊網(wǎng)——每日最新資訊28at.com

function printUser(user: User) {  for (const key in user) {    console.log(user[key]);    // 報錯:屬性“key”在類型“User”上不存在。  }}

但在許多情況下,你可能確信自己完全了解對象的形狀。Kv928資訊網(wǎng)——每日最新資訊28at.com

那么,怎么辦呢?Kv928資訊網(wǎng)——每日最新資訊28at.com

解決方案1:轉(zhuǎn)換為keyof typeof

第一種選擇是使用keyof typeof將鍵轉(zhuǎn)換為更具體的類型。Kv928資訊網(wǎng)——每日最新資訊28at.com

const user = {  name: "Daniel",  age: 26,};const keys = Object.keys(user) as Array<keyof typeof user>;keys.forEach((key) => {  // 不再報錯!  console.log(user[key]);});

在索引對象時也可以進(jìn)行轉(zhuǎn)換。Kv928資訊網(wǎng)——每日最新資訊28at.com

const keys = Object.keys(user);keys.forEach((key) => {  console.log(user[key as keyof typeof user]);});

然而,as在任何形式中通常是不安全的,這也不例外。Kv928資訊網(wǎng)——每日最新資訊28at.com

const user = {  name: "Daniel",  age: 26,};const nonExistentKey = "id" as keyof typeof user;// 沒有錯誤!const value = user[nonExistentKey];// as是一個強(qiáng)大的工具,它允許我們在類型上欺騙TypeScript

解決方案2:類型斷言

通過使用isKey助手,可以在索引之前檢查鍵是否實(shí)際存在于對象中。Kv928資訊網(wǎng)——每日最新資訊28at.com

function isKey<T extends object>(  x: T,  k: PropertyKey): k is keyof T {  return k in x;}keys.forEach((key) => {  if (isKey(user, key)) {    console.log(user[key]);    // key現(xiàn)在被縮小為 "name" | "age"  }});

解決方案3:泛型函數(shù)

再來看一個略微奇怪的解決方案。在泛型函數(shù)內(nèi)部,使用in運(yùn)算符將類型縮小到鍵。Kv928資訊網(wǎng)——每日最新資訊28at.com

function printEachKey<T extends object>(obj: T) {  for (const key in obj) {    console.log(obj[key]);    // key的類型被縮小為Extract<keyof T, string>  }}// 每個鍵都被打印出來!printEachKey({  name: "Daniel",  age: 26,});

解決方案4:將Object.keys包裝在函數(shù)中

另一種解決方案是將Object.keys包裝在一個返回轉(zhuǎn)換類型的函數(shù)中。Kv928資訊網(wǎng)——每日最新資訊28at.com

const objectKeys = <T extends object>(obj: T) => {  return Object.keys(obj) as Array<keyof T>;};const keys = objectKeys({  name: "Daniel",  age: 26,});console.log(keys);// keys的類型是("name" | "age")[]

這可能是最容易被濫用的解決方案 - 將轉(zhuǎn)換隱藏在函數(shù)中使其更有吸引力,可能導(dǎo)致人們在不考慮的情況下使用它。Kv928資訊網(wǎng)——每日最新資訊28at.com

結(jié)論

本文介紹了一些解決方案,從簡單的類型轉(zhuǎn)換到更智能的類型謂詞,幫助我們更安全、更可靠地進(jìn)行對象鍵的遍歷。選擇哪種方法取決于項(xiàng)目的需求和個人偏好,但總體而言,通過了解這些技術(shù),我們可以更好地利用TypeScript的類型系統(tǒng),提高代碼的可維護(hù)性和安全性。Kv928資訊網(wǎng)——每日最新資訊28at.com


Kv928資訊網(wǎng)——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-34902-0.htmlTypeScript中遍歷對象鍵的方法

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 分享一個 Python 處理音頻的庫

下一篇: 在Python中什么場景下應(yīng)該使用多進(jìn)程和多線程?

標(biāo)簽:
  • 熱門焦點(diǎn)
Top 主站蜘蛛池模板: 靖远县| 汉阴县| 长宁区| 丹凤县| 承德市| 开化县| 永福县| 枣强县| 广西| 苏尼特右旗| 长顺县| 井研县| 安宁市| 宝清县| 浦江县| 淳化县| 固始县| 长岭县| 罗平县| 临邑县| 敦煌市| 南宫市| 定陶县| 满城县| 德惠市| 黑水县| 卢湾区| 柳河县| 灵石县| 甘洛县| 呼和浩特市| 吴桥县| 玉树县| 宁波市| 长葛市| 晋江市| 呼和浩特市| 梅州市| 隆安县| 陵川县| 房山区|