javascript - typescript关于接口，对象字面量额外属性检测问题，为什么使用断言或者变量时就不会检测额外属性？

Question

{代码...} ts编译这段代码时会抛错，但是使用如下两种方式就不会抛错，这是什么原理？官网的解释让我无法理解，只会让我觉得ts语法好随便... {代码...} 或者 {代码...} 这样都不会报错，使用断言的时候（as/&lt;&...

为情所困 · Answer

第一个例子:as 不是断言吧 as 是强制转化就说明你知道你要做的事情当然 ts 也就让你编译过了
第二个例子好像本来就应该过的吧 color 你又不是一定要; colour 是另外一个属性了
以前不过的原因是 ts 对对象字面量有独特的 check 罢了

PHP中文网 · Answer

as 是强制类型转换，强制把一个变量当作另一种类型使用，运行时出问题你自己负责。
使用对象字面量赋值对象的检测逻辑和使用变量赋值对象的机制不一样。

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 =  { colour: "red", width: 100 };