React中的常用类型

React 中的常用类型

前提说明: 现在，基于 class 组件来讲解 React+TS 的使用。

在不使用 TS 时，可以使用 prop-types 库，为 React 组件提供类型检查。

说明: TS 项目中，推荐使用 TypeScript 实现组件类型校验 (代替 PropTypes)。

不管是 React 还是 Vue，只要是支持 TS 的库，都提供了很多类型，来满足该库对类型的需求。注意:

React 项目是通过 @types/react、@types/react-dom 类型声明包，来提供类型的。
这些包 CRA 已帮我们安装好(react-app-env.d.ts)，直接用即可。

参考资料: React 文档-静态类型检查、[`React

TS 备忘单](React + TS` 备忘单)

React 是组件化开发模式，React 开发主要任务就是写组件，两种组件:函数组件、class 组件

函数组件

函数组件，主要包括以下内容:

组件的类型
组件的属性 (props)
组件属性的默认值 (defaultProps)
事件绑定和事件对象

组件的类型及其属性：

import React, { FC } from 'react';

type Props = { name: string; age?: number };

const Hello: FC<Props> = ({ name, age }) => {
  return (
    <>
      {name}- {age}
    </>
  );
};

<Hello name='jack' />;

实际上，还可以简化为：

type Props = { name: string; age?: number };

const Hello = ({ name, age }: Props) => {
  return (
    <>
      {name}- {age}
    </>
  );
};

组件属性的默认值：

const Hello: FC<Props> = ({ name, age }) => {
  return (
    <>
      {name}- {age}
    </>
  );
};

Hello.defaultProps = {
  age: 18
};

实际上，还可以简化为：

type Props = { name: string; age?: number };

const Hello = ({ name, age = 18 }: Props) => {
  return (
    <>
      {name}- {age}
    </>
  );
};

事件绑定和事件对象

// 按钮
const Btn = () => {
  const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {};
  return <button onClick={onClick}>点击</button>;
};

// 文本框
const Ipt = () => {
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {};
  return <input onChange={onChange}>点击</input>;
};

class 组件

在 TypeScript 中，类（class）中可以使用以下四种访问修饰符来控制类成员（属性和方法）的可见性和访问权限：

public：默认的修饰符，所有类成员都是公共的，可以在类的内部和外部访问。
private：私有成员，只能在类的内部访问，外部无法访问。
protected：受保护成员，类的内部和派生类（继承类）中可以访问，外部无法问。
readonly：只读成员，表示该成员的值在初始化后不能再被修改。

class Person {
  public name: string; // 默认为 public
  private age: number;
  protected address: string;
  readonly id: number;

  constructor(name: string, age: number, address: string, id: number) {
    this.name = name;
    this.age = age;
    this.address = address;
    this.id = id;
  }

  public displayInfo(): void {
    console.log(`Name: ${this.name}, Age: ${this.age}, Address: ${this.address}`);
  }

  private getAge(): number {
    return this.age;
  }

  protected getId(): number {
    return this.id;
  }
}

class Employee extends Person {
  public department: string;

  constructor(name: string, age: number, address: string, id: number, department: string) {
    super(name, age, address, id);
    this.department = department;
  }

  public displayEmployeeInfo(): void {
    console.log(`Name: ${this.name}, Age: ${this.age}, Address: ${this.address}, Department: ${this.department}`);
  }
}

const person = new Person('Alice', 30, '123 Main St', 1);
console.log(person.name); // 可以访问，输出：Alice
console.log(person.age); // 错误，age 是 private，无法访问
console.log(person.address); // 错误，address 是 protected，无法在类外部访问
console.log(person.id); // 可以访问，输出：1

person.displayInfo(); // 可以调用，输出：Name: Alice, Age: 30, Address: 123 Main St
person.getAge(); // 错误，getAge 是 private，无法在类外部调用
person.getId(); // 错误，getId 是 protected，无法在类外部调用

const employee = new Employee('Bob', 25, '456 Broadway', 2, 'HR');
console.log(employee.name); // 可以访问，输出：Bob
console.log(employee.department); // 可以访问，输出：HR

employee.displayEmployeeInfo(); // 可以调用，输出：Name: Bob, Age: 25, Address: 456 Broadway, Department: HR
employee.displayInfo(); // 可以调用，输出：Name: Bob, Age: 25, Address: 456 Broadway

React 中的常用类型​

函数组件​

class 组件​

React 中的常用类型

函数组件

class 组件