使用 TypeScript 对象传递 props

在 React 中，组件之间通过 props 来传递数据，父组件通过 props 将数据传递给子组件。对于 TypeScript 开发者来说，使用 TypeScript 对象传递 props 可以提供更好的类型安全。

传递 props 的方式

使用 interface 定义 props

在 React 中，我们通常使用 interface 来定义组件的 props 类型，然后在组件的属性中使用这个 interface：

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

function MyComponent(props: Props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>{props.age}</p>
    </div>
  );
}

使用 type 定义 props

也可以使用 type 来定义 props：

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

function MyComponent(props: Props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>{props.age}</p>
    </div>
  );
}

这两种方式都可以保证发送给组件的 props 符合定义的类型。现在，如果我们修改了 name 的类型，TypeScript 会给我们发出警告：

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

function MyComponent(props: Props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>{props.age}</p>
    </div>
  );
}

// 报错：类型“number”的参数不能赋给类型“string”的参数
<MyComponent name={34} age={18} />

嵌套 props

有时组件的 props 是一个对象，其中包含了其他的属性。我们可以使用 interface 或 type 来定义这种复杂的 props 类型：

interface SubProps {
  title: string;
  content: string;
}

interface Props {
  name: string;
  age: number;
  subProps: SubProps;
}

function MyComponent(props: Props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>{props.age}</p>
      <h2>{props.subProps.title}</h2>
      <p>{props.subProps.content}</p>
    </div>
  );
}

对于更加复杂的 props 类型，我们也可以使用嵌套的 interface 或 type 来定义。

children 属性

在 React 中，组件可以通过 props.children 访问组件子元素的内容。我们可以使用 ReactNode 类型来声明 children 属性：

interface Props {
  children: React.ReactNode;
}

function MyComponent(props: Props) {
  return (
    <div>
      {props.children}
    </div>
  );
}

<MyComponent>
  <h1>hello</h1>
  <p>world</p>
</MyComponent>

总结

使用 TypeScript 对象传递 props 给组件可以提供更好的类型安全。我们可以使用 interface 或 type 来定义 props 类型，支持嵌套属性和 children 属性。