学习如何编写Typescript react组件

87 阅读1分钟

通常情况下,每个开发者都使用默认的javascript来编写react组件。

Typescript是javascript的高级版本,具有更多的功能,如严格的类型检查和很多优点。

使用Typescript的React

要求

  • 已经安装了Node和npm
  • React的javascript,css,html
  • Visual studio代码编辑器

如何使用Typescript创建一个React应用程序

首先使用create-react-app cli工具创建一个react。

npx create-react-app react-typescript-app --template typescript

create-react-app默认创建一个react的javascript原型代码库,添加-template typescript来创建一个typecript代码库的react应用。

进入application文件夹,你可以通过npm run start命令启动应用程序

组件

在React中,所有东西都是一个组件。

让我们来讨论一下如何在typescript中写一个组件。

在React中,有两种类型的组件

  • 功能性组件,也叫无状态组件
  • 类组件,也叫有状态组件

如何创建一个类型化的功能组件

在React中创建一个typecript类组件

React组件有Props和状态对象作为类组件的参数

使用proptypes

事件绑定

在typescript中使用refs