TypeScript × React で「型 '{ host: Host; }' を型 'Host' に割り当てることはできません」エラーが出たときの対処法

React + TypeScript で開発していると、以下のようなエラーに遭遇することがあります。

型 '{ host: Host; }' を型 'Host' に割り当てることはできません。
プロパティ 'host' は型 'Host' に存在しません。

このエラーが発生する背景と、具体的な解決方法についてまとめました。

エラーの原因

このエラーは、「propsの型定義と実際の使い方が一致していない」ことが原因です。

たとえば以下のようなコードを想定します。

type Host = {
  title: string;
  people_number: number;
};

const HostCard = (props: Host) => {
  return <div>{props.title}</div>;
};

// 呼び出し側
<HostCard host={host} />

このコードでは、HostCard の props の型として Host を使っています。つまり、props に直接 title や people_number を渡す前提になっています。

しかし、実際の呼び出しでは host という名前で一つのオブジェクトを渡しているため、「host プロパティは型 Host に存在しない」と怒られてしまいます。

解決方法

propsを渡すときに host={host} のように名前付きで渡すのであれば、型もそれに合わせて次のようにします。

type Host = {
  title: string;
  people_number: number;
};

type HostCardProps = {
  host: Host;
};

const HostCard = ({ host }: HostCardProps) => {
  return <div>{host.title}</div>;
};

// 呼び出し側
<HostCard host={host} />

このように、propsの構造（ここでは { host: Host }）に合わせた型を定義することで、型の不一致エラーを解消できます。

propsの構造と型定義の関係
下記のように、コンポーネントの呼び出し方法に応じて適切な型定義を行う必要があります。

呼び出し方法 型定義の例

<Component {...host} />	type Props = Host
<Component host={host} />	type Props = { host: Host }

まとめ

props: Host としていると、呼び出し側で host={host} と渡すことはできない

props: { host: Host } という型にすれば、 という使い方ができる

呼び出し方に応じて、propsの構造と型定義を一致させることが重要

TypeScriptの型は強力ですが、propsの構造に敏感なので、意図に合わせて型定義を設計することが大切です。