【React】オブジェクトを子コンポーネントに渡すときのTypeScriptの型を指定する

概要

Reactで子コンポーネントにデータを渡す時にオブジェクトの場合は子コンポーネントで型を指定する場合はその構造も再現しないといけないらしい。

コード

親コンポーネント

例えば、親コンポーネントで下記のようなresultsはsetResultsで複数の値を持つプロパティ。
このプロパティの型はResultsStateTypeと指定しています。
そしてresultsプロパティはResultsという子コンポーネントに渡しています。

App

type ResultsStateType = {
  country: string;
  cityName: string;
};
function App() {
const [results, setResults] = useState<ResultsStateType>({
    country: "",
    cityName: ""
  });
}

return (
    <div className="App">
      <Results results={results} />
    </div>
  );

子コンポーネントでの型指定

親コンポーネントから受け取ったプロパティは子コンポーネントでも型を指定しますが、親とは少し型を指定する方法が違う。

親コンポーネントから受け取ったプロパティはreslutsという名前で受け取ってしますので、同じ構造にしてあげる必要があるようです。

Resutls

type ResultsPropsType = {
    results:{
        country: string;
        cityName: string;
    }
  };
  
  const Results=(props:ResultsPropsType)=>{
    return(
        <h1>子コンポーネント</h1>
    )
}

export default Results