文章目录
- 一、创建 React + TypeScript 项目
- (一)使用 Create - React - App(CRA)结合 TypeScript
- (二)配置自定义 React + TypeScript 项目
- 二、React 组件中的类型定义
- (一)函数组件的类型(定义 props 和 state)
- (二)类组件的类型(包括组件生命周期方法的类型)
- 三、处理事件和表单
- (一)事件处理函数的类型(如 onClick 等事件)
- (二)表单元素的类型(input、select 等)
一、创建 React + TypeScript 项目
(一)使用 Create - React - App(CRA)结合 TypeScript
Create - React - App 是一个非常便捷的用于快速搭建 React 项目的脚手架工具,它也支持直接创建包含 TypeScript 的项目。以下是具体的操作步骤:
- 确保已经安装了 Node.js 和 npm(或 yarn),因为 CRA 依赖它们来运行和安装相关依赖包。
- 在命令行中,使用以下命令创建一个新的基于 React 和 TypeScript 的项目(这里以 npm 为例,使用 yarn 时将 npm 替换为 yarn 即可):
npx create-react-app my-react-ts-app