Pourquoi ne puis-je pas transmettre d'informations de type lors de l'exploration des accessoires lors de l'utilisation de React et TypeScript ?

Question

Je suis un utilisateur de React de longue date, mais j'essaie actuellement d'apprendre Typescript.

Dans React, lorsque vous devez transmettre des props sur plusieurs niveaux, pourquoi les types définis par le composant parent de niveau supérieur ne restent-ils pas dans les props ? Il semble frustrant de devoir redéfinir les types sur le composant parent et sur tous les composants enfants transmettant des variables.

Par exemple, j'ai défini une variable State sur le composant parent et ajouté son type, puis je l'ai transmis au composant enfant. Dans les accessoires du composant enfant, j'obtiens une erreur disant : Binding element 'var name' implicitly has an 'any' type. Je dois donc soit redéfinir le type sur le composant enfant, soit exporter le type et l'importer dans le composant enfant.

Cela ressemble à beaucoup de travail supplémentaire. Est-ce que j'ai fait quelque chose de mal?

Answer 1

Quelle est la relation entre le type d'état et le type d'attribut ? Il n’y a pas de relation implicite entre les deux, elle doit donc être définie aux deux endroits.

Si le composant est autonome, il peut être utilisé dans n'importe quel composant parent, il ne peut donc pas obtenir d'informations d'un état parent spécifique.

Il est assez courant de regrouper les types dans leur propre module...

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

Veuillez noter que les propriétés d’un composant font partie de son contrat. Un composant parent ne peut pas utiliser un composant enfant sans fournir une valeur de propriété qui satisfait au type défini.