TypeScript绕过编译器检查的一点困惑

Question

在学习TypeScript过程中，遇到一点问题，先看下面的代码

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

function createSquare(config: SquareConfig): {color: string; area: number} {
  let newSquare = {color: "white", area: 100};
  if (config.color) {
    newSquare.color = config.color;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

createSquare({height: 200, width: 100 });    // 报错

/**
 之前提问写的，这里实际是错误的
 let param = { height: 200 }

 createSquare(param);    // 正确
*/


//2月21日 更正
let param = { height: 200, width: 100 };

createSquare(param);    // 正确

接口规定参数只能传color, width；而我传入了height，所以出错了。但是在TypeScript中文网额外的类型检查一节中，给出了代码中规避编译器报错的解决方法。

我的困惑是，为什么这种方法能规避编译器类型检查?

Answer 1

// 此时传入参数的类型 SquareConfig，报错的原因是{height: 200}不是一个合法的 SquareConfig
createSquare({height: 200})
// 类似于这样，下面这句也会报错
let param:SquareConfig = {height:200}

// param 的类型是 typeof param 而不是 SquareConfig
// 而 typeof param 和 SquareConfig 是兼容的，作为函数的参数传入时实际是做了一次赋值操作
// let config:SquareConfig = param
// 所以 createSquare 这个方法可以接受一个类型为 typeof param 的变量作为参数
let param = {height: 200, color: 'xxx'}
createSquare(param)

Answer 2

我这边最后一行也是错误的

楼主没有好好看文档,文档说的绕过检测的方式代码是这样的,由于有[propName: string]: any,它是可以允许传入有任意字段名的对象

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

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