プロフィールを基に、テキストが作成されるコードを作成しました。

function App() {
  const tanaka = {
    lastName: "田中",
    firstName: "一郎",
    age: 23,
    address: "埼玉県",
    email: "tanaka@example.com",
    tel: "090-1264-5679"
  };

  const profile = (person)=> {
    return `${person.lastName}さんの年齢は、${person.age}歳です。`;
  };

  return (
    <>
      <p>{profile(tanaka)}</p>
    </>
  );
}

export default App;

この場合、personに『Parameter 'person' implicitly has an 'any' type.』というコンパイルエラーが発生しています。

image2

typeinterfaceで型を指定する方法がありますが、typeofを使って、tanakaオブジェクトの型推論を基に型を作成する方法もあります。

typeoftanakaオブジェクトを指定しましょう。

type Person = typeof tanaka;

const profile = (person: Person)=> {
  return `${person.lastName}さんの年齢は、${person.age}歳です。`;
};

エラーが消え、Person型が作成されました。

image3

ブラウザで確認すると、

image4

意図した内容が表示されました。

ちなみに、新しいオブジェクトを作成してみます。

function App() {
  const tanaka = {
    lastName: "田中",
    firstName: "一郎",
    age: 23,
    address: "埼玉県",
    email: "tanaka@example.com",
    tel: "090-1264-5679"
  };

  type Person = typeof tanaka

  const profile = (person: Person)=> {
    return `${person.lastName}さんの年齢は、${person.age}歳です。`;
  };

  const sato = {
    lastName: "佐藤",
    firstName: "二郎",
    age: 34,
    address: "神奈川県",
    email: "sato@example.com",
    tel: "090-1234-5678",
  };

  return (
    <>
      <p>{profile(sato)}</p>
    </>
  );
}

image5

こちらも無事、意図した内容が表示されました。

ブログ一覧