首頁手記 React+TS教程：從零開始掌握React與Type...

React+TS教程：從零開始掌握React與TypeScript結合開發

標簽：

React Typescript

本文介绍了如何在React项目中集成TypeScript，涵盖从初始化React+TS项目到类型定义、组件类型化、常见类型技巧以及实战应用，旨在提供一个全面的react+ts教程。

React与TypeScript基础知识

React简介

React 是一个由 Facebook 开发并维护的开源前端库，用于构建用户界面，尤其适用于构建单页应用 (SPA)。React 以其组件化的设计、高效的虚拟 DOM 及其 JSX 语法而闻名。通过这些特性，React 能够提供高性能且可维护的用户界面。

React 的主要优点包括：

组件化：React 的组件化设计使得开发者可以将界面分割成模块化、可重用的组件，这简化了应用的开发和维护过程。
高效的虚拟 DOM：React 通过虚拟 DOM 来提高渲染效率，使得应用在更新界面时更加高效。
JSX 语法：JSX 是一种将 XML 语法与 JavaScript 代码结合起来的语法，它使得 HTML 标签可以直接嵌入到 JavaScript 中，使得代码更具可读性和表达力。

TypeScript简介

TypeScript 是由 Microsoft 开发的一个开源编程语言，它是 JavaScript 的一个超集，为 JavaScript 添加了静态类型检查功能。TypeScript 的主要优点包括：

静态类型检查：TypeScript 在编译阶段执行静态类型检查，有助于在早期发现潜在的类型错误。
更好的代码编辑器支持：TypeScript 使得代码编辑器能够提供更强大的代码补全和智能提示功能。
更好的团队协作：静态类型检查有助于团队成员更好地理解彼此的代码，并确保代码的一致性。

为什么要在React项目中使用TypeScript

在 React 项目中使用 TypeScript 可以带来以下好处：

早期错误检测：通过 TypeScript 的静态类型检查，可以在编译阶段发现潜在的类型错误，减少在运行时出现的错误。
提高代码可维护性：通过明确的类型定义，可以提高代码的可读性和可维护性，便于团队成员理解和维护代码。
更好的工具支持：TypeScript 为代码编辑器提供了更好的支持，使得开发过程更加高效。

创建第一个React+TS项目

如何初始化一个React项目

要初始化一个 React 项目，可以使用 Create React App 工具。以下是在命令行中执行的步骤：

安装 Create React App：

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

进入项目目录并启动应用：
```
cd my-app
npm start
```

如何将TypeScript集成到React项目中

在初始化项目时，使用 --template typescript 参数会自动集成 TypeScript。如果已经有一个 React 项目，可以手动集成 TypeScript：

安装 TypeScript 和相关的类型定义：

npm install typescript @types/react @types/react-dom --save-dev

更新 package.json 文件中的 scripts 部分，以支持 TypeScript 编译：

{
 "scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject",
   "compile": "tsc && node_modules/.bin/react-scripts start"
 }
}

更新 tsconfig.json 文件，以指定 TypeScript 编译器的配置：

{
 "compilerOptions": {
   "target": "es5",
   "module": "commonjs",
   "strict": true,
   "esModuleInterop": true,
   "skipLibCheck": true,
   "forceConsistentCasingInFileNames": true,
   "noEmit": true
 },
 "include": ["src"]
}

配置TypeScript类型定义文件

在项目中使用外部库时，通常需要安装相应的类型定义文件。例如，如果使用了 lodash 库，可以安装其类型定义：

npm install lodash @types/lodash --save

在 TypeScript 文件中，可以通过 import 语句引入类型定义：

import _ from 'lodash';

const result = _.join(['a', 'b', 'c'], ',');

React组件类型化

如何为React组件定义类型

在 React 中，可以使用 TypeScript 为组件定义类型，以明确组件的属性和状态。以下是一个简单的示例：

import React from 'react';

interface Props {
  title: string;
}

interface State {
  count: number;
}

class MyComponent extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}

export default MyComponent;

在这个示例中，Props 接口定义了组件的属性，State 接口定义了组件的状态。

使用TypeScript注解优化组件属性和状态

通过 TypeScript 注解，可以进一步优化组件的属性和状态定义。例如，可以使用类型别名和联合类型来增加类型定义的灵活性：

import React from 'react';

type MyProps = {
  title: string;
  isDisabled?: boolean;
};

type MyState = {
  count: number;
  message: string;
};

class MyComponent extends React.Component<MyProps, MyState> {
  constructor(props: MyProps) {
    super(props);
    this.state = { count: 0, message: 'Hello, World!' };
  }

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>Count: {this.state.count}</p>
        <p>{this.props.isDisabled ? 'Disabled' : 'Enabled'}</p>
      </div>
    );
  }
}

export default MyComponent;

在这个示例中，MyProps 类型定义了组件的可选属性 isDisabled，MyState 类型定义了组件的状态。

常见TypeScript类型技巧

掌握联合类型和交叉类型

