当前位置：首页 > 文章列表 > 文章 > 前端 > TypeScript + React 实战

TypeScript + React 实战

2026-08-21 02:59:32 0浏览收藏

TypeScript 为 React 开发提供完整的类型支持，提高代码可靠性。

使用 TypeScript 可以让 React 组件、Props、State 等都有完整的类型检查，减少运行时错误。

React 教程查看：https://www.runoob.com/vue3/react-tutorial.html

为什么需要在 React 中使用 TypeScript

React 组件化开发会产生大量的 Props、State、Context 等数据流。

没有类型定义时，很难追踪数据的来源和结构，容易出现运行时错误。

TypeScript 给 React 补上了一整套清晰的类型系统：组件的 Props 可以做类型校验，useState 能自动推断类型，事件处理时也会有明确的类型提示。

数据流：在 React 里，不管是 Props、State，还是 Context，这几条核心数据通道都离不开清晰的类型定义；而 TypeScript 的价值就在这里，它能把数据流的类型安全稳稳兜住。

创建项目

使用现代脚手架创建支持 TypeScript 的 React 项目。

初始化

# 使用 Create React App（较慢但完整）
npx create-react-app my-app --template typescript
# 或使用 Vite（推荐，更快）
npm create vite@latest my-app -- --template react-ts

推荐：Vite 是目前最推荐的 React 构建工具，速度快，开发体验好。

组件类型

使用 React.FC 类型定义函数组件。

src/components/Button.tsx

import React from "react";
// 定义按钮组件的 Props 类型
interface ButtonProps {
    text: string;                    // 按钮文字（必填）
    onClick: () => void;             // 点击回调（必填）
    disabled?: boolean;              // 是否禁用（可选，默认 false）
    variant?: "primary" | "secondary"; // 按钮变体（可选）
}
// 使用 React.FC 定义函数组件类型
const Button: React.FC = ({
    text,
    onClick,
    disabled = false,
    variant = "primary"
}) => {
    return (
        
    );
};
export default Button;

运行结果：

Button 组件渲染成功

React.FC：这是 React 函数组件的类型，包含了 children、propTypes 等内置类型。

Props 类型

定义组件的 Props 接口，传递数据给子组件。

src/components/UserCard.tsx

import React from "react";
// 定义用户类型
interface User {
    id: number;           // 用户 ID
    name: string;        // 用户名
    email: string;       // 邮箱
    a vatar?: string;     // 头像（可选）
}
// 定义用户卡片组件的 Props
interface UserCardProps {
    user: User;                       // 用户对象（必填）
    onEdit: (user: User) => void;    // 编辑回调
    onDelete: (id: number) => void;  // 删除回调
}
const UserCard: React.FC = ({ user, onEdit, onDelete }) => {
    return (
        
            {user.a vatar && }
            {user.name}
            {user.email}
            
            
        
    );
};
export default UserCard;

类型传递：通过 Props 传递类型，确保整个组件树的数据类型一致。

useState 类型

为 useState 提供类型参数，确保状态类型正确。

src/components/Counter.tsx

import React, { useState } from "react";
const Counter: React.FC = () => {
    // 基础类型：显式指定 number 类型
    const [count, setCount] = useState(0);
    // 对象类型：指定对象类型
    const [user, setUser] = useState({
        name: "Alice",
        age: 25
    });
    return (
        
            计数: {count}
            
            
            用户: {user.name}, {user.age}
            
        
    );
};
export default Counter;

运行结果：

Counter 组件渲染成功

泛型参数：useState 中的 T 就是状态的类型，如果提供初始值，TypeScript 可以自动推断。

useEffect 类型

useEffect 同样有完整的类型支持。

src/components/DataFetcher.tsx

import React, { useState, useEffect } from "react";
// 定义用户类型
interface User {
    id: number;
    name: string;
}
const DataFetcher: React.FC = () => {
    // 用户列表状态
    const [users, setUsers] = useState([]);
    // 加载状态
    const [loading, setLoading] = useState(true);
    // 错误状态
    const [error, setError] = useState(null);
    useEffect(() => {
        // 模拟获取数据
        fetch("/api/users")
            .then(res => res.json())
            .then(data => {
                setUsers(data);
                setLoading(false);
            })
            .catch(err => {
                setError(err.message);
                setLoading(false);
            });
    }, []);  // 空依赖数组：只在组件挂载时执行一次
    if (loading) return 加载中...;
    if (error) return 错误: {error};
    return (
        
            {users.map(user => (
                {user.name}
            ))}
        
    );
};
export default DataFetcher;

依赖数组：useEffect 的第二个参数是依赖数组，TypeScript 会检查回调中使用的变量是否都已在数组中声明。

事件处理

React 事件有专门的类型定义。

src/components/Form.tsx

import React, { useState } from "react";
const Form: React.FC = () => {
    // 字符串类型的状态
    const [name, setName] = useState("");
    // 表单提交事件处理
    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();  // 阻止表单默认提交
        console.log("提交:", name);
    };
    // 输入框变化事件处理
    const handleChange = (e: React.ChangeEvent) => {
        setName(e.target.value);
    };
    return (
        
            
        
    );
};
export default Form;

运行结果：