欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

TypeScript工具類 Partial 和 Required 的場景分析

 更新時間:2022年09月28日 10:04:11   作者:南風(fēng)晚來晚相識  
這篇文章主要介紹了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 是怎么做的

我們將光標(biāo)放在 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.重新聲明一個接口。可以解決,但是這樣不好。
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是怎么做的?

光標(biāo)放在 Required 上會出現(xiàn)下面的提示內(nèi)容
type Required<T> = { [P in keyof T]-?: T[P]; }
這里的 -? 就是抵消掉問號 ?
這就變成了 
{
    name: string;
    age: number;
    address: string,
    like: string[],
}
這樣就不可以缺省了

到此這篇關(guān)于TypeScript工具類 Partial 和 Required 的詳細講解的文章就介紹到這了,更多相關(guān)TypeScript工具類內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • javascript之函數(shù)進階詳解

    javascript之函數(shù)進階詳解

    這篇文章主要為大家介紹了javascript函數(shù)進階,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助<BR>
    2021-12-12
  • JavaScript canvas實現(xiàn)流星特效

    JavaScript canvas實現(xiàn)流星特效

    這篇文章主要為大家詳細介紹了JavaScript canvas實現(xiàn)流星特效,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-05-05
  • 重寫javascript中window.confirm的行為

    重寫javascript中window.confirm的行為

    javascript中window.confirm這個方法很好用,可以彈出一個確認(rèn)對話框.但有一個問題是,它默認(rèn)的情況下,將選中那個"確定"按鈕,當(dāng)用戶有意無意的在鍵盤回車,就是說按下Enter鍵的時候,就會自動返回true。在很多時候其實我們不希望這樣
    2012-10-10
  • js檢測網(wǎng)絡(luò)是否具體連接功能的代碼

    js檢測網(wǎng)絡(luò)是否具體連接功能的代碼

    這篇文章主要介紹了js如何實現(xiàn)檢測網(wǎng)絡(luò)是否具體連接功能 ,需要的朋友可以參考下
    2014-05-05
  • js如何去除數(shù)組中的empty?undefined空項

    js如何去除數(shù)組中的empty?undefined空項

    這篇文章主要介紹了js如何去除數(shù)組中的empty?undefined空項,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • Web跨瀏覽器進程通信(Web跨域)

    Web跨瀏覽器進程通信(Web跨域)

    Web跨域已是老生常談的話題,這次來嘗試下跨域瀏覽器進程之間的通信 —— 這在過去基本依靠網(wǎng)絡(luò)中轉(zhuǎn)實現(xiàn)
    2013-04-04
  • three.js實現(xiàn)炫酷的全景3D重力感應(yīng)

    three.js實現(xiàn)炫酷的全景3D重力感應(yīng)

    這篇文章主要為大家詳細介紹了three.js實現(xiàn)炫酷的全景3D重力感應(yīng),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-12-12
  • layer彈出層的關(guān)閉問題詳解之在執(zhí)行完畢后關(guān)閉當(dāng)前彈出層

    layer彈出層的關(guān)閉問題詳解之在執(zhí)行完畢后關(guān)閉當(dāng)前彈出層

    在前端頁面中用layer打開窗口供用戶輸入或選擇是非常常見的用法,但是有時為了完成一次操作,需要彈出多個窗口進行選擇、輸入或者提示,因此在關(guān)閉窗口的時候需要實現(xiàn)指定關(guān)閉任意窗口,需要的朋友可以參考下
    2023-10-10
  • webpack獨立打包和緩存處理詳解

    webpack獨立打包和緩存處理詳解

    這篇文章主要介紹了webpack獨立打包和緩存處理的相關(guān)資料,文中介紹的非常詳細,對大家學(xué)習(xí)webpack具有一定的參考價值,需要的朋友們下面來一起看看吧。
    2017-04-04
  • 微信公眾平臺 客服接口發(fā)消息的實現(xiàn)代碼(Java接口開發(fā))

    微信公眾平臺 客服接口發(fā)消息的實現(xiàn)代碼(Java接口開發(fā))

    這篇文章主要介紹了微信公眾平臺 客服接口發(fā)消息的實現(xiàn)代碼(Java接口開發(fā)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-04-04

最新評論