Reactで名前と年齢のデータをコンポーネントに受け渡したいとします。

App.tsx

import React from 'react';
import Person from './components/Person';

const persons = [{name: "田中", age: 32},{name:"佐藤", age: 26}]

function App() {
  return (
    <ul>
      {persons.map((person) => {
        return <Person person={person}/>
      })}
    </ul>
  );
}

components/Person.tsx

import React from 'react';

const Person = ({ person }) => {
  return (
    <li>
      {person.name}さん{person.age}歳
    </li>
  );
};

export default Person;

このコードでは、コンポーネントのpersonで『Binding element 'person' implicitly has an 'any' type.』というエラーが発生します。

image2

Person.tsxの型をany型にしてみます。

const Person = ({ person }:any) => {

image3

エラーが解消されました。

しかしこのままでは、意図しないデータ型もエラーになりません。

意図しないデータはエラーになるように、personの型を指定しましょう。

まずは、Person.tsxにPersonの型を作成します。

interface Props {
  person: {
    name: string;
    age: number;
  }
}

関数名の後に、React.FC型を追加し、React.FC型にPropsを指定します。

interface Props {
  person: {
    name: string;
    age: number;
  }
}

const Person: React.FC<Props> = ({ person }) => {
  return (
    <li>
      {person.name}さん{person.age}歳
    </li>
  );
};

export default Person;

画面を確認すると、

image4

エラーは発生しておりません。

また、personの型も確認してみると、

image5

型が定義されていました。

ちなみに、personsのageをstring型にしてみると、

image6

『Type '{ name: string; age: string; } | { name: string; age: number; }' is not assignable to type '{ name: string; age: number; }'.』といって、ageにstring型が入っているというエラーが発生しました。

ブログ一覧