TS中对象字面量的额外属性检查

问题

我们在接口中定义了两个变量类型，在函数使用中并非用上全部的变量，是一种可选属性，一种OPTION BAGS。但是这并不意味着我们可以多出其他的属性！！所以需要额外的属性检查。

如果已定义函数的参数名称与传入接口定义不一致会发生什么呢？看以下例子：

// 接口，?表示可选属性
interface SquareConfig {
    color?: string;
    width?: number;
}

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

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

注意到传入createSquare参数的color拼写不一致，这在Javascript中会报错。相对于接口而言，width变量会兼容，color属性不存在，额外的colour参数没有意义。

当对象字面量被赋值给变量或者作为参数时会经过额外属性检查。如果一个对象字面量存在任何目标类型(接口中定义的)不包含的属性时，你就会得到一个错误：

// error: 'colour' not expected in type 'SquareConfig'
let mySquare = createSquare({ colour: "red", width: 100 });

解决方案

1. 使用类型断言

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

最简单的方法~

2. 字符串索引签名

前提是确定这个对象可能具有某些作为特殊用途使用的额外属性。例如上面定义的接口，我们让它还可以带有任意数量的其他属性：

interface SquareConfig {
    color?: string;
    width?: number;
    [propName: string]: any;
}

只要其他属性不是color和width，那么就无所谓它们的类型是什么。
推荐这种方法！

3. 赋值
   将传入的对象赋给另外一个变量，则它不会经过额外属性检查。

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

在上述这些方法中，需要注意的是我们要尽可能避免绕开检查。如果遇到了额外属性检查出的错误，那么需要检查一下接口的类型声明，通过修改接口定义是一种好的方式。