問題描述

interface SquareConfig { color?: string; width?: number;}function createSquare(config: SquareConfig): { color: string; area: number } { // ...}let mySquare = createSquare({ colour: 'red', width: 100 });

ts編譯這段代碼時(shí)會(huì)拋錯(cuò)，但是使用如下兩種方式就不會(huì)拋錯(cuò)，這是什么原理？官網(wǎng)的解釋讓我無法理解，只會(huì)讓我覺得ts語法好隨便...

let mySquare = createSquare({ width: 100, opacity: 0.5 } as SquareConfig);

或者

let squareOptions = { colour: 'red', width: 100 };let mySquare = createSquare(squareOptions);

這樣都不會(huì)報(bào)錯(cuò)，使用斷言的時(shí)候（as/<>）是會(huì)按照什么規(guī)則比照接口嗎？然后將對(duì)象字面量復(fù)制給變量，我知道這是對(duì)象的一個(gè)引用指針，但是這樣為什么就不會(huì)檢測(cè)額外的屬性了呢？官網(wǎng)地址

問題解答

第一個(gè)例子:as 不是斷言吧 as 是強(qiáng)制轉(zhuǎn)化 就說明你知道你要做的事情 當(dāng)然 ts 也就讓你編譯過了第二個(gè)例子 好像本來就應(yīng)該過的吧 color 你又不是一定要; colour 是另外一個(gè)屬性了以前不過的原因是 ts 對(duì) 對(duì)象字面量有獨(dú)特的 check 罷了

as 是強(qiáng)制類型轉(zhuǎn)換，強(qiáng)制把一個(gè)變量當(dāng)作另一種類型使用，運(yùn)行時(shí)出問題你自己負(fù)責(zé)。

使用對(duì)象字面量賦值對(duì)象的檢測(cè)邏輯和使用變量賦值對(duì)象的機(jī)制不一樣。

interface SquareConfig { color?: string; width?: number;}function test(config: SquareConfig): void {}let a = { colour: 'red', width: 100 };// 不報(bào)錯(cuò), typeof a 與 SquareConfig 類型兼容let b: SquareConfig = a; // 報(bào)錯(cuò)，聲明 c 是 SquareConfig 類型但是給了不存在的屬性let c: SquareConfig = { colour: 'red', width: 100 }; // 報(bào)錯(cuò)，原因和上面類似test({ colour: 'red', width: 100 })// 不報(bào)錯(cuò)，強(qiáng)制把這個(gè)對(duì)象字面量當(dāng) SquareConfig 類型使用，出問題你自己背鍋let d: SquareConfig = <SquareConfig> { colour: 'red', width: 100 };