TypeScript工具類 Partial 和 Required 的場景分析
更新時間:2022年09月28日 10:04:11 作者:南風晚來晚相識
這篇文章主要介紹了TypeScript工具類 Partial 和 Required 的詳細講解,本文通過場景描述給大家詳細講解工具類的使用,結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
場景描述:
場景描述:一個接口(IPerson)有很多個的字段,可能有幾百。而且這些字段都是必須的。
我們需要使用這個接口,但是我又不可能使用它的全部??赡苤粫褂脦讉€。
我還必須要使用這接口。這個時候,我們怎么解決這個問題呢?
TS給了我們一個工具類Partial,可以解決這隔辦法
Partial [ pɑ r?l ] [部分的]
使用的方式就是 let obj:Partial<接口名>={ }
工具類的使用 Partial
// 這個接口有這些的字段
interface IPerson {
name: string;
age: number;
sex: "男" | "女"; //只能夠是男或者女,
address: string,
xueli: string,
like: string[],
height: string,
weight:number,
// 可能這個接口還有很多字段
}
// 現(xiàn)在我要使用IPerson這個接口去聲明name, age, sex。
// 我們就可以使用工具類 Partial。Partial表示我只使用接口中的部分聲明
let zhang: Partial<IPerson> = {
name: '張三',
age: 10,
sex: '女'
}
Partial 是怎么做的
我們將光標放在 Partial 上可以看見這樣的描述
type Partial<T> = { [P in keyof T]?: T[P] | undefined; }
什么意思呢? 我們知道<T>是一個接口。
[P in keyof T] 中的T其實就是 IPerson 這個接口
簡單點就是翻譯成了下面這樣的樣子
{
name ?: string | undefined,
age ?: number | undefined
sex ?: "男" | "女" | undefined
這樣的形式下去
}
通過 Partial 【怕 show兒】聲明后就不會報錯。達到使用接口的部分聲明

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

Required是怎么做的?
光標放在 Required 上會出現(xiàn)下面的提示內(nèi)容
type Required<T> = { [P in keyof T]-?: T[P]; }
這里的 -? 就是抵消掉問號 ?
這就變成了
{
name: string;
age: number;
address: string,
like: string[],
}
這樣就不可以缺省了到此這篇關于TypeScript工具類 Partial 和 Required 的詳細講解的文章就介紹到這了,更多相關TypeScript工具類內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
利用遞增的數(shù)字返回循環(huán)漸變的顏色的js代碼
其實很久前就想寫一個這樣的函數(shù)了。因為很多時候需要利用遞增數(shù)字返回一個漸變顏色序列,今天終于完成了。2008-10-10
JavaScript中的惰性載入函數(shù)及優(yōu)勢
這篇文章主要介紹了JavaScript中的惰性載入函數(shù)及優(yōu)勢,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
JS面試題之如何判斷兩個數(shù)組的內(nèi)容是否相等
這篇文章主要為大家詳細介紹了JavaScript面試的??碱},即如何判斷兩個數(shù)組的內(nèi)容是否相等,文中的示例方法講解詳細,需要的小伙伴可以參考一下2023-10-10

