随着JavaScript项目变得越来越复杂，开发人员开发了新的工具和语言来提高代码质量和工作流程。除了单元测试，TypeScript和Flow等静态类型检查器正在成为专业开发团队的标准。让代码更易于理解和在开发阶段捕获错误的好处已被证明是非常有用的，无论项目的规模如何。在没有类型检查工具的情况下处理大型JavaScript代码库会让你很头疼，尤其是当有很多错误只能在运行时发现时，但是当你使用类型检查，或者使用TypeScript时，你会发现这些类型的错误很大减少了，不仅提高了开发效率，最重要的是代码质量有了很大的提升。在本文中，我将介绍这两个工具并解释它们的工作原理。并演示了如何将TypeScript和Flow集成到React应用程序中。TypeScriptTypeScript是微软开发的一种编程语言。它是开源的，并得到一个庞大而活跃的社区的支持。TypeScript是JavaScript的类型化超集，可编译为纯JavaScript。“类型化”一词意味着TypeScript要求程序员声明给定变量的数据类型。术语“超集”意味着TypeScript允许程序员使用JavaScript提供的所有功能，以及一些额外的功能，如接口、泛型、装饰器等。下图显示了TypeScript的运作方式的高级概述。编译器获取TypeScript文件（.ts或.tsx）并将它们“转换”为可由浏览器运行的有效JavaScript代码。让我们看一些用TypeScript编写的简单代码：functiongetName(person:IPerson):void{console.log(person);}interfaceIPerson{name:stringage:number}getName({"name":"john",age:20});getName({age:23})//Argumentoftype'{age:number;}'isnotassignabletoparameteroftype'IPerson'.正如我们在上面的代码块中看到的那样，我们声明了一个函数，该函数接收一个具有两个属性的对象，名称和年龄分别为字符串和数字类型。调用此函数时，TypeScript会检查提供的对象的类型是否正确，如果不正确，代码将无法编译并像调用第二个函数时那样抛出错误。与TypeScript相比，Flow不是一种编程语言。它被称为JavaScript的静态类型检查器，类似于我们经常使用的ESLint，由Facebook开发。我们可以通过向常规JavaScript文件添加特殊注释来使用Flow，表明我们期望的类型，或者我们可以让工具推断期望的类型并在发现任何错误时警告我们。下面我们来看一下Flow官方文档中的例子：//@flowfunctionsquare(n){returnn*n;//Error!}square("2");注意到上面代码的第一行了吗？为了让工具知道它必须检查哪些文件，我们在每个文件中添加注释@flow以包含在Flow监控过程中。使用Flow，您不必更改文件的扩展名，而是继续在带注释的.js和.jsx文件中编写纯JavaScript。如果我们保留上面的代码，JavaScript引擎会因为注释而抛出错误，因此，作为一个额外的步骤，我们必须在最终编译代码之前删除所有注释。当然我们可以使用Babel或flow-remove-types等工具来移除它们。Flow与TypeScript和React的集成一个标准的React应用程序创建React应用程序的最简单方法是使用create-react-app工具。我们将创建两个相同的React应用程序，一个用于测试TypeScript，另一个用于测试Flow。首先，让我们通过创建一个没有任何类型检查的React应用程序来查看此工具的实现：npxcreate-react-appdemo-appReact启用TypeScript如果我们从头开始，我们可以使用--template标志来创建启用TypeScript的React应用程序：npxcreate-react-appreact-ts--templatetypescript这是新项目的最佳方式，如果我们想在现有项目中启用React，我们需要执行以下操作。yarnaddtypescript@types/node@types/react@types/react-dom@types/jest接下来，我们将现有的.js和.jsx文件重命名为.ts和.tsx。重启我们的开发服务器后，你会发现项目目录下多了一个tsconfig.json文件。这个文件是一个typescript配置文件，你可以为它配置一些preferences。然后我们创建一个React组件：name);returnlistItems;}exportdefaultItemList;TypeScript允许我们使用接口声明我们期望的对象类型。这里我们声明了Props接口，它有一个属性item，一个Item类型的对象数组——另一个接口有两个属性，一个number类型的id和一个string类型的name，这两个属性都是必需的。然后，我们添加注解props:Props表示我们的函数组件ItemsList的props参数是一个Props类型的对象。让我们在App.tsx文件中实现ItemsList组件，并声明一个名为items的常量，就像一个包含虚拟对象的数组，看看TypeScript是如何反应的：您可以看到显示错误，表明Item必须包含id和name属性。如果我们此时尝试运行应用程序，TypeScript可以避免出现错误。现在让我们删除itemsconst的类型，看看这个错误是否消失：即使我们没有声明itemsconst应该是Item[]类型，TypeScript也足够聪明，可以确定在我们的ItemsList中使用它是不安全的成分。现在让我们通过向组件添加两条适当的记录来解决此问题：constitems:Item[]=[{id:1,name:"One"},{id:2,name:"Two"}];我们现在看到应用程序成功编译和执行：通过引入TypeScript，我们避免运行可能有错误的代码，同时还通过显式声明整个应用程序使用的类型使代码本身更具可读性。React启用Flowyarnaddflow-binnpmrunflowinit并且我们创建与之前相同的ItemsList组件。importReactfrom'react';functionItemsList(props){constlistItems=props.items.map(item=>item.name);return(listItems);}exportdefaultItemsList;//@flowimportReactfrom'react';typeItem={id:number,name:string}typeProps={items:Item[]}functionItemsList(props:Props){constlistItems=props.items.map(item=>item.name);return(listItems);}exportdefaultItemsList;运行yarnflow会报错，接下来我们添加一些类型。//@f??lowimportReactfrom'react';typeItem={id:number,name:string}typeProps={items:Item[]}functionItemsList(props:Props){constlistItems=props.items.map(item=>item.name);return(listItems);}exportdefaultItemsList;重新运行纱线流，不提示任何错误。每次我们想用Flow检查文件时，我们都必须运行相同的命令。对于使用VSCode的用户，FlowLanguageSupport可用于在每次保存后自动执行Flow检查。其他IDE将具有相同的功能，只需搜索以找到适合您的环境的相关实现。TypeScriptvsFlow的优缺点TypeScript优点：不仅仅是类型检查器：TypeScript向JavaScript添加了额外的数据结构，例如Enums，这是其他语言的开发人员可能缺乏的。它还具有接口、装饰器和其他使其更加健壮的特性——使开发人员能够编写极其全面的代码。这些功能在大型和企业型项目中尤为强大。由Microsoft开发：TypeScript正在接收定期更新并将继续发展。可以肯定地说，在快速发展的JavaScript生态系统中，TypeScript将比大多数其他“趋势”更长久。大型社区：TypeScript拥有庞大而活跃的社区，人们愿意为其开发做出贡献并通过回答他们的问题或编写有用的教程来帮助他人。除了官方文档之外，您还可以找到大量关于TypeScript主题的非官方资源。TypeScript缺点：陡峭的学习曲线：TypeScript一开始可能会很僵化和无情，让开发人员望而却步。它比Flow更难也更复杂，因为它更健壮并且被认为是一种编程语言（或者至少是JavaScript的“超集”）。TypeScript也感觉像是一种全有或全无的方法，它会使事情复杂化并减慢具有大量依赖项的大型项目的开发速度。大量代码重复：有人认为TypeScript沉淀了大量样板代码，这增加了开发时间并使文件更难理解。在这种情况下，代码极简主义者可能更喜欢轻量级Flow（或者根本不进行类型检查）。Flow优点：易于使用：Flow比TypeScript更宽容，并且可以更温和地介绍JavaScript中的静态类型。它的启动和运行速度更快，而且由于其按文件选择加入的方法，将Flow添加到现有项目中也可能更容易。由Facebook开发：开发React的公司，因此您可以确定这两个工具完全兼容并协同工作。Flow缺点??：社区较小：Flow的社区较小，不太活跃，这意味着那些试图学习如何使用它和调试可能出现的问题的人可以使用的资源较少。这也可能意味着它在支持和附加功能方面的未来比TypeScript更不确定。不那么健壮：Flow可以很好地进行类型检查，但仅此而已。考虑到开发人员可以在此类项目中使用其更高级的功能，TypeScript可能更适合具有更长支持期限的更多企业项目。对于更精简的项目，Flow可能是更好的选择，或者作为一种将类型检查引入现有项目而不会太痛苦的方式。由您决定哪种工具最适合您的项目和环境。结论TypeScript和Flow之间存在明显差异。在功能方面，TypeScript更健壮，而Flow只是一个类型检查器。虽然Flow是Facebook创建的，但对同一家公司开发的React框架并没有特别偏爱。毕竟它的初衷并不是作为React的附属工具，而是作为一个通用的项目管理工具。对于喜欢轻量级又喜欢快速上手的人来说，Flow是一个不错的选择，可以非常快速的上手和使用。而如果你正在开发一个大型项目，那么TypeScript应该是你最好的选择。其庞大的社区使其发展速度极快。主流的框架源码都是用typescript开发的，足以说明问题。
