javascript - Typescript mempunyai masalah dengan mengesan sifat tambahan antara muka dan literal objek Mengapakah sifat tambahan tidak dikesan apabila menggunakan penegasan atau pembolehubah?

Question

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

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

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

ts Ralat akan dilemparkan semasa menyusun kod ini, tetapi ia tidak akan dilemparkan dengan menggunakan dua kaedah berikut. Apakah prinsipnya? Penjelasan di laman web rasmi adalah di luar pemahaman saya. Ia hanya membuatkan saya rasa sintaks ts begitu santai...

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

atau

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

Tiada ralat akan dilaporkan dengan cara ini Apabila menggunakan penegasan (sebagai/<>), adakah antara muka akan dibandingkan mengikut peraturan apa? Kemudian salin objek literal kepada pembolehubah Saya tahu ini adalah penunjuk rujukan kepada objek, tetapi mengapa sifat tambahan tidak dapat dikesan? Alamat laman web rasmi

Answer 1

Contoh pertama:as 不是断言吧 as 是强制转化 就说明你知道你要做的事情 当然 ts 也就让你编译过了
第二个例子 好像本来就应该过的吧 color 你又不是一定要; colour ialah atribut lain
Sebab mengapa ia tidak digunakan sebelum ini ialah ts mempunyai semakan unik untuk literal objek

Answer 2

1. seperti penukaran jenis paksa, yang memaksa pembolehubah digunakan sebagai jenis lain Anda bertanggungjawab untuk sebarang masalah semasa masa jalan.

2. Logik pengesanan menggunakan literal objek untuk menetapkan objek adalah berbeza daripada mekanisme menggunakan pembolehubah untuk menetapkan objek.

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