首页手记 React+TS入门指南：从零开始构建你的第一个Typ...

React+TS入门指南：从零开始构建你的第一个TypeScript React应用

标签：

React Typescript

本文详细介绍了如何使用React和TypeScript创建前端应用，涵盖了从项目初始化到组件定义、路由处理、调试和代码维护的全过程。通过结合TypeScript，可以提升代码的安全性和可维护性，同时利用React的组件化思想构建复杂的用户界面。文章不仅提供了实际操作的示例和配置方法，还包括了项目实例，帮助读者深入理解并掌握React+TS的开发技巧。

React+TS基础介绍

什么是React

React 是一个由 Facebook 开发并维护的开源前端库，用于构建用户界面。React 的核心思想是使用组件的方式构建用户界面，每个组件都是独立的、可复用的 UI 代码片段。通过组合和嵌套这些组件，可以构建复杂的 UI 结构。React 支持单向数据流和虚拟 DOM，使得应用的渲染更加高效，同时也支持 JSX 语法，使得代码更加接近 HTML，易于阅读和编写。

什么是TypeScript

TypeScript 是由 Microsoft 开发的一种开源编程语言，它是 JavaScript 的一个超集。TypeScript 添加了静态类型检查、类、接口、泛型等特性，使得开发者可以在 JavaScript 的基础上编写更安全、更易于维护的代码。TypeScript 代码在编译时会转换成 JavaScript 代码，供浏览器执行。

React与TypeScript结合的优势

React 与 TypeScript 结合可以带来以下优势：

类型检查：利用 TypeScript 的类型系统，可以在编译阶段发现潜在的类型错误，提高代码质量。
类型推断：类型推断功能可以自动推断出代码中的类型，减少手动写类型声明的工作量。
组件属性类型定义：为组件的属性定义类型，使得组件的使用更加安全，减少因类型错误导致的运行时错误。
更好的代码工具支持：许多 IDE 和代码编辑器对 TypeScript 有很好的支持，可以提供代码补全、导航等功能，提高开发效率。

安装必要的工具和依赖

要开始使用 React 和 TypeScript，需要安装以下工具和依赖：

Node.js：React 和 TypeScript 都需要 Node.js 环境来运行。确保你已经安装了最新版本的 Node.js。
npm 或 yarn：用于管理项目依赖的工具。推荐使用 yarn，因为它更容易处理依赖版本问题。
Create React App：用于快速启动 React 项目。可以通过以下命令安装：
```
npm install -g create-react-app
```
TypeScript：用于编写 TypeScript 代码。可以通过以下命令安装：
```
npm install --save-dev typescript
```

创建第一个React+TS项目

使用Create React App初始化项目

使用 Create React App 可以快速初始化一个 React 项目。以下步骤可以帮助你创建一个 React+TypeScript 项目：

先安装全局的 create-react-app 命令：
```
npm install -g create-react-app
```
使用 create-react-app 创建一个新的 React 项目，并指定使用 TypeScript：
```
npx create-react-app my-app --template typescript
cd my-app
```
运行项目，查看是否一切正常：
```
npm start
```
这将启动开发服务器，并在浏览器中打开默认的 React 应用。

项目结构示例

以下是项目的基本结构：

my-app/
├── node_modules/
├── public/
│   ├── index.html
├── src/
│   ├── App.tsx
│   ├── index.tsx
│   ├── logo.svg
│   ├── serviceWorker.ts
│   ├── setupProxy.ts
├── tsconfig.json
├── package.json
├── .gitignore

配置TypeScript

项目创建后，需要进一步配置 TypeScript 以确保项目能够正确编译和运行：

tsconfig.json：这个文件位于项目根目录下，用于设置 TypeScript 编译选项。默认配置已经适合大多数情况，但你可以根据需要进行修改。以下是默认配置示例：

{
 "compilerOptions": {
   "target": "ES2015",
   "module": "ESNext",
   "strict": true,
   "jsx": "react",
   "importHelpers": true,
   "moduleResolution": "node",
   "skipLibCheck": true,
   "esModuleInterop": true,
   "allowSyntheticDefaultImports": true,
   "sourceMap": true,
   "baseUrl": ".",
   "allowJs": true,
   "outDir": "./dist/",
   "rootDir": "./src",
   "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
   "paths": {
     "@/*": ["src/*"]
   },
   "experimentalDecorators": true
 },
 "include": ["src"],
 "exclude": ["node_modules", "dist"]
}

这些配置项的作用包括设置编译目标、模块类型、严格模式、JSX 语法、模块解析方式等。

安装 TypeScript 依赖：确保项目中有 TypeScript 的依赖。通过以下命令安装：
```
npm install --save-dev typescript
```

编译和运行项目

项目配置完成后，可以通过以下步骤编译和运行项目：

