[玩转 typescript 系列]interface的坑

假设有以下代码：

interface foo1 {
  bar1: number
  bar2?: number
}
interface foo2 {
  bar1: number
}
const fun = (param: foo1) => {}
const Foo1: foo1 = {bar1: 1, bar2: 2}
const Foo2: foo2 = {bar1: 2}

如果我调用fun(Foo2)是否会报错？

答案是不会。我一开始其实结构比这个复杂很多，但是本质上可以总结为这个小的例子来展示，因为我下意识以为传参的时候必须要传制定的类型才可以用。但是实际上，ts在做静态解析的时候只会检查传入的结构是否可以转成需要的结构，如果可以就不会报错。

实际上这会造成问题，以下就会造成错误。

interface foo1 {
  bar1: number
  bar2?: number
}
interface foo2 {
  bar1: number
  bar3: string
  bar4: number
}
const fun = (param: foo1) => {}
const Foo1: foo1 = {bar1: 1, bar2: 2}
const Foo2: foo2 = {bar1: 2, bar3: 'bar3', bar4: 4}

若调用fun(Foo2)，编译器是不会报错的，运行时也不会报错，但是我传的参数{bar1: 2, bar3: 'bar3', bar4: 4}多了很多东西，在传给别的函数或http请求时，若错误处理到了不合法的参数，就不小心写了个bug。到时候分锅的时候应该怪谁呢哈哈

这也是动态类型语言无法避免的问题，哪怕typescript也很难避免这个问题，毕竟要兼顾js的语法。所以只能在平时写代码的时候多留个心眼了。