联合类型和交叉类型是 TypeScript 中非常有用的类型构造，可以用来组合和细化类型定义。

联合类型

联合类型用于定义一个变量可以是多种类型之一。例如：

type Color = 'red' | 'green' | 'blue';

let color: Color = 'red';

color = 'green';  // 正确
color = 'blue';   // 正确
color = 'yellow'; // 错误

在这个示例中，Color 类型可以是 'red'、'green' 或 'blue' 中的任意一个。

交叉类型

交叉类型用于定义一个变量同时拥有多个类型的属性。例如：

interface Point {
  x: number;
  y: number;
}

interface ColorPoint {
  color: string;
}

type PointColor = Point & ColorPoint;

let p: PointColor = { x: 1, y: 2, color: 'red' };

在这个示例中，PointColor 类型是一个交叉类型，它同时包含 Point 和 ColorPoint 的属性。

使用泛型提升组件的复用性

通过使用泛型，可以创建可复用的组件，使得组件的属性和状态更具灵活性。例如：

import React from 'react';

interface Props<T> {
  title: string;
  initialCount: T;
}

interface State<T> {
  count: T;
}

class Counter<T extends number | string> extends React.Component<Props<T>, State<T>> {
  constructor(props: Props<T>) {
    super(props);
    this.state = { count: props.initialCount };
  }

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}

const numberCounter = <Counter<number> title="Number Counter" initialCount={0} />;
const stringCounter = <Counter<string> title="String Counter" initialCount="Start" />;

export default numberCounter;

在这个示例中，Counter 组件可以接受 number 或 string 类型的属性和状态，从而提高组件的复用性。

错误排查与调试技巧

解决常见的TypeScript编译错误

在使用 TypeScript 开发过程中，可能会遇到各种编译错误。以下是一些常见的编译错误及其解决方法：

错误类型：`Type 'X' is missing the following properties from type 'Y'`

这个错误通常表示某个类型缺少某些必需的属性。例如：

interface User {
  name: string;
  age: number;
}

const user: User = { name: 'Alice' };  // 编译错误

解决方案是确保类型定义和实际对象匹配：

const user: User = { name: 'Alice', age: 25 };

错误类型：`Type 'X' is not assignable to type 'Y'`

这个错误通常表示某个类型的值不能赋值给另一个类型。例如：

interface User {
  name: string;
  age: number;
}

const user: User = { name: 'Alice', age: '25' };  // 编译错误

解决方案是确保值的类型匹配：

const user: User = { name: 'Alice', age: 25 };

使用IDE进行TypeScript调试

使用 IDE 进行 TypeScript 调试可以提高开发效率，以下是一些调试技巧：

配置调试环境

确保你的 IDE 支持 TypeScript 调试。例如，在 VS Code 中，可以安装 Debugger for Chrome 插件：

ext install Debugger for Chrome

设置断点

在代码中设置断点，例如在组件的 render 方法中：

render() {
  debugger;  // 设置断点
  return (
    <div>
      <h1>{this.props.title}</h1>
      <p>Count: {this.state.count}</p>
    </div>
  );
}

启动调试会话

启动调试会话，例如在 VS Code 中，可以使用 F5 键启动调试会话。

查看变量值

在断点处，可以在调试工具中查看变量的值，确保变量的值符合预期。

实战：构建一个简单的React+TS应用

构建一个Todo List应用

应用逻辑

构建一个 Todo List 应用，需要实现以下功能：

添加任务
删除任务
显示任务列表

定义任务类型

首先，定义任务的类型：

interface Task {
  id: string;
  text: string;
  completed: boolean;
}

创建任务列表组件

创建一个任务列表组件，用于显示任务列表：

import React from 'react';

interface Props {
  tasks: Task[];
  onTaskRemove: (id: string) => void;
}

const TaskList: React.FC<Props> = ({ tasks, onTaskRemove }) => {
  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id}>
          <span>{task.text}</span>
          <button onClick={() => onTaskRemove(task.id)}>删除</button>
        </li>
      ))}
    </ul>
  );
};

export default TaskList;

创建任务管理组件

创建一个任务管理组件，用于添加和删除任务：

import React from 'react';
import { v4 as uuidv4 } from 'uuid';
import TaskList from './TaskList';

interface Props {
  tasks: Task[];
  onTaskAdd: (text: string) => void;
  onTaskRemove: (id: string) => void;
}

interface State {
  newTaskText: string;
}

class TaskManager extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { newTaskText: '' };
  }

  handleNewTaskChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({ newTaskText: e.target.value });
  }

  handleAddTask = () => {
    if (this.state.newTaskText.trim()) {
      const newTask: Task = {
        id: uuidv4(),
        text: this.state.newTaskText,
        completed: false
      };
      this.props.onTaskAdd(newTask);
      this.setState({ newTaskText: '' });
    }
  }

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.newTaskText}
          onChange={this.handleNewTaskChange}
        />
        <button onClick={this.handleAddTask}>添加任务</button>
        <TaskList tasks={this.props.tasks} onTaskRemove={this.props.onTaskRemove} />
      </div>
    );
  }
}

