Typescript tipe freshness 更嚴(yán)格對(duì)象字面量檢查
引言
Typescript 是結(jié)構(gòu)化的類型系統(tǒng),那么對(duì)于對(duì)象來(lái)說(shuō),如果 A 具有 B 的所有屬性,并且屬性對(duì)應(yīng)的類型相匹配,那么 A 就能賦值給 B
type A = { name:string; age:number; } type B = { name:string } declare let a:A declare let b: B b = a
但是其中有一個(gè)例外的情況,會(huì)強(qiáng)制 a、b 具有完全相同的結(jié)構(gòu),被稱為 freshness,也被稱為更嚴(yán)格的對(duì)象字面量檢查
let b: { name:string } b ={name:'1',age:1} /* Type '{ name: string; age: number; }' is not assignable to type '{ name: string; }'. Object literal may only specify known properties, and 'age' does not exist in type '{ name: string; }' */ function freshness({name}:{name:string}){ return 1 } freshness({name:'du',age:1}); /* Argument of type '{ name: string; age: number; }' is not assignable to parameter of type '{ name: string; }'. Object literal may only specify known properties, and 'age' does not exist in type '{ name: string; }' */
嚴(yán)格檢查存在缺點(diǎn)
之所以有這樣的嚴(yán)格檢查是因?yàn)榇嬖谝韵聝蓚€(gè)缺點(diǎn):
1.結(jié)構(gòu)化類型系統(tǒng)非常方便,但是它可能讓你誤以為某些函數(shù)接收的比他實(shí)際需要的多
function logName(something: { name: string }) { console.log(something.name); } logName({ name: 'matt', job: 'being awesome' })
2.在實(shí)現(xiàn)此功能之前 Typescript 并不能很好的檢測(cè)出對(duì)象中的錯(cuò)誤,特別是指定可選類型時(shí)
interface TextOptions { alignment?: string; color?: string; padding?: number; } function drawText(opts: TextOptions) { ... } // None of these were errors before drawText({ align: 'center' }); // Oops drawText({ colour: 'grey' }); // Oops drawText({ pading: 32}); // Oops
如上例子可能只是拼錯(cuò)了而已,但是在此之前 Typescript 并不能檢測(cè)出來(lái)
具體規(guī)則而言
- 每個(gè)對(duì)象字面量都被認(rèn)為是新鮮的
- 當(dāng)一個(gè)新的字面量對(duì)象被分配給一個(gè)變量或者傳遞給一個(gè)非空的目標(biāo)類型參數(shù)時(shí),如果對(duì)象指定了目標(biāo)類型中不存在的屬性,那就是一個(gè)錯(cuò)誤
- 在一個(gè)類型斷言中,或者當(dāng)一個(gè)對(duì)象字面的類型被擴(kuò)大時(shí),新鮮感就會(huì)消失
var x: { foo: number }; x = { foo: 1, baz: 2 }; // Error, excess property `baz` var y: { foo: number, bar?: number }; y = { foo: 1, baz: 2 }; // Error, excess or misspelled property `baz`
當(dāng)新鮮類型被捕獲到變量中時(shí),不會(huì)發(fā)生錯(cuò)誤
var x: { foo: number }; x1 = { foo: 1, baz: 2 }; x = x1; var y: { foo: number, bar?: number }; y1 = { foo: 1, baz: 2 }; y = y1;
參考: jkchao.github.io/typescript-…
以上就是Typescript tipe freshness 更嚴(yán)格對(duì)象字面量檢查的詳細(xì)內(nèi)容,更多關(guān)于Typescript tipe freshness對(duì)象字面量檢查的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
javascript實(shí)現(xiàn)點(diǎn)擊按鈕切換輪播圖功能
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)點(diǎn)擊按鈕切換輪播圖功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09uniapp自定義應(yīng)用退出執(zhí)行內(nèi)容實(shí)例代碼
近幾日使用uni-app開發(fā)移動(dòng)應(yīng)用APP遇到了個(gè)不常見的需求,下面這篇文章主要給大家介紹了關(guān)于uniapp自定義應(yīng)用退出執(zhí)行內(nèi)容的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)對(duì)象拖放功能的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)對(duì)象拖放功能的方法,涉及javascript針對(duì)瀏覽器的判斷、事件愛你的添加與移除等相關(guān)操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04利用JavaScript實(shí)現(xiàn)新聞滾動(dòng)效果(實(shí)例代碼)
這篇文章主要是對(duì)利用JavaScript實(shí)現(xiàn)新聞滾動(dòng)效果的兩種方法進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11使用純javascript實(shí)現(xiàn)放大鏡效果
本文給大家分享的是使用純javascript實(shí)現(xiàn)放大鏡效果的代碼,并附上封裝的步驟,做電商程序的小伙伴們一定不要錯(cuò)過(guò)。2015-03-03js監(jiān)聽鍵盤事件的方法_原生和jquery的區(qū)別詳解
下面小編就為大家?guī)?lái)一篇js監(jiān)聽鍵盤事件的方法_原生和jquery的區(qū)別詳解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10js實(shí)現(xiàn)3D粒子酷炫動(dòng)態(tài)旋轉(zhuǎn)特效
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)3D粒子酷炫動(dòng)態(tài)旋轉(zhuǎn)特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09JavaScript實(shí)現(xiàn)鼠標(biāo)懸浮頁(yè)面切換效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)懸浮頁(yè)面切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03