【TypeScript】プロパティ 'hoge' は型 'Fuga' に存在しませんの解消方法

はじめに

現在Udemyのこちらの講座を受けています。現在TypeScriptを学習しているのですが、表題のエラーが発生しました。こちらの解決策について説明します。

問題点

こちらが、私が書いていたコードです。
user.emailとuser.addressのところにエラーが出ていました。

import { FC } from "react";
import { UserProfile } from "../types/userProfile";

type Props = {
  user: UserProfile;
};

export const UserCard: FC<Props> = (props) => {
  const { user } = props;
  return ( 
    <div> 
      <dl>
        <dt>名前</dt>
        <dd>{user.name}</dd>
        <dt>メール</dt>
        <dd>{user.email}</dd> 
        <dt>住所</dt>
        <dd>{user.address}</dd> 
      </dl>
    </div>
  );
};

export type UserProfile = {
  id: number;
  name: string;
  email: string;
  address: string;
};

一見何も問題なく設定できているように見えますが、型の設定の仕方を間違えていました。なぜかアロー関数になっていました。

//元のコード
export type UserProfile = () => { 
  id: number;
  name: string;
  email: string;
  address: string;
};

//修正したコード
export type UserProfile = {
  id: number;
  name: string;
  email: string;
  address: string;
};

これで無事にエラーが、解消することが出来ました。

最後に

今回はかなり初歩的なところでつまづいてしまいました。引き続きTypeScriptの学習を頑張っていきます。