[玩转 typescript 系列]interface的坑

原创已于 2022-06-08 10:15:52 修改 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #js #javascript

于 2022-03-22 15:03:12 首次发布

这篇博客探讨了 TypeScript 中接口与类型兼容性的概念。通过示例代码说明，即使参数包含额外属性，只要满足接口的基本结构，编译器不会报错。然而，这可能导致运行时的问题，因为多余的属性可能会在后续处理中引发错误。作者提醒开发者在使用 TypeScript 时要留意这种潜在的类型安全风险，并指出这是动态类型语言普遍存在的挑战。

假设有以下代码：

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的语法。所以只能在平时写代码的时候多留个心眼了。