為什麼在使用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} />;
};

請注意，元件的屬性是其合約的一部分。父元件無法在不提供滿足定義類型的屬性值的情況下使用子元件。