javascript - typescript關於接口，對象字面量額外屬性檢測問題，為什麼使用斷言或變數時就不會檢測額外屬性？

Question

interface SquareConfig {
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig): { color: string; area: number } {
    // ...
}

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

ts編譯這段程式碼時會拋錯，但是使用以下兩種方式就不會拋錯，這是什麼原理？官網的解釋讓我無法理解，只會讓我覺得ts語法好隨便...

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

或

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

這樣都不會報錯，使用斷言的時候（as/<>）是會依照什麼規則比照介面嗎？然後將物件字面量複製給變量，我知道這是物件的一個引用指針，但是這樣為什麼就不會檢測額外的屬性了呢？官網位址

Answer 1

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

Answer 2

1. as 是強制型別轉換，強制把一個變數當作另一種型別使用，運行時出問題你自己負責。

2. 使用物件字面量賦值物件的偵測邏輯和使用變數賦值物件的機制不一樣。

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 };