首页手记 React+TypeScript教程：入门与实战

React+TypeScript教程：入门与实战

标签：

React Typescript

概述

本文详细介绍了如何将React与TypeScript结合使用，提供了从环境配置到基础语法的全面指南，帮助开发者构建更加安全和可维护的应用程序。通过实例演示了如何创建和管理React组件，并讲解了React Hooks和TypeScript泛型的高级特性。此外，还涵盖了测试和部署的最佳实践，确保你的React+TypeScript教程项目能够顺利上线。

引入React和TypeScript

什么是React

React 是一个由 Facebook 开发并维护的 JavaScript 库，用于构建用户界面。React 的核心思想是将 UI 视为组件的集合，每个组件都是一个独立的、可重用的模块。通过这种方式，开发者可以构建可维护、可扩展的大型应用。React 使用虚拟 DOM 技术，提高应用性能，减少了对整个 DOM 树的频繁操作。

什么是TypeScript

TypeScript 是由 Microsoft 开发并维护的开源编程语言，它是一种静态类型语言，是 JavaScript 的超集。TypeScript 的主要特点是引入了类型系统，这使得开发者可以提前发现类型相关的错误。TypeScript 代码在编译时会转换成纯 JavaScript 代码，运行时无需任何运行时依赖。

为什么使用React+TypeScript

类型安全：TypeScript 通过静态类型检查，可以在编译阶段发现潜在的类型错误，提高代码的健壮性。
代码可读性：类型注解可以帮助其他开发者更好地理解代码，提升团队协作效率。
工具支持：TypeScript 的类型信息可以让 IDE 和构建工具提供更好的支持，如代码补全、错误提示等。
大型项目：对于大型项目，TypeScript 的静态类型检查可以更好地管理复杂的代码结构，有助于保持项目的一致性和可维护性。

安装与配置

创建React项目

使用 Create React App 工具可以快速创建一个 React 项目。Create React App 是由 Facebook 推出的一个脚手架工具，用于快速生成 React 应用的基本结构。以下是创建项目的基本步骤：

安装 Node.js
安装 Create React App
```
npm install -g create-react-app
```

创建 React 项目

create-react-app my-app
cd my-app
npm start

添加TypeScript到项目

安装 TypeScript
```
npm install --save-dev typescript
```

安装 React TypeScript 定义

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

将项目转换为 TypeScript 项目

npx create-react-app my-app --template typescript
cd my-app
npm start

配置TypeScript环境

在项目根目录下，找到 tsconfig.json 文件，这个文件是用来配置 TypeScript 编译器的。以下是 tsconfig.json 的一个示例：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitAny": true,
    "noEmitOnError": true,
    "outDir": "./dist",
    "moduleResolution": "node",
    "sourceMap": true
  },
  "include": ["src"]
}

基础语法与类型声明

React组件的基本类型声明

在 TypeScript 中，定义 React 组件时需要明确类型。例如，定义一个简单的函数组件：

import React from 'react';

interface Props {
  title: string;
}

const Header: React.FC<Props> = (props) => {
  return <h1>{props.title}</h1>;
};

export default Header;

在这个示例中，Props 接口定义了组件的属性类型，React.FC 是一个泛型函数类型别名，用于定义函数组件。

使用interface定义组件属性

继续上面的例子，使用 interface 定义组件属性：

import React from 'react';

interface Props {
  title: string;
}

const Header: React.FC<Props> = (props) => {
  return <h1>{props.title}</h1>;
};

export default Header;

类型推断与类型注解

类型推断是指 TypeScript 能够根据上下文推断变量的类型，而类型注解则是显式地为变量指定类型。

let myNumber = 42;
let myString = 'Hello';

// 类型推断
let myObject = { name: 'John', age: 30 };

// 类型注解
let myNumber2: number = 42;
let myString2: string = 'Hello';

// 对象类型注解
let myObject2: { name: string, age: number } = { name: 'John', age: 30 };

实战案例：创建一个简单的Todo应用

设计应用结构

一个简单的 Todo 应用通常包括以下几个部分：

Todo 列表组件：显示所有的 Todo 项。
Todo 项组件：显示一个 Todo 项，并包含完成和删除的操作。
添加 Todo 项组件：允许用户输入并添加一个新的 Todo 项。

编写组件代码

首先定义一个 TodoItem 组件，用于显示单个 Todo 项。

import React from 'react';

interface Props {
  id: number;
  text: string;
  completed: boolean;
  onToggle: (id: number) => void;
  onDelete: (id: number) => void;
}

const TodoItem: React.FC<Props> = ({ id, text, completed, onToggle, onDelete }) => {
  return (
    <li>
      <input type="checkbox" checked={completed} onChange={() => onToggle(id)} />
      <span>{text}</span>
      <button onClick={() => onDelete(id)}>Delete</button>
    </li>
  );
};

export default TodoItem;

接着定义 TodoList 组件，用于显示所有 Todo 项。

import React, { useState } from 'react';
import TodoItem from './TodoItem';

interface Props {
  todos: Todo[];
  onToggle: (id: number) => void;
  onDelete: (id: number) => void;
}

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

