文章目录
使用脚手架创建 React 项目
【三斜线指令 /// 】
【配置文件 tsconfig.json】
函数组件常用类型
【函数组件类型及组件的属性】
【函数组件属性的默认值】
【事件绑定和事件对象】
class类组件常用类型
【class 组件的类型】
【class 组件的属性和默认值】
【class 组件 state 状态和事件】
使用脚手架创建 React 项目
安装 React 脚手架
npm i create-react-app -g
创建支持 TS 的项目
create-react-app demo --template typescript
进入项目文件夹
cd demo
启动项目
npm start
项目启动成功
官网指南（内含为已有项目添加 TS 依赖）：https://create-react-app.dev/docs/adding-typescript/
相对于非 TS 项目，目录结构主要有以下三个变化：
1. 项目根目录中增加了tsconfig.json配置文件：指定 TS 的编译选项。
2. React 组件的文件扩展名由 *.jsx 变为：*.tsx。
3. src 目录中增加了react-app-env.d.ts：React 项目默认的类型声明文件。
【三斜线指令 /// 】
三斜线指令：指定依赖的其他类型声明文件，types 表示依赖的类型声明文件包的名称。
/// <reference types="react-scripts" />
react-scripts 的类型声明文件包含了两部分类型：（Ctrl+左键 查看）
react、react-dom、node 的类型图片、样式等模块的类型，以允许在代码中导入图片、SVG 等文件。
【配置文件 tsconfig.json】
全配置项：/tsconfig
tsconfig.json 可以通过命令：tsc --init自动生成。tsconfig.json 文件所在目录为项目根目录。
注意：在使用 tsc 命令时，tsc 后若带有输入文件（比如，tsc hello.ts），将忽略 tsconfig.json 文件。
部分配置项解释：
{// 编译选项"compilerOptions": {// 生成代码的语言版本"target": "es5",// 指定要包含在编译中的 library"lib": [ "dom", "dom.iterable", "esnext" ],// 允许 ts 编译器编译 js 文件"allowJs": true,// 跳过声明文件的类型检查"skipLibCheck": true,// es 模块 互操作，屏蔽 ESModule 和 CommonJS 之间的差异"esModuleInterop": true,// 允许通过 import x from 'y' 即使模块没有显式指定 default 导出"allowSyntheticDefaultImports": true,// 开启严格模式"strict": true,// 对文件名称强制区分大小写"forceConsistentCasingInFileNames": true,// 为 switch 语句启用错误报告"noFallthroughCasesInSwitch": true,// 生成代码的模块化标准"module": "esnext",// 模块解析（查找）策略"moduleResolution": "node",// 允许导入扩展名为.json的模块"resolveJsonModule": true,// 是否将没有 import/export 的文件视为旧（全局而非模块化）脚本文件。"isolatedModules": true,// 编译时不生成任何文件（只进行类型检查）"noEmit": true,// 指定将 JSX 编译成什么形式"jsx": "react-jsx"},// 指定允许 ts 处理的目录"include": [ "src" ]}
函数组件常用类型
【函数组件类型及组件的属性】
/*函数组件：*/import { FC } from 'react';type Props = { name: string; age: number };const Hello: FC<Props> = ({ name, age }) => (<div>您好，我叫：{name}，我 {age} 岁了</div>)export default function App() {return (<div><Hello name="rose" age={18} /></div >)}
可以直接简化为（完全按照函数在 TS 中的写法）
// 可以直接简化为（完全按照函数在 TS 中的写法）type Props = { name: string; age: number };const Hello = ({ name, age }: Props) => (<div>您好，我叫：{name}，我 {age} 岁了</div>)export default function App() {return (<div><Hello name="rose" age={18} /></div >)}
【函数组件属性的默认值】
/*属性的默认值（defaultProps）*/import { FC } from 'react';type Props = { name: string; age?: number };const Hello: FC<Props> = ({ name, age }) => (<div>您好，我叫：{name}，我 {age} 岁了</div>)Hello.defaultProps = {age: 18}
可以直接简化为（完全按照函数在 TS 中的写法）
type Props = { name: string; age?: number };const Hello = ({ name, age = 18 }: Props) => (<div>您好，我叫：{name}，我 {age} 岁了</div>)
【事件绑定和事件对象】
获取事件对象时要标明事件对象类型
import React from 'react'/*事件绑定和事件对象*/type Props = { name: string; age?: number }const Hello = ({ name, age = 18 }: Props) => {// 事件const onClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {console.log('赞！', e.currentTarget)}// 文本框const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {console.log(e.target.value)}return (<div>您好，我叫：{name}，我 {age} 岁了<button onClick={onClick}>点赞</button><input onChange={onChange} /></div>)}
查看事件对象类型
class类组件常用类型
【class 组件的类型】
/*类组件*/import React from "react"type State = { count: number }type Props = { message?: string }// 无 props 无 stateclass C1 extends ponent { render() { return (<div>C1</div>) } }// 有 props 无 stateclass C2 extends ponent<Props> { render() { return (<div>C2</div>) } }// 无 props 有 stateclass C3 extends ponent<{}, State> { render() { return (<div>C3</div>) } }// 有 props、stateclass C4 extends ponent<Props, State> { render() { return (<div>C4</div>) } }
【class 组件的属性和默认值】
/*类组件的属性*/import React from "react"type Props = { name: string; age?: number }class Hello extends ponent<Props> {// 提供属性的默认值static defaultProps: Partial<Props> = {age: 18}render() {const { name, age } = this.propsreturn (<div>你好，我叫：{name}，我 {age} 岁了</div>)}}
可以直接简化为
class Hello extends ponent<Props> {render() {// 简化 class 组件的属性默认值const { name, age = 20 } = this.propsreturn (<div>你好，我叫：{name}，我 {age} 岁了</div>)}}
【class 组件 state 状态和事件】
/*类组件的状态和事件*/import React from "react"type State = { count: number }class Couter extends ponent<{}, State> {// 初始化statestate: State = {count: 0}onIncrement = () => {this.setState({ count: this.state.count + 1 })}render() {return (<div><div>{this.state.count}</div>{/* 添加点击事件 */}<button onClick={this.onIncrement}>+1</button></div>)}}
TypeScript 教程——阮一峰·著
TypeScript 中文网
TypeScript 官网
