Reactの関数コンポーネントに渡される引数がオブジェクトの分割代入となっているときのTypescriptでの型定義について

Question

freeCodeCampのHow to build a movie search app using React HooksをTypeScriptを用いて行っているのですが、
下記コードの{movie}に対する適切なinterface宣言で悩んでいます。
movieがオブジェクトとして渡されているので合っている自信がないため教えていただきたいです。

import React from "react";

const DEFAULT_PLACEHOLDER_IMAGE =
  "https://m.media-amazon.com/images/M/MV5BMTczNTI2ODUwOF5BMl5BanBnXkFtZTcwMTU0NTIzMw@@._V1_SX300.jpg";

const Movie = ({ movie }) => {
  const poster =
    movie.Poster === "N/A" ? DEFAULT_PLACEHOLDER_IMAGE : movie.Poster;
  return (
    <div className="movie">
      <h2>{movie.Title}</h2>
      <div>
        <img
          width="200"
          alt={`The movie titled: ${movie.Title}`}
          src={poster}
        />
      </div>
      <p>({movie.Year})</p>
    </div>
  );
};


export default Movie;

interfaceも含めて自分でTypeScriptのエラーが出ないように書き換えたコードも載せておきます。

import React from 'react';

const DEFAULT_PLACEHOLDER_IMAGE = 'https://m.media-amazon.com/images/M/MV5BMTczNTI2ODUwOF5BMl5BanBnXkFtZTcwMTU0NTIzMw@@._V1_SX300.jpg';

export interface MovieObj {
  Poster: string,
  Title: string,
  Year: number,
}

const Movie = (movie: MovieObj) => {
  const poster = movie.Poster === 'N/A' ? DEFAULT_PLACEHOLDER_IMAGE : movie.Poster;

  return (
    <div className="movie">
      <h2>{movie.Title}</h2>
      <div>
        <img
          width="200"
          src={poster}
          alt={`The movie titled: ${movie.Title}`}
        />
      </div>
      <p>({movie.Year})</p>
    </div>
  );
};

export default Movie;

環境は

react: 16.12.0
TypeScript: 3.7.5

Answer 1

結論から言うと、

const Movie = (movie: MovieObj) => {

の行を

const Movie: React.FC<{ movie: MovieObj }> = ({ movie }) => {

とするのが良いと思います。

---

元の JavaScript コードでは

const Movie = ({ movie }) => {

となってますが、この { movie } という引数は オブジェクトの分割代入というものです。

ご質問の TypeScript コードでは {} を削除してしまったので、Movie コンポーネントの引数をまるごと movie で受け取ることになり、使う側でエラーになっていると思います。

  // const Movie = ({ movie }) => { ... } の使い方
  const movie = {
    Poster: "...",
    Title: "Iron Man",
    Year: 2008
  };
  return (
    <Movie movie={movie} />
  );

  // const Movie = (movie: MovieObj) => { ... } の使い方
  return (
    <Movie Poster="..." Title="Iron Man" Year={2008} />
  );

また、TypeScript で分割代入の引数に型をつける場合、単純に

const Movie = ({ movie: MovieObj }) => {

とするとエラーになってしまうので、

const Movie = ({ movie }: { movie: MovieObj }) => {

または

const Movie: React.FC<{ movie: MovieObj }> = ({ movie }) => {

とする必要があります。後者は戻り値にも型がつくのでお勧めです。

Comments

[yaaasuuu]

素早い回答ありがとうございます。とても助かりました！

仰る通りで呼び出し側ではエラーが出て、movieのメンバを直接渡さなければならなくなっていました^^;
分割代入、あらためて勉強しなおします。ありがとうございました！

[hoshi-takanori]

分割代入を使わずに

```JavaScript
const Movie = (props) => {
　let movie = props.movie;
```

```TypeScript
const Movie = (props: { movie: MovieObj }) => {
　let movie = props.movie;
```

としてもいいんですけど、分割代入の方が便利なんですよね。