javascript - Typescript a un problème avec la détection des propriétés supplémentaires des interfaces et des littéraux d'objet. Pourquoi les propriétés supplémentaires ne sont-elles pas détectées lors de l'utilisation d'assertions ou de variables ?

Question

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

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

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

ts Une erreur sera générée lors de la compilation de ce code, mais elle ne sera pas générée en utilisant les deux méthodes suivantes. Quel est le principe ? L'explication sur le site officiel dépasse ma compréhension. Cela me donne seulement l'impression que sa syntaxe est si décontractée...

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

ou

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

Aucune erreur ne sera signalée de cette manière. Lors de l'utilisation d'assertions (as/<>), l'interface sera-t-elle comparée selon quelles règles ? Copiez ensuite le littéral de l'objet dans la variable. Je sais qu'il s'agit d'un pointeur de référence vers l'objet, mais pourquoi les propriétés supplémentaires ne sont-elles pas détectées ? Adresse du site officiel

Answer 1

Le premier exemple :as 不是断言吧 as 是强制转化 就说明你知道你要做的事情 当然 ts 也就让你编译过了
第二个例子 好像本来就应该过的吧 color 你又不是一定要; colour est un autre attribut
La raison pour laquelle il n'a pas été utilisé auparavant est que ts a une vérification unique pour les littéraux d'objet

Answer 2

1. comme c'est la conversion de type forcée, qui force une variable à être utilisée comme un autre type. Vous êtes responsable de tout problème pendant l'exécution.

2. La logique de détection de l'utilisation de littéraux d'objet pour attribuer des objets est différente du mécanisme d'utilisation de variables pour attribuer des objets.

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