const TodoList: React.FC<Props> = ({ todos, onToggle, onDelete }) => {
  const [filteredTodos, setFilteredTodos] = useState(todos);

  const handleToggle = (id: number) => {
    const toggledTodo = todos.find(todo => todo.id === id);
    if (toggledTodo) {
      toggledTodo.completed = !toggledTodo.completed;
      setFilteredTodos([...todos]);
    }
  };

  const handleDelete = (id: number) => {
    const updatedTodos = todos.filter(todo => todo.id !== id);
    setFilteredTodos(updatedTodos);
  };

  return (
    <ul>
      {filteredTodos.map(todo => (
        <TodoItem
          key={todo.id}
          id={todo.id}
          text={todo.text}
          completed={todo.completed}
          onToggle={handleToggle}
          onDelete={onDelete}
        />
      ))}
    </ul>
  );
};

export default TodoList;

最后定义 TodoApp 组件，用于添加新 Todo 项和展示 Todo 列表。

import React, { useState } from 'react';
import TodoList from './TodoList';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

const TodoApp: React.FC = () => {
  const [todos, setTodos] = useState<Todo[]>([
    { id: 1, text: 'Learn TypeScript', completed: true },
    { id: 2, text: 'Create Todo App', completed: false },
  ]);

  const addTodo = (text: string) => {
    const newTodo: Todo = {
      id: Date.now(),
      text,
      completed: false,
    };
    setTodos([...todos, newTodo]);
  };

  return (
    <div>
      <input type="text" placeholder="Add a new todo" onKeyUp={(e) => { if (e.key === 'Enter' && e.currentTarget.value) addTodo(e.currentTarget.value); e.currentTarget.value = ''; }} />
      <TodoList todos={todos} onToggle={(id) => console.log('toggle', id)} onDelete={(id) => console.log('delete', id)} />
    </div>
  );
};

export default TodoApp;

高级特性介绍

使用Hooks

React Hooks 是一种新的功能，允许在不编写类的情况下使用状态和其他 React 特性。以下是使用 useState 和 useEffect 的示例：

import React, { useState, useEffect } from 'react';

interface Props {
  id: number;
  text: string;
  completed: boolean;
  onToggle: (id: number) => void;
  onDelete: (id: number) => void;
}

const TodoItem: React.FC<Props> = ({ id, text, completed, onToggle, onDelete }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [textInput, setTextInput] = useState(text);

  const handleEdit = () => {
    setIsEditing(true);
  };

  const handleSave = () => {
    setIsEditing(false);
    onToggle(id);
  };

  useEffect(() => {
    if (isEditing) {
      document.getElementById(`todo-${id}`)?.focus();
    }
  }, [isEditing]);

  return (
    <li>
      <input type="checkbox" checked={completed} onChange={() => onToggle(id)} />
      <span id={`todo-${id}`} style={{ textDecoration: completed ? 'line-through' : 'none' }} onClick={handleEdit}>
        {isEditing ? <input type="text" value={textInput} onChange={(e) => setTextInput(e.target.value)} /> : text}
      </span>
      <button onClick={() => onDelete(id)}>Delete</button>
      {isEditing && <button onClick={handleSave}>Save</button>}
    </li>
  );
};

export default TodoItem;

使用TypeScript的泛型

TypeScript 的泛型允许我们在定义函数、接口或类时使用类型变量。例如，定义一个通用的 Identity 函数：

function identity<T>(arg: T): T {
  return arg;
}

const result1 = identity<string>('hello');
const result2 = identity<number>(123);

类型守卫与类型断言

类型守卫是一种用于缩小类型范围的技术。例如，使用 typeof 进行类型断言：

function isStringArray(arr: any[]): arr is string[] {
  return arr.every(item => typeof item === 'string');
}

const arr1: any[] = ['a', 'b', 'c'];
if (isStringArray(arr1)) {
  // arr1 is string[]
  arr1.join(', ');
}

const arr2: any[] = [1, 2, 3];
if (isStringArray(arr2)) {
  // arr2 is not string[]
}

测试与部署

用Jest编写测试

Jest 是一个流行的 JavaScript 测试框架，可以用来测试 React 组件。以下是如何使用 Jest 测试组件：

安装 Jest

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

配置 Jest
在 package.json 中添加脚本：

"scripts": {
 "test": "react-scripts test --env=jsdom"
}

编写测试
使用 @testing-library/react 编写测试：

import React from 'react';
import { render, screen } from '@testing-library/react';
import TodoItem from './TodoItem';

test('renders todo item correctly', () => {
 render(<TodoItem id={1} text="Learn TypeScript" completed={false} onToggle={() => {}} onDelete={() => {}} />);
 expect(screen.getByText('Learn TypeScript')).toBeInTheDocument();
});

部署至Web服务器

部署到 Web 服务器的方法有多种，一种常见的方式是使用 Netlify 或 Vercel。以下是使用 Netlify 的步骤：

安装 Netlify CLI
```
npm install -g netlify-cli
```

创建 .netlify 目录

mkdir .netlify
touch .netlify/functions/index.js

构建项目
```
npm run build
```
部署
```
netlify deploy --dir build
```

调试与优化

调试工具如 Chrome DevTools 可以帮助你调试和优化 React 应用。在 Chrome DevTools 中，可以使用以下功能：

检查 DOM 节点
查看 React 组件树
使用 Performance 面板分析应用性能

此外，可以使用 Lighthouse 进行性能分析和优化。Lighthouse 是一个开源的网页分析工具，可以帮助你优化网页的性能和用户体验。

通过以上步骤，你可以创建一个功能齐全的 React + TypeScript 应用，并进行测试和部署。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

繁花如伊

手记
篇

粉丝

40

获赞与收藏

295

关注作者，订阅最新文章

阅读免费教程

TypeScript 入门教程

38个小节 93660 667

后端通用面试教程

41个小节 30958 346

网络编程入门教程

20个小节 12735 240

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空