typescript如何简化React.componentPropsWithoutRef

TypeScript 如何简化 React.ComponentPropsWithoutRef

基础概念

在 React 中，组件的 props 通常是通过接口（interface）或类型别名（type alias）来定义的。ComponentPropsWithoutRef 是一个 TypeScript 的内置类型工具，它可以帮助我们提取一个 React 组件的 props 类型，但不包括 ref 属性。

类型

ComponentPropsWithoutRef 是 TypeScript 的一个内置类型，定义如下：

type ComponentPropsWithoutRef<T> = Omit<React.ComponentPropsWithRef<T>, 'ref'>;

其中，Omit 是 TypeScript 的一个内置类型工具，用于从一个类型中移除指定的属性。

应用场景

当你需要定义一个组件的 props 类型，并且不希望包含 ref 属性时，可以使用 ComponentPropsWithoutRef。

示例代码

假设我们有一个简单的 React 组件 MyComponent，其 props 定义如下：

import React from 'react';

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

const MyComponent: React.FC<MyComponentProps> = ({ name, age }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

我们可以使用 ComponentPropsWithoutRef 来提取 MyComponent 的 props 类型，但不包括 ref 属性：

import React from 'react';

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

const MyComponent: React.FC<MyComponentProps> = ({ name, age }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

type MyComponentPropsWithoutRef = React.ComponentPropsWithoutRef<typeof MyComponent>;

// 使用 MyComponentPropsWithoutRef 类型
const props: MyComponentPropsWithoutRef = {
  name: 'John',
  age: 30,
};