TypeScript索引訪問類型詳解
在 TypeScript 中,Indexed Access Types(索引訪問類型)是一種通過索引來獲取其他類型中特定屬性的類型的方式。它類似于在 JavaScript 中通過索引訪問對(duì)象屬性的操作,但用于類型層面。
基本語(yǔ)法
Type[Key]
Type:可以是任意類型(對(duì)象類型、接口、元組等)
Key:必須是 Type 的有效索引鍵(可以是字符串、數(shù)字或符號(hào)字面量類型)
基本用法
1.訪問對(duì)象類型的屬性
interface Person {
name: string;
age: number;
address: {
street: string;
city: string;
};
}
// 獲取 name 屬性的類型
type NameType = Person["name"]; // string
// 獲取 age 屬性的類型
type AgeType = Person["age"]; // number
// 獲取嵌套屬性的類型
type CityType = Person["address"]["city"]; // string2.使用聯(lián)合類型索引
type PersonProperty = Person["name" | "age"]; // string | number
// 獲取所有屬性的類型聯(lián)合
type AllProperties = Person[keyof Person]; // string | number | { street: string; city: string }3.訪問數(shù)組和元組類型
type StringArray = string[]; type ArrayElement = StringArray[number]; // string type Tuple = [string, number, boolean]; type FirstElement = Tuple[0]; // string type SecondElement = Tuple[1]; // number type AllElements = Tuple[number]; // string | number | boolean
注意事項(xiàng)
1.類型安全性:TypeScript 會(huì)確保索引鍵是有效的
type Invalid = Person["invalid"]; // 錯(cuò)誤:類型"Person"上不存在屬性"invalid"
2.動(dòng)態(tài)索引:可以使用 keyof 獲取所有可能的鍵
type PersonKeys = keyof Person; // "name" | "age" | "address"
3.嵌套訪問:可以鏈?zhǔn)皆L問嵌套屬性
type StreetType = Person["address"]["street"]; // string
總結(jié)
Indexed Access Types 是 TypeScript 類型系統(tǒng)中非常強(qiáng)大的特性,它允許你:
1.從復(fù)雜類型中提取特定屬性的類型
2.創(chuàng)建基于現(xiàn)有類型的新類型
3.實(shí)現(xiàn)類型安全的屬性訪問操作
4.構(gòu)建更靈活和可重用的類型定義
到此這篇關(guān)于TypeScript索引訪問類型詳解的文章就介紹到這了,更多相關(guān)TypeScript索引訪問類型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)的不規(guī)則TAB選項(xiàng)卡效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)的不規(guī)則TAB選項(xiàng)卡效果代碼,基于鼠標(biāo)事件動(dòng)態(tài)設(shè)置頁(yè)面元素樣式實(shí)現(xiàn)該效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
一文詳解Web Audio瀏覽器采集麥克風(fēng)音頻數(shù)據(jù)
這篇文章主要為大家介紹Web Audio瀏覽器采集麥克風(fēng)音頻數(shù)據(jù)實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03
JavaScript中的FileReader圖片預(yù)覽上傳功能實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家介紹了js中的FileReader圖片預(yù)覽上傳功能,代碼分為html和js代碼兩部分,具體實(shí)現(xiàn)代碼大家參考下本文2017-07-07
微信小程序 仿美團(tuán)分類菜單 swiper分類菜單
本文主要介紹了微信小程序仿美團(tuán)分類菜單(swiper分類菜單)的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
js實(shí)現(xiàn)自定義滾動(dòng)條的示例
這篇文章主要介紹了js實(shí)現(xiàn)自定義滾動(dòng)條的示例,幫助大家制作JS特效,美化自身網(wǎng)頁(yè),感興趣的朋友可以了解下2020-10-10
通用javascript代碼判斷版本號(hào)是否在版本范圍之間
通用判斷版本號(hào)是否在兩者之間,也可以搭配判斷是否大于某版本號(hào),小于取反即可,本文給大家介紹通用javascript代碼判斷版本號(hào)是否在版本范圍之間,需要的朋友參考下2015-11-11
原生javascript圖片自動(dòng)或手動(dòng)切換示例附演示源碼
圖片自動(dòng)或手動(dòng)切換,想必會(huì)在很多地方有見過吧,本文將為大家介紹的是使用原生javascript實(shí)現(xiàn)的焦點(diǎn)圖切換,感興趣的朋友可以參考下2013-09-09
小程序?qū)崿F(xiàn)訂單評(píng)價(jià)和商家評(píng)價(jià)
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)訂單評(píng)價(jià)和商家評(píng)價(jià)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04

