React 和 TypeScript 联合使用,React 提供了一些内置类型

时间：2024-02-22 19:09:59

在 React 和 TypeScript 联合使用时，React 提供了一些内置类型来帮助你定义组件的属性（props）、状态（state）和其他常见的模式。以下是一些详细的内置类型说明：

常用的 React 类型

  1. React.FC / React.FunctionComponent

    • 用于定义函数组件的类型。
    • 它包含 children 属性，即使你没有显式地在你的类型定义中声明它们。
    • 例子:
      interface MyComponentProps {
  title: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ title }) => (
  <div>{title}</div>
);

  2. React.Component / React.PureComponent

    • 用于定义类组件的类型。
    • React.Component<Props, State> 接受两个泛型参数，第一个是 props 的类型，第二个是 state 的类型。
    • React.PureComponent 类似于 React.Component，但它通过浅比较 props 和 state 来帮助避免不必要的渲染。
    • 例子:
      interface MyComponentProps { /* ... */ }
interface MyComponentState { /* ... */ }

class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
  /* ... */
}

  3. React.ReactNode

    • 表示任何可以被渲染的内容，包括 JSX 元素、字符串、数字、null、布尔值等。
    • 例子:
      const content: React.ReactNode = 'This is a text node';
const element: React.ReactNode = <div>{content}</div>;

  4. React.ReactElement

    • 表示一个 JSX 元素。
    • 通常在渲染函数中返回 JSX 时使用。
    • 例子:
      const element: React.ReactElement = <div>Hello World</div>;

  5. React.CSSProperties

    • 用于定义传递给 style 属性的对象类型。
    • 例子:
      const style: React.CSSProperties = { color: 'red', fontSize: 20 };

  6. React.ReactEventHandler

    • 用于定义处理事件的函数类型，如点击、改变等。
    • 例子:
      const handleClick: React.ReactEventHandler<HTMLButtonElement> = (event) => {
  // ...
};

  7. React.Ref

    • 用于定义引用类型，可以引用 DOM 元素或类组件的实例。
    • 例子:
      const myRef = React.useRef<HTMLDivElement>(null);

事件处理相关类型

  1. React.ChangeEvent

    • 用于 onChange 事件处理器中的事件对象。
    • 例子:
      const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  console.log(event.currentTarget.value);
};

  2. React.FormEvent

    • 用于表单事件，如提交表单。
    • 例子:
      const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  // ...
};

高级类型工具

  1. React.ComponentProps

    • 用于获取组件的 props 类型。
    • 例子:
      type MyComponentProps = React.ComponentProps<typeof MyComponent>;

  2. React.ComponentPropsWithRef

    • 类似于 React.ComponentProps，但也包括 ref 属性。
    • 例子:
      type MyComponentProps = React.ComponentPropsWithRef<typeof MyComponent>;

  3. React.ComponentPropsWithoutRef

    • 类似于 React.ComponentProps，但不包括 ref 属性。
    • 例子:
      type MyComponentProps = React.ComponentPropsWithoutRef<typeof MyComponent>;

使用这些内置类型，你可以为你的 React 应用创建精确的类型定义，这样不仅可以提高代码的可读性和可维护性，还能在编写代码时获得更好的类型检查和自动完成功能。

相关文章