TypeScript 与 React 开发实战指南

梅俐筝

于 2025-06-08 09:18:56 发布

阅读量318

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00897/article/details/148508398

TypeScript 与 React 开发实战指南

TypeScript-Handbook Deprecated, please use the TypeScript-Website repo instead 项目地址: https://gitcode.com/gh_mirrors/ty/TypeScript-Handbook

TypeScript 作为 JavaScript 的超集，为 React 开发带来了类型安全和更好的开发体验。本文将详细介绍如何从零开始搭建一个 TypeScript + React 的开发环境，并逐步实现一个完整的应用开发流程。

项目初始化

创建 TypeScript React 项目

使用 create-react-app 工具可以快速搭建 React 项目，通过指定 react-scripts-ts 参数可以集成 TypeScript 支持：

npx create-react-app my-app --scripts-version=react-scripts-ts

项目目录结构如下：

my-app/
├─ .gitignore
├─ node_modules/
├─ public/
├─ src/
│  └─ ...
├─ package.json
├─ tsconfig.json
└─ tslint.json

关键文件说明：

tsconfig.json：TypeScript 编译配置
tslint.json：代码风格检查配置
package.json：项目依赖和脚本命令

开发流程

启动开发服务器

npm run start

这个命令会启动开发服务器，默认在 http://localhost:3000 打开应用，并支持热重载。

运行测试

npm run test

使用 Jest 测试框架运行所有 .test.ts 或 .spec.ts 结尾的测试文件。

构建生产版本

npm run build

生成优化后的静态资源文件，位于 build/static 目录下。

组件开发实战

创建 Hello 组件

我们来开发一个简单的 Hello 组件，它接收两个 props：

name：必填的字符串
enthusiasmLevel：可选的数字，表示感叹号数量

组件实现 (src/components/Hello.tsx)：

import * as React from 'react';

export interface Props {
  name: string;
  enthusiasmLevel?: number;
}

function Hello({ name, enthusiasmLevel = 1 }: Props) {
  if (enthusiasmLevel <= 0) {
    throw new Error('热情度必须大于0');
  }

  return (
    <div className="hello">
      <div className="greeting">
        Hello {name + getExclamationMarks(enthusiasmLevel)}
      </div>
    </div>
  );
}

function getExclamationMarks(numChars: number) {
  return Array(numChars + 1).join('!');
}

export default Hello;

组件使用

在入口文件 (index.tsx) 中使用组件：

import Hello from './components/Hello';

ReactDOM.render(
  <Hello name="TypeScript" enthusiasmLevel={3} />,
  document.getElementById('root') as HTMLElement
);

注意这里的类型断言 as HTMLElement，它告诉 TypeScript 我们知道 getElementById 会返回一个有效的 HTMLElement。

样式与测试

添加样式

创建 Hello.css 文件并导入：

import './Hello.css';

编写测试

使用 Enzyme 测试组件行为 (Hello.test.tsx)：

import * as React from 'react';
import * as enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Hello from './Hello';

enzyme.configure({ adapter: new Adapter() });

it('默认显示1个感叹号', () => {
  const wrapper = enzyme.shallow(<Hello name='张三' />);
  expect(wrapper.find(".greeting").text()).toBe('Hello 张三!')
});

it('显示指定数量的感叹号', () => {
  const wrapper = enzyme.shallow(<Hello name='李四' enthusiasmLevel={3}/>);
  expect(wrapper.find(".greeting").text()).toBe('Hello 李四!!!')
});

it('热情度为0时抛出错误', () => {
  expect(() => {
    enzyme.shallow(<Hello name='王五' enthusiasmLevel={0} />);
  }).toThrow();
});

状态管理进阶

引入 Redux

安装 Redux 相关依赖：

npm install redux react-redux @types/react-redux

定义应用状态

创建状态类型定义 (src/types/index.tsx)：

export interface StoreState {
    languageName: string;
    enthusiasmLevel: number;
}

创建 Action

定义 action 类型和创建函数 (src/actions/index.tsx)：

import * as constants from '../constants'

export interface IncrementEnthusiasm {
    type: constants.INCREMENT_ENTHUSIASM;
}

export interface DecrementEnthusiasm {
    type: constants.DECREMENT_ENTHUSIASM;
}

export type EnthusiasmAction = IncrementEnthusiasm | DecrementEnthusiasm;

export function incrementEnthusiasm(): IncrementEnthusiasm {
    return { type: constants.INCREMENT_ENTHUSIASM }
}

export function decrementEnthusiasm(): DecrementEnthusiasm {
    return { type: constants.DECREMENT_ENTHUSIASM }
}

实现 Reducer

创建 reducer 处理状态变更 (src/reducers/index.tsx)：

import { EnthusiasmAction } from '../actions';
import { StoreState } from '../types/index';
import { INCREMENT_ENTHUSIASM, DECREMENT_ENTHUSIASM } from '../constants/index';

export function enthusiasm(state: StoreState, action: EnthusiasmAction): StoreState {
  switch (action.type) {
    case INCREMENT_ENTHUSIASM:
      return { ...state, enthusiasmLevel: state.enthusiasmLevel + 1 };
    case DECREMENT_ENTHUSIASM:
      return { ...state, enthusiasmLevel: Math.max(1, state.enthusiasmLevel - 1) };
  }
  return state;
}