编译项目：
```
npm run build
```
这将编译项目并生成优化的生产代码，放在 dist 目录下。
运行项目：
```
npm start
```
这将启动开发服务器，用于开发阶段实时编译代码。

React组件与TypeScript类型

定义基础React组件

React 组件可以分为函数组件和 Class 组件两种类型。以下是定义一个简单的函数组件的示例：

import React from 'react';

const HelloWorld: React.FC = () => {
  return <h1>Hello, World!</h1>;
};

export default HelloWorld;

使用TypeScript接口定义组件属性（Props）

在 React 中，组件可以接收属性（Props）。这些属性可以是简单的值，也可以是复杂的对象。使用 TypeScript，可以为组件的属性定义接口来确保属性类型的正确性。以下是一个示例：

import React from 'react';

interface Props {
  name: string;
}

const Greeting: React.FC<Props> = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

export default Greeting;
``

#### 使用TypeScript类型定义组件状态（State）
对于 Class 组件，可以使用 TypeScript 来定义组件的状态（State）。状态是组件内部的数据，可以用来控制组件的行为。以下是一个简单的 Class 组件，定义了 `state` 和 `props`：
```tsx
import React, { Component } from 'react';

interface Props {
  initialName: string;
}

interface State {
  name: string;
}

class Greeting extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { name: props.initialName };
  }

  render() {
    return <h1>Hello, {this.state.name}!</h1>;
  }
}

export default Greeting;
``

#### 使用Hooks定义组件状态（State）
对于函数组件，可以使用 TypeScript 来定义组件的状态（State）。以下是一个使用 `useState` Hook 的示例：
```tsx
import React, { useState } from 'react';

interface Props {
  initialName: string;
}

const Greeting: React.FC<Props> = (props) => {
  const [name, setName] = useState(props.initialName);

  return <h1>Hello, {name}!</h1>;
};

export default Greeting;
``

#### 使用TypeScript接口推断Props类型
使用 TypeScript 接口可以推断组件属性的类型。以下是一个使用默认 Props 的示例：
```tsx
import React from 'react';

interface Props {
  name: string;
}

const Greeting: React.FC<Props> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;
``

### 函数组件与Class组件

#### 函数组件的TypeScript实现
函数组件是一种更简洁、更现代的组件定义方式，它没有内部状态，更适合处理只接收属性并返回 UI 的简单逻辑。以下是一个使用 TypeScript 编写的函数组件的示例：
```tsx
import React from 'react';

interface Props {
  name: string;
}

const Greeting: React.FC<Props> = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

export default Greeting;

Class组件的TypeScript实现

Class 组件可以处理复杂的逻辑，包括状态管理。Class 组件需要定义一个构造函数来初始化状态，以下是一个使用 TypeScript 编写的 Class 组件的示例：

import React, { Component } from 'react';

interface Props {
  initialName: string;
}

interface State {
  name: string;
}

class Greeting extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { name: props.initialName };
  }

  render() {
    return <h1>Hello, {this.state.name}!</h1>;
  }
}

export default Greeting;

Class组件的生命周期方法

Class 组件可以使用生命周期方法来管理组件的生命周期。以下是一个使用生命周期方法的示例：

import React, { Component } from 'react';

interface Props {
  initialName: string;
}

interface State {
  name: string;
}

class Greeting extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { name: props.initialName };
  }

  componentDidMount() {
    console.log('Component did mount');
  }

  componentDidUpdate(prevProps: Props, prevState: State) {
    console.log('Component did update');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return <h1>Hello, {this.state.name}!</h1>;
  }
}

export default Greeting;

函数组件与Class组件的区别和选择

状态管理：Class 组件可以管理内部状态，而函数组件通常更简洁，适合处理只接收属性并返回 UI 的逻辑。
生命周期方法：Class 组件可以使用生命周期方法来管理组件的生命周期，而函数组件需要借助 Hook 来实现类似的功能。
性能：函数组件由于没有实例化，通常比 Class 组件性能更好。
选择：一般推荐使用函数组件，除非有明确需要管理状态或使用生命周期方法。
React Hooks：React Hooks 如 useState 和 useEffect 可以将 Class 组件中的一些特性带到函数组件中，使得函数组件更加灵活。

路由与导航

使用React Router实现多页面应用

React Router 是一个用于管理 React 应用中路由的库。它可以让你在应用的不同页面间导航，并控制特定路由下的组件显示。以下是一个使用 React Router 定义多页面应用的示例：

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Contact = () => <h2>Contact</h2>;

const App: React.FC = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </div>
    </Router>
  );
};

export default App;
``

#### 定义路由和导航链接
在上面的示例中，定义了三个路由：
- `Home` 对应根路径 `/`
- `About` 对应路径 `/about`
- `Contact` 对应路径 `/contact`

每个路由都使用 `Link` 组件来创建导航链接。当用户点击这些链接时，浏览器地址栏会改变，同时对应的组件会被渲染。

