【ReactJs 中使用 TSX】基本、组件、方法、实现类的类型标注

组件事件

Click实现

Button 组件

import React from 'react';

type ButtonClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => void;

interface ButtonProps {
  onClick: ButtonClickHandler;
}

const Button: React.FC<ButtonProps> = ({ onClick, children }) => {
  return <button onClick={onClick}>{children}</button>;
};

export default Button;

用到 Button 组件的父组件

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

interface MyComponentProps {
  // ...
}

const MyComponent: React.FC<MyComponentProps> = () => {
  const handleButtonClick: ButtonClickHandler = (event) => {
    // 处理按钮点击事件...
  };

  return (
    <div>
      <h1>My Component</h1>
      <Button onClick={handleButtonClick}>Click me</Button>
    </div>
  );
};

ButtonClickHandler 是类型的名称，而 (event: React.MouseEvent<HTMLButtonElement>) => void 描述了这个类型的结构

具体来说，(event: React.MouseEvent<HTMLButtonElement>) 定义了事件处理程序的参数类型，表示它接受一个 React 提供的 MouseEvent 事件对象，并且这个事件是由 HTMLButtonElement 元素触发的。而 => void 表示事件处理程序不会返回任何值

Change实现

Input 组件

import React from 'react';

type InputChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => void;

interface InputProps {
  onChange: InputChangeHandler;
}

const Input: React.FC<InputProps> = ({ onChange, value }) => {
  return <input type="text" onChange={onChange} value={value} />;
};

export default Input;

用到 Input 组件的父组件

import React from 'react';

interface MyComponentProps {
  // ...
}

const MyComponent: React.FC<MyComponentProps> = () => {
  const handleInputChange: InputChangeHandler = (event) => {
    // 处理输入框变化事件...
  };

  return (
    <div>
      <h1>My Component</h1>
      <Input onChange={handleInputChange} />
    </div>
  );
};

InputChangeHandler 是一个类型别名，用于定义一个函数类型，该函数接受一个 React.ChangeEvent<HTMLInputElement> 参数，并且没有返回值 (void)

具体来说，React.ChangeEvent<HTMLInputElement> 是一个特定的类型，它表示一个事件对象，该事件对象是由 React 库定义的，并且专门用于表示输入元素的变化事件（比如 input、textarea 等）, 其中的 <HTMLInputElement> 表示这个事件对象是针对 HTML 中的 input 元素的变化

另外事件

除了以上两个 React 的事件，还有

• React.KeyboardEvent<HTMLInputElement>：处理 <input> 元素的键盘事件.
• React.FormEvent<HTMLFormElement>：处理 <form> 元素的表单提交事件.
• React.FocusEvent<HTMLInputElement>：处理 <input> 元素的获取焦点和失去焦点事件.
• React.ChangeEvent<HTMLSelectElement>：处理 <select> 元素的改变事件.
• React.MouseEvent<HTMLAnchorElement>：处理 <a> 元素的鼠标事件.
• React.ClipboardEvent<HTMLInputElement>：处理 <input> 元素的剪贴板事件.
• React.WheelEvent<HTMLDivElement>：处理 <div> 元素的滚动鼠标滚轮事件.
• React.TouchEvent<HTMLDivElement>：处理触摸事件，适用于任何 HTML 元素.
• React.DragEvent<HTMLElement>：处理拖拽事件，适用于任何 HTML 元素.

基本类型标注

可以使用 TypeScript 中的基本类型，比如 string、number、boolean 等来标注 JSX 元素或组件的属性

interface Props {
  name: string;
  age: number;
  isStudent: boolean;
}

自定义类型标注

可以使用自定义的接口或类型来标注 JSX 元素或组件的属性

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

interface Props {
  user: User;
}

类型断言

可以使用类型断言来告诉 TypeScript 某个表达式的类型，这在处理特定类型的 JSX 元素时非常有用

const element = <input value="hello" /> as HTMLInputElement;

泛型标注

可以使用泛型来标注组件的属性，以适应不同类型的数据
<T> 是一个泛型参数的占位符，可以用于表示任意类型

interface Props<T> {
  data: T;
}

// 另一种函数写法
//function MyComponent<T>(props: Props<T>) {

//}

const MyComponent = <T extends {}>(props: Props<T>) => {

}

实现 interface

方法形参实现

interface Person {
  name: string;
  age: number;
  sayHello: () => void;
}

function Greeting(props: Person) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>You are {props.age} years old.</p>
    </div>
  );
}

传递属性给组件

const person: Person = {
  name: "Alice",
  age: 26,
  sayHello: () => {
    console.log("Hello!");
  }
};

Greeting(person);

interface也可以用作泛型标注

interface Container<T> {
  value: T;
}
// 组件
function MyComponent<T>(props: Container<T>) {
  return <div>{props.value}</div>;
}
// 将接口中的 T 转换为 string 类型
const container: Container<string> = {
  value: "Hello, World!"
};
// 使用组件
<MyComponent value={container.value} />;

定义CSS对象

const Container: React.CSSProperties = {
  color: 'red',
  fontSize: '16px',
  fontWeight: 'bold'
};

<document className={Container}>11111111</document>