javascript - Typescript hat ein Problem mit der Erkennung zusätzlicher Eigenschaften von Schnittstellen und Objektliteralen. Warum werden zusätzliche Eigenschaften bei der Verwendung von Assertionen oder Variablen nicht erkannt?

Question

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

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

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

ts Beim Kompilieren dieses Codes wird ein Fehler ausgegeben, bei Verwendung der folgenden beiden Methoden wird dieser jedoch nicht ausgelöst. Die Erklärung auf der offiziellen Website übersteigt mein Verständnis. Ich habe nur das Gefühl, dass die Syntax so beiläufig ist ...

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

oder

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

Auf diese Weise wird kein Fehler gemeldet, wenn Assertionen (as/<>) verwendet werden. Nach welchen Regeln wird die Schnittstelle verglichen? Kopieren Sie dann das Objektliteral in die Variable. Ich weiß, dass dies ein Referenzzeiger auf das Objekt ist, aber warum werden die zusätzlichen Eigenschaften nicht erkannt? Offizielle Website-Adresse

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