#### 嵌套路由示例
以下是一个嵌套路由的示例：
```tsx
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link, Redirect, RouteComponentProps } from 'react-router-dom';

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Contact = () => <h2>Contact</h2>;
const ContactDetails = () => <h2>Contact Details</h2>;

const App: React.FC = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
          <Route path="/contact/:id" component={ContactDetails} />
          <Redirect to="/" />
        </Switch>
      </div>
    </Router>
  );
};

export default App;
``

#### 动态路由示例
以下是一个动态路由的示例：
```tsx
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link, useParams } from 'react-router-dom';

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Contact = () => <h2>Contact</h2>;
const ContactDetails = () => {
  const { id } = useParams<{ id: string }>();
  return <h2>Contact Details {id}</h2>;
};

const App: React.FC = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
          <Route path="/contact/:id" component={ContactDetails} />
          <Redirect to="/" />
        </Switch>
      </div>
    </Router>
  );
};

export default App;
``

#### 路由的TypeScript类型定义
路由组件可以使用 TypeScript 类型定义来确保组件属性的正确性。以下是一个定义路由组件属性的示例：
```tsx
import React from 'react';
import { RouteComponentProps } from 'react-router-dom';

interface Props extends RouteComponentProps {}

const About: React.FC<Props> = (props) => {
  return <h2>About</h2>;
};

export default About;

错误处理与调试

常见错误及解决方法

在 React+TypeScript 项目中，常见的错误包括：

类型不匹配：由于 TypeScript 的类型检查，可能会遇到类型不匹配的错误。
未定义的属性：如果在组件中使用了未定义的属性，TypeScript 会提示错误。
生命周期方法问题：如果使用 Class 组件，可能会遇到生命周期方法相关的错误。例如，未正确使用 this 关键字或生命周期方法没有正确实现。

错误示例及解决方法

以下是一个常见的类型不匹配错误示例：

interface Props {
  name: string;
}

const Greeting: React.FC<Props> = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

// 错误示例
const GreetingError: React.FC<Props> = (props) => {
  return <h1>Hello, {props.age}!</h1>; // 错误：age 不是 Props 中定义的属性
};

使用VS Code调试React+TS应用

VS Code 提供了强大的调试功能，可以用来调试 React+TypeScript 应用。以下步骤可以帮助你设置调试配置：

打开调试面板：
- 在 VS Code 中，点击左侧的 "调试" 按钮，或按快捷键 Ctrl+Shift+D。
创建调试配置：
- 点击 "创建 launch.json 文件"，选择 "React.js" 或 "React Native.js"，根据你的项目类型选择。

编辑 launch.json：

在 launch.json 文件中设置调试配置，例如：

{
"version": "0.2.0",
"configurations": [
 {
   "name": "Debug React App",
   "type": "chrome",
   "request": "launch",
   "url": "http://localhost:3000",
   "webRoot": "${workspaceFolder}/src",
   "sourceMapPathOverrides": {
     "webpack:///src/*": "${webRoot}/*"
   }
 }
]
}

启动调试：
- 设置断点，然后点击 "开始调试" 按钮，或按快捷键 F5。

代码格式化与Linting

为了保持代码的一致性和可读性，通常需要使用代码格式化和 Linting 工具。以下是一些常用的工具和配置：

Prettier：一个代码格式化工具，可以自动格式化代码。

安装：
```
npm install --save-dev prettier
```

配置 .prettierrc 文件：

{
"singleQuote": true,
"trailingComma": "es5",
"printWidth": 80,
"tabWidth": 2,
"semi": false
}

在项目中运行 Prettier：
```
npx prettier --write .
```

ESLint：一个静态代码分析工具，可以检查代码中可能存在的错误。

安装：
```
npm install --save-dev eslint
```

配置 .eslintrc.json 文件：

{
"env": {
 "browser": true,
 "es6": true
},
"extends": "react-app",
"rules": {
 "no-unused-vars": "warn",
 "no-console": "warn"
}
}

在项目中运行 ESLint：
```
npx eslint .
```

通过上述步骤，你可以确保代码的格式一致、符合规范，并及时发现可能的错误。

总结

通过本篇文章，你已经了解了如何使用 React 和 TypeScript 创建一个现代的前端应用。从基础概念到实际操作，我们详细介绍了如何初始化项目、定义组件、处理路由、调试和维护代码。希望这些内容能帮助你更好地理解和使用 React+TypeScript，构建更加健壮和高效的前端应用。如果你有任何疑问或需要进一步的帮助，可以参考慕课网上的相关课程和文档。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

梵蒂冈之花

手记
篇

粉丝

30

获赞与收藏

168

关注作者，订阅最新文章

阅读免费教程

TypeScript 入门教程

38个小节 93486 666

后端通用面试教程

41个小节 30809 345

网络编程入门教程

20个小节 12721 239

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空