TypeScript在React中的简单应用

前端

2023-09-02 10:33:03

在 React 中使用 TypeScript: 一个综合指南

TypeScript 简介

TypeScript 是一种流行的编程语言，它扩展了 JavaScript，并为其添加了类型系统和一些额外的特性。TypeScript 代码更易于阅读、理解和维护。

为何在 React 中使用 TypeScript？

更强的类型检查： TypeScript 的类型检查功能可帮助识别代码中的错误，并确保应用程序的行为符合预期。
更好的代码可读性： 类型注解使代码更具可读性和自解释性，即使对于不熟悉代码的人来说也是如此。
更少的错误： 类型检查功能有助于在编译时捕获错误，从而减少运行时错误。
更好的 IDE 集成： 许多集成开发环境 (IDE) 提供了 TypeScript 支持，例如代码补全和类型提示。

创建新的 React + TypeScript 项目

1. 安装 create-react-app

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

2. 安装 TypeScript 和 @types/react

npm install typescript @types/react

3. 创建 tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

4. 编写 TypeScript 组件

import React from "react";

const MyComponent = () => {
  return (
    <div>
      <h1>Hello World!</h1>
    </div>
  );
};

export default MyComponent;

5. 创建类型

export interface MyComponentProps {
  name: string;
}

6. 使用接口

import React, { PropsWithChildren } from "react";

interface MyComponentProps extends PropsWithChildren {
  name: string;
}

const MyComponent = (props: MyComponentProps) => {
  return (
    <div>
      <h1>Hello {props.name}!</h1>
    </div>
  );
};

export default MyComponent;