在网络开发中，关于你想使用的编程语言、库和/或框架有很多选择。当然，选择一种而不是另一种，会有其积极和消极的方面。
我对ReactJS相当熟悉，这是我目前工作的前端开发的框架。为了给你一点背景，我们正在开发一个翻书工具，全世界有数百万人使用。我们的压力很大，要提供最好的无错误的代码。
最近，我们开始在我们的应用程序中进行一些非常棒的升级，并决定尝试不同的东西。经过一些研究，我们发现TypeScript与React的结合就是缺少的那块拼图。
"TypeScript是一种开源语言，它建立在世界上最常用的工具之一JavaScript的基础上，增加了静态类型定义"，正如官方网站上所提到的。
类型是什么意思？让我给你看一个简短的例子。
const myConstant: string = “Hello world!”
这将myConstant 的类型设置为字符串。如果我们想把它作为一个需要字符串的值来使用，这就非常有用。TypeScript首先会检查我们需要的类型，然后会检查我们常量的类型。如果它不是它所需要的字符串，那么它将向我们抛出一个错误。
有多种类型可以使用，其中最常见的是字符串、数字和布尔型。但我们也应该提到，数组、函数或对象也属于其他可声明的类型。你甚至可以根据你的需要，去声明自定义的类型。
类型对于开发者来说是一个巨大的帮助，因为它使代码更容易阅读和理解。作为一个开发者，如果你必须对一个组件或函数进行调试或扩展，拥有这些类型也能让你更好地理解发生了什么或需要什么。
React在与Typescript结合时效果最好，为了做到这一点，你必须创建一个TSX文件（这将使JSX的使用成为可能）。现在是建立一个组件的时候了。作为一个例子，我将创建一个按钮组件，接收URL、标签和颜色作为道具。
在我们开始之前，我们知道我们的道具将是什么，所以现在是时候为我们的组件创建一个接口了，这是一个定义代码内契约的对象结构。接口包含了关于属性和它们各自类型的信息。
interface ButtonProps{
url?: string;
label: string;
color: string;
}
这里要提到的一个有趣的事情是，URL的类型是如何声明的，使用问号。这意味着URL属性是可选的，如果不使用URL属性，应用程序的运行将不会出现错误。
现在是时候建立我们组件的基础了。像往常一样，我们需要导入React，作为补充，导入FunctionComponent和ReactElement。FunctionComponent是一种类型，它可以确保Button组件有正确的类型。在我们的例子中，那是一个功能组件，而ReactElement是返回值应该具有的类型（JJS）。
import React,
{ FunctionComponent,
ReactElement }
from
‘react’;
const Button : FunctionComponent < ButtonProps > = (
{ url = ’ #’,
label,
color,
} : ButtonProps
): ReactElement => (
< div > < a href = {url} style = {{ backgroundColor : color,
padding : 10, }} > { label } </ a > </ div >
);
如果你知道React，这似乎很熟悉，但也有一些区别。首先，我们可以看到，我们的组件的声明开始时是正常的，但后来有了这个。"FunctionComponent"。这意味着我们的组件是一个功能组件，接收一组ButtonProps类型的属性。之后，我们只需对道具进行解构，并声明我们功能组件的返回类型；在这种情况下，它将是一个反应元素。
现在我们必须声明我们的propTypes。
Button.propTypes = { url : PropTypes.string,
label : PropTypes.string.isRequired,
color : PropTypes.string.isRequired,
} Button.defaultProps = { url : ‘ #’,
}
真正重要的是，我们要尊重ButtonProps接口中声明的属性的类型声明，否则会出现错误。如前所述，在我们的接口中，我们声明URL属性是可选的，这意味着在我们的道具中，我们必须给它默认值，但这个默认值必须是一个字符串。在我们的例子中，我们只是插入了一个空的字符串，这就可以正常工作了。例如，如果我们要改变标签道具并给它添加一个默认值，因为它在接口中被声明为必需的，typescript将抛出一个错误。
这是一个简单的组件，只是为了证明TypeScript如何与React一起使用以提高可维护性。在这里，你可以制作你自己的自定义钩子和函数，但你需要尊重一些规则。例如，当写一个函数时，你必须给参数的类型：“const myFunction = (param1: string, param2: number) => {}” ；如果我们想走得更远，我们可以声明返回值的类型。“const myFunction = (param1: string, param2: number): boolean => {}”
这些都是最基本的，你可以在此基础上，自己学习更多关于TypeScript与React的知识。我知道，你可能在问自己。"为什么要学习将TypeScript整合到我的项目中，因为它看起来就像React，只是多了一些步骤？"
让我给你几个答案。
- 代码更容易阅读和理解。当你能从因素中基本理解是怎么回事时，你就知道一段代码真的很好，比如变量是如何命名的，代码本身有多简单。TypeScript只执行这一点。通过在这里添加类型检查，开发人员将不再需要猜测一个变量/参数应该返回或代表什么。他们现在可以对此有一个更好的理解。
- **更少的错误。**虽然没有人真正喜欢它们，但错误确实会发生。特别是在发布了一个新功能之后。不幸的是，它发生在我们所有人身上。虽然这种情况总会发生...TypeScript可以减少潜在bug的数量，这要归功于类型检查功能。知道你组件中每个变量和道具的类型将有助于在出错时调试你的代码。此外，TypeScript的错误是相当具体的，会让你知道什么时候收到了错误的类型。
- **更好的编译器验证。**这是一个非常棒的方面，因为在React中，PropTypes的主要问题是，它们总是在运行时操作。根据构建情况，可能需要一些时间，直到你能得到类型检查的反馈。然而，在TypeScript中，类型验证是在程序运行前完成的。编译器总是会检测到这些问题并抛出一个错误，为你节省时间。想象一下，这就像有个人坐在你旁边，他非常警觉，每次你犯类型错误时都会通知你。拯救生命!
- **图书馆支持。**由于过去几年的巨大发展，TypeScript现在支持Reacts最流行的库，如Redux、React Router和MaterialUI的类型定义，这意味着这不会对你作为一个React开发者产生太大影响，你仍然会在熟悉的领域。
总结
这些是一些很好的例子，说明为什么值得给TypeScript一个机会。是的，在一开始制作更复杂的组件时，它可能有点挑战性，但在习惯之后，最终的结果将更有可读性，并且拥有更稳定的代码。只要慢慢来，特别是在学习的早期阶段。坚持下去，记住，从长远来看，这将是值得的。
主题。
Reaction, typescript, 开发者, Web开发, Reaction for beginners, typescript for beginners
DZone贡献者所表达的观点是他们自己的。