export default TaskManager;

创建应用主入口组件

创建应用主入口组件，用于组合任务管理组件和任务列表组件：

import React from 'react';
import TaskManager from './TaskManager';

interface Props {
  tasks: Task[];
  onTaskAdd: (task: Task) => void;
  onTaskRemove: (id: string) => void;
}

const App: React.FC<Props> = ({ tasks, onTaskAdd, onTaskRemove }) => {
  return (
    <div>
      <h1>Todo List</h1>
      <TaskManager tasks={tasks} onTaskAdd={onTaskAdd} onTaskRemove={onTaskRemove} />
    </div>
  );
};

export default App;

创建应用状态管理

创建应用状态管理组件，用于管理任务列表的全局状态：

import React from 'react';

interface Task {
  id: string;
  text: string;
  completed: boolean;
}

interface Props {
  children: (tasks: Task[], onTaskAdd: (task: Task) => void, onTaskRemove: (id: string) => void) => JSX.Element;
}

interface State {
  tasks: Task[];
}

class TaskContextProvider extends React.Component<Props, State> {
  state = {
    tasks: [],
  };

  handleTaskAdd = (task: Task) => {
    this.setState(prevState => ({ tasks: [...prevState.tasks, task] }));
  };

  handleTaskRemove = (id: string) => {
    this.setState(prevState => ({ tasks: prevState.tasks.filter(task => task.id !== id) }));
  };

  render() {
    const { tasks } = this.state;
    const { children } = this.props;
    return children(tasks, this.handleTaskAdd, this.handleTaskRemove);
  }
}

export const TaskContext = React.createContext(null);
export const TaskContextProvider = TaskContextProvider;

使用状态管理组件

在应用主入口组件中使用状态管理组件：

import React from 'react';
import TaskContext from './TaskContext';
import TaskManager from './TaskManager';

const App: React.FC = () => {
  return (
    <TaskContext.Provider>
      <TaskManager />
    </TaskContext.Provider>
  );
};

export default App;

运行应用

运行应用，确保所有功能正常工作：

npm start

集成路由实现功能模块化

为了实现功能模块化，可以引入 React Router 来管理应用的不同路由。以下是如何集成 React Router 的步骤：

安装路由依赖

安装 React Router 相关依赖：

npm install react-router-dom

定义路由组件

创建路由组件，用于管理不同的页面：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';
import TaskManager from './TaskManager';

const App: React.FC = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={TaskManager} />
        <Route path="/about" component={AboutPage} />
      </Switch>
    </Router>
  );
};

export default App;

创建页面组件

创建页面组件，用于显示不同页面的内容：

import React from 'react';

const HomePage: React.FC = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to the home page.</p>
    </div>
  );
};

export default HomePage;

import React from 'react';

const AboutPage: React.FC = () => {
  return (
    <div>
      <h1>About Page</h1>
      <p>Welcome to the about page.</p>
    </div>
  );
};

export default AboutPage;

运行应用

运行应用，确保不同页面可以正常访问：

npm start

點擊查看更多內容

為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

評論

共同學習，寫下你的評論

評論加載中...

展開查看更多評論

作者其他優質文章

正在加載中

蕭十郎

手記
篇

粉絲

38

獲贊與收藏

167

關注作者，訂閱最新文章

閱讀免費教程

TypeScript 入門教程

38個小節 95947 685

后端通用面試教程

41個小節 32074 358

網絡編程入門教程

20個小節 13213 249

推薦

評論

收藏

共同學習，寫下你的評論



感謝您的支持，我會繼續努力的～

掃碼打賞，你說多少就多少

贊賞金額會直接到老師賬戶

支付方式

打開微信掃一掃，即可進行掃碼打賞哦

今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與放棄機會

點擊
抽獎

慕課手記新用戶專享福利

恭喜你，你的運氣太好了，居然抽中了 100個積分！

恭喜你，抽中了價值元的專欄！

太棒了，直接落到你賬戶里！

積分商城里的羅技鼠標、機械鍵盤、
Kindle 閱讀器、小米平衡車
Apple iPad （10.2英寸）、大額優惠券
在等著你去兌換了噢

作者：

免費贈送

兌換碼：1111222211 復制

優惠券可用于購買實戰課、體系課
無門檻使用

先去看看，有什么好東西馬上兌換我愛學習，選課去


亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

React+TS教程：從零開始掌握React與TypeScript結合開發

联合类型

交叉类型

错误类型：Type 'X' is missing the following properties from type 'Y'

错误类型：Type 'X' is not assignable to type 'Y'

配置调试环境

设置断点

启动调试会话

查看变量值

应用逻辑

定义任务类型

创建任务列表组件

创建任务管理组件

创建应用主入口组件

创建应用状态管理

使用状态管理组件

运行应用

安装路由依赖

定义路由组件

创建页面组件

运行应用

閱讀免費教程

错误类型：`Type 'X' is missing the following properties from type 'Y'`

错误类型：`Type 'X' is not assignable to type 'Y'`