TypeScript工具類 Partial 和 Required 的場(chǎng)景分析
場(chǎng)景描述:
場(chǎng)景描述:一個(gè)接口(IPerson)有很多個(gè)的字段,可能有幾百。而且這些字段都是必須的。
我們需要使用這個(gè)接口,但是我又不可能使用它的全部??赡苤粫?huì)使用幾個(gè)。
我還必須要使用這接口。這個(gè)時(shí)候,我們?cè)趺唇鉀Q這個(gè)問(wèn)題呢?
TS給了我們一個(gè)工具類Partial,可以解決這隔辦法
Partial [ pɑ r?l ] [部分的]
使用的方式就是 let obj:Partial<接口名>={ }
工具類的使用 Partial
// 這個(gè)接口有這些的字段
interface IPerson {
name: string;
age: number;
sex: "男" | "女"; //只能夠是男或者女,
address: string,
xueli: string,
like: string[],
height: string,
weight:number,
// 可能這個(gè)接口還有很多字段
}
// 現(xiàn)在我要使用IPerson這個(gè)接口去聲明name, age, sex。
// 我們就可以使用工具類 Partial。Partial表示我只使用接口中的部分聲明
let zhang: Partial<IPerson> = {
name: '張三',
age: 10,
sex: '女'
}
Partial 是怎么做的
我們將光標(biāo)放在 Partial 上可以看見(jiàn)這樣的描述
type Partial<T> = { [P in keyof T]?: T[P] | undefined; }
什么意思呢? 我們知道<T>是一個(gè)接口。
[P in keyof T] 中的T其實(shí)就是 IPerson 這個(gè)接口
簡(jiǎn)單點(diǎn)就是翻譯成了下面這樣的樣子
{
name ?: string | undefined,
age ?: number | undefined
sex ?: "男" | "女" | undefined
這樣的形式下去
}
通過(guò) Partial 【怕 show兒】聲明后就不會(huì)報(bào)錯(cuò)。達(dá)到使用接口的部分聲明

場(chǎng)景描述
interface IInfoPerson {
name: string;
age: number;
address?: string,
like?: string[],
}
我們之前聲明了一個(gè)接口。其中有幾個(gè)字段是可選的(address,like )。
現(xiàn)在我們恰好需要使用這個(gè)接口,不過(guò)有幾個(gè)的可選字段要變?yōu)楸仨氉侄巍?
我們?cè)趺唇鉀Q這個(gè)問(wèn)題呢?
1.重新聲明一個(gè)接口??梢越鉀Q,但是這樣不好。
2.不用管它。我們心里在使用的時(shí)候知道這幾個(gè)可選的字段是必須字段
3.使用 Required 讀音[r? ?kwa? ? d ]
工具類 Required的簡(jiǎn)單使用
// 有兩個(gè)可選字段
interface IInfoPerson {
name: string;
age: number;
address?: string,
like?: string[],
}
// 通過(guò) Required 將可選字段變?yōu)楸仨氉侄?
let lisi: Required<IInfoPerson> = {
name: '李四',
age: 10,
address: '在羅翔老師的視頻中',
like:['吃飯','睡覺(jué)']
}
// 通過(guò) Required 將可選字段變?yōu)楸仨氉侄?【這個(gè)會(huì)報(bào)錯(cuò)】
let zhang: Required<IInfoPerson> = {
name: '張三',
age: 10,
}

Required是怎么做的?
光標(biāo)放在 Required 上會(huì)出現(xiàn)下面的提示內(nèi)容
type Required<T> = { [P in keyof T]-?: T[P]; }
這里的 -? 就是抵消掉問(wèn)號(hào) ?
這就變成了
{
name: string;
age: number;
address: string,
like: string[],
}
這樣就不可以缺省了到此這篇關(guān)于TypeScript工具類 Partial 和 Required 的詳細(xì)講解的文章就介紹到這了,更多相關(guān)TypeScript工具類內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript canvas實(shí)現(xiàn)流星特效
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)流星特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05
重寫(xiě)javascript中window.confirm的行為
javascript中window.confirm這個(gè)方法很好用,可以彈出一個(gè)確認(rèn)對(duì)話框.但有一個(gè)問(wèn)題是,它默認(rèn)的情況下,將選中那個(gè)"確定"按鈕,當(dāng)用戶有意無(wú)意的在鍵盤回車,就是說(shuō)按下Enter鍵的時(shí)候,就會(huì)自動(dòng)返回true。在很多時(shí)候其實(shí)我們不希望這樣2012-10-10
js檢測(cè)網(wǎng)絡(luò)是否具體連接功能的代碼
這篇文章主要介紹了js如何實(shí)現(xiàn)檢測(cè)網(wǎng)絡(luò)是否具體連接功能 ,需要的朋友可以參考下2014-05-05
js如何去除數(shù)組中的empty?undefined空項(xiàng)
這篇文章主要介紹了js如何去除數(shù)組中的empty?undefined空項(xiàng),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08
three.js實(shí)現(xiàn)炫酷的全景3D重力感應(yīng)
這篇文章主要為大家詳細(xì)介紹了three.js實(shí)現(xiàn)炫酷的全景3D重力感應(yīng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12
layer彈出層的關(guān)閉問(wèn)題詳解之在執(zhí)行完畢后關(guān)閉當(dāng)前彈出層
在前端頁(yè)面中用layer打開(kāi)窗口供用戶輸入或選擇是非常常見(jiàn)的用法,但是有時(shí)為了完成一次操作,需要彈出多個(gè)窗口進(jìn)行選擇、輸入或者提示,因此在關(guān)閉窗口的時(shí)候需要實(shí)現(xiàn)指定關(guān)閉任意窗口,需要的朋友可以參考下2023-10-10
微信公眾平臺(tái) 客服接口發(fā)消息的實(shí)現(xiàn)代碼(Java接口開(kāi)發(fā))
這篇文章主要介紹了微信公眾平臺(tái) 客服接口發(fā)消息的實(shí)現(xiàn)代碼(Java接口開(kāi)發(fā)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04

