TypeScript索引訪問(wèn)類(lèi)型詳解
在 TypeScript 中，Indexed Access Types（索引訪問(wèn)類(lèi)型）是一種通過(guò)索引來(lái)獲取其他類(lèi)型中特定屬性的類(lèi)型的方式。它類(lèi)似于在 JavaScript 中通過(guò)索引訪問(wèn)對(duì)象屬性的操作，但用于類(lèi)型層面。
基本語(yǔ)法
Type[Key]
Type：可以是任意類(lèi)型（對(duì)象類(lèi)型、接口、元組等）
Key：必須是 Type 的有效索引鍵（可以是字符串、數(shù)字或符號(hào)字面量類(lèi)型）
基本用法
1.訪問(wèn)對(duì)象類(lèi)型的屬性
interface Person {
name: string;
age: number;
address: {
street: string;
city: string;
};
}
// 獲取 name 屬性的類(lèi)型
type NameType = Person["name"]; // string
// 獲取 age 屬性的類(lèi)型
type AgeType = Person["age"]; // number
// 獲取嵌套屬性的類(lèi)型
type CityType = Person["address"]["city"]; // string2.使用聯(lián)合類(lèi)型索引
type PersonProperty = Person["name" | "age"]; // string | number
// 獲取所有屬性的類(lèi)型聯(lián)合
type AllProperties = Person[keyof Person]; // string | number | { street: string; city: string }3.訪問(wèn)數(shù)組和元組類(lèi)型
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.類(lèi)型安全性：TypeScript 會(huì)確保索引鍵是有效的
type Invalid = Person["invalid"]; // 錯(cuò)誤：類(lèi)型"Person"上不存在屬性"invalid"
2.動(dòng)態(tài)索引：可以使用 keyof 獲取所有可能的鍵
type PersonKeys = keyof Person; // "name" | "age" | "address"
3.嵌套訪問(wèn)：可以鏈?zhǔn)皆L問(wèn)嵌套屬性
type StreetType = Person["address"]["street"]; // string
總結(jié)
Indexed Access Types 是 TypeScript 類(lèi)型系統(tǒng)中非常強(qiáng)大的特性，它允許你：
1.從復(fù)雜類(lèi)型中提取特定屬性的類(lèi)型
2.創(chuàng)建基于現(xiàn)有類(lèi)型的新類(lèi)型
3.實(shí)現(xiàn)類(lèi)型安全的屬性訪問(wèn)操作
4.構(gòu)建更靈活和可重用的類(lèi)型定義
到此這篇關(guān)于TypeScript索引訪問(wèn)類(lèi)型詳解的文章就介紹到這了,更多相關(guān)TypeScript索引訪問(wèn)類(lèi)型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript實(shí)現(xiàn)256色轉(zhuǎn)灰度圖
本文主要介紹了JavaScript實(shí)現(xiàn)256色轉(zhuǎn)灰度圖的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
Javascript中With語(yǔ)句用法實(shí)例
這篇文章主要介紹了Javascript中With語(yǔ)句用法,實(shí)例分析了javascript中with語(yǔ)句的相關(guān)使用方法,類(lèi)似VB語(yǔ)句的用法,需要的朋友可以參考下2015-05-05
JavaScript實(shí)現(xiàn)獲取遠(yuǎn)程的html到當(dāng)前頁(yè)面中
今天做個(gè)項(xiàng)目，需要在當(dāng)前的html頁(yè)面中引用一個(gè)遠(yuǎn)程的html頁(yè)面，百度了一下，發(fā)現(xiàn)一個(gè)非常好用的代碼，這里分享給大家，有相同需求的小伙伴可以來(lái)看看2017-03-03
TypeScript中type和interface的區(qū)別及注意事項(xiàng)
type的類(lèi)型別用可以用戶其他的類(lèi)型,比如聯(lián)合類(lèi)型、元祖類(lèi)型、基本類(lèi)型,interface不行,下面這篇文章主要給大家介紹了關(guān)于TypeScript中type和interface的區(qū)別及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2022-10-10
javascript 獲取網(wǎng)頁(yè)參數(shù)系統(tǒng)
用處比較多，適合在當(dāng)前網(wǎng)頁(yè)打開(kāi)別的網(wǎng)站的內(nèi)容2008-07-07
細(xì)說(shuō)webpack源碼之compile流程-入口函數(shù)run
Webpack 是一個(gè)前端資源加載/打包工具。它將根據(jù)模塊的依賴(lài)關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源。這篇文章主要介紹了webpack源碼之compile流程-入口函數(shù)run,需要的朋友可以參考下2017-12-12
Bootstrap頁(yè)面標(biāo)題Page Header的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Bootstrap頁(yè)面標(biāo)題Page Header的實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
多行輸入框組件是原生組件,這篇文章主要給大家介紹了關(guān)于微信小程序輸入多行文本的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
文本框(input)獲取焦點(diǎn)(onfocus)時(shí)樣式改變的示例代碼
本篇文章主要是對(duì)文本框(input)獲取焦點(diǎn)(onfocus)時(shí)樣式改變的示例代碼進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
JS控件autocomplete 0.11演示及下載 1月5日已更新
JS控件autocomplete 0.11演示及下載 1月5日已更新...2007-01-01