問題描述

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

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

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

或者

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

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

問題解答

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

as 是強制類型轉(zhuǎn)換，強制把一個變量當作另一種類型使用，運行時出問題你自己負責。

使用對象字面量賦值對象的檢測邏輯和使用變量賦值對象的機制不一樣。

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