Typescript hacks会增加性能负担吗？

Question

我一直在学习Typescript，并处理一些令人头疼的问题，这些问题是由于贡献者问题或边缘情况而导致的某些组件不适合Typescript模型。

例如，对于material-ui和react-router-dom

// Javascript
<Button
  type="submit"
  fullWidth
  variant="contained"
  color="primary"
  component={RouteLink}
  to="/order"
  >
  Order
 </Button>

会变成

// Typescript
<Button
  type="submit"
  fullWidth
  variant="contained"
  color="primary"
  {...{
    component: RouteLink,
    to: '/order'
  } as any}
  >
  Order
</Button>

在Typescript停止抛出错误之前。如果Typescript没有执行任何优化，我会认为扩展操作会增加不必要的负担。Typescript黑客是增加了性能负担，还是解析成了等价的Javascript？

我确信这不会是我学习的最后一次打字技巧，但我希望它很少。

Answer 1

TypeScripts的目的是为您提供更多的类型安全，这使得重构代码变得更容易，并帮助您在编译时而不是运行时捕获错误。它不会以任何方式影响您的应用程序的性能，因为它最终都被编译成纯JavaScript。

我在问你的问题是，你把" to“道具传递给了按钮，而它应该传递给RouteLink？如果是这样的话，我建议你试着这样做。

<Button
  type="submit"
  fullWidth
  variant="contained"
  color="primary"
  component={() => <RouteLink to="/order" />}
>
  Order
</Button>