React App中是否可以混合使用类型检查(PropTypes和TypeScript)?

时间:2020-02-05 20:35:58

标签: reactjs typescript react-proptypes

我和我的团队将着手开发新的前端应用程序。 我自己,我来自Angular。我在ReactJS网站上阅读到,如果我们的代码库足够丰富,建议使用TypeScript或Flow。

我的问题是,是否有可能和/或明智地创建一个使用PropTypes作为其 Components 并另外利用TypeScript进行状态管理的应用, Redux

3 个答案:

答案 0 :(得分:1)

您绝对可以这样做,因为它们都有不同的用途。

PropTypes用于运行时类型检查,将帮助您在应用程序运行后捕捉问题。

如果要进行静态类型检查,这可以帮助您在编码阶段识别问题,则需要Flow或TypeScript。

流程很简单,无需学习新语言即可使用,但是Typescript为项目带来了更多好处。

答案 1 :(得分:1)

我想说,将两者混合使用是不明智的,例如,让您的静态类型检查由两者完成。因此,如果您在TypeScript中进行状态管理,那么在TSX中不使用组件是没有好处的。

使用TypeScript不会阻止您使用PropTypes,但是会使它变得多余。 PropTypes允许您仍然进行一些运行时检查或验证,因此即使您为TypeScript选择了它仍然可以完成。

答案 2 :(得分:0)

这将是很自以为是的,但是大多数不是我自己的观点。

PropTypes和打字稿

两者是不同的。

打字稿

  • 完全成熟的类型检查解决方案。
  • 静态。
  • 主要的痛点是,可能会有太多的遗漏/错误定义,不管您是否想要它,您都会花很多时间弄清楚为什么事情不起作用。在最近一年左右的时间里,它的性能有了很大提高,但是它从来都不是没有问题的。有关更多信息,请参见MUI guide for typescript
  • 此外,Typescript可能导致代码更加冗长或复杂。例如,参见。 Redux Tool Kit Typescript guide

PropTypes

PropTypes比Typescript轻得多。而且,尽管您可以进行各种复杂的验证-大多数实际用法包括组件属性和可能的​​关键结构。

PropTypes可以在运行时运行,但通常被禁用。在运行时进行类型检查的好处令人怀疑:

  • 您可以在运行时捕获什么,而在编译时不会捕获?
  • 如果有错误怎么办?

一般智慧向量指向此:

两者都没有意义。

打字稿vs流

尽管我的C ++背景使对JavaScript进行类型检查的介绍很幸运,但我还是TypeScript的坚决反对者(使用了多年)和Flow的大力支持者。这是基于许多因素。

流量几乎消失了

但是,当Babel Typescript Preset变得适合目的时,一切都在一天之内发生了变化。

这仅允许有一个混合JS / TS项目,这意味着您可以:

  • 启动JS,然后慢慢迁移到TS。
  • 如果遇到Typescript问题,请启动TS并回退到JS。

当然,您以前可能已经做过(并且仍然需要Typescript进行类型检查),但是使用Babel-Typescript很难想到您为什么不这样做。

这也以多种方式改变了使用Flow的理由,并且在Flow团队承认的各种问题中都占据了上风,Babel-Typescript在许多人看来都是非常明显的第一选择。

在这样的混合项目中,我们将Typescript用于TSX,将PropTypes用于JSX。

结论

所以我的建议是使用Babel-Typescript进行编译,而使用Typescript进行类型检查。

例如,如果您要使用NextJs,那么所有这些都已经存在。您几乎无所事事。

然后编写一个JS / TS混合体。如果您追求速度,请使用JS。如果您是类型安全的人员-TS。

我最后要提到的是TypeScript推理引擎最近有了很大的改进。实际上,我们有很多ts / tsx文件没有明确的输入,但是当您缺少声明的prop时,Typescript会抱怨。

因此,除非Typescript给您带来麻烦,否则默认情况下,您始终可以从ts / tsx开始,不键入任何内容(推断会捕获问题),然后逐步键入您的代码库。如果存在Typescript麻烦-更改为js,稍后再解决。

相关问题