Warum kann ich beim Drillen in Requisiten bei Verwendung von React und TypeScript keine Typinformationen übergeben?

Question

Ich bin ein langjähriger React-Benutzer, versuche aber derzeit, Typescript zu lernen.

Wenn Sie in React Requisiten über mehrere Ebenen übergeben müssen, warum bleiben dann die von der übergeordneten Komponente der obersten Ebene definierten Typen nicht in den Requisiten? Es scheint frustrierend zu sein, Typen für die übergeordnete Komponente und alle untergeordneten Komponenten, die Variablen übergeben, neu definieren zu müssen.

Zum Beispiel habe ich eine Statusvariable für die übergeordnete Komponente definiert, ihren Typ hinzugefügt und ihn dann an die untergeordnete Komponente übergeben. In den Requisiten der untergeordneten Komponente erhalte ich die Fehlermeldung: Binding element 'var name' implicitly has an 'any' type. Also muss ich entweder den Typ auf der untergeordneten Komponente neu definieren oder den Typ exportieren und in die untergeordnete Komponente importieren.

Sieht nach einer Menge zusätzlicher Arbeit aus. Habe ich etwas falsch gemacht?

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} />;
};

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