为什么在使用React和TypeScript时，钻取道具时无法传递类型信息？

Question

我是一个长期使用React的用户，但目前正在尝试学习Typescript。

在React中，当你需要在几个层级中传递props时，为什么顶级父组件定义的类型不会保留在props中呢？不得不在父组件和所有传递变量的子组件上重新定义类型，这似乎很令人沮丧。

例如，我在父组件上定义了一个State变量并添加了它的类型，然后将其传递给子组件。在子组件的props中，我会得到一个错误提示：Binding element 'var name' implicitly has an 'any' type. 所以我要么需要在子组件上重新定义类型，要么将类型导出并在子组件中导入。

看起来需要做很多额外的工作。我做错了什么吗？

Answer 1

状态类型与属性类型有什么关系？两者之间没有隐式关系，因此需要在两个地方都定义。

如果组件是独立的，可以在任何父组件中使用，因此它无法从任何特定父状态中获取信息。

将类型集中在它们自己的模块中是相当常见的...

// types.ts

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

export type { User };

// Child.tsx

import type { User } from "./types";

interface ChildProps {
  user: User; // 定义属性类型
}

const Child = ({ user }: ChildProps) => {
  return <p>你好，{user.name}</p>;
}

export default Child;

// Parent.tsx

import type { User } from "./types";
import Child from "./child";

const Parent = () => {
  // 在状态中使用 User 类型
  const [user, setUser] = useState<User>({ id: 1, name: "Joe" });

  return <Child user={user} />;
};

请注意，组件的属性是其合约的一部分。父组件无法在不提供满足定义类型的属性值的情况下使用子组件。