特定のキーを基に、値を返す関数を作成しました。

type Person = {
  lastName: string
  firstName: string
  age: number
  address: string
  email: string
  tel: string
}

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

  const profile = (person: Person, key: "lastName" | "age") => {
    const value = person[key]
    return value
  }

  return (
    <>
      <p>
        {profile(tanaka, "lastName")}さんは、{profile(tanaka, "age")}歳です。
      </p>
    </>
  )
}

export default App

image2

無事、意図した内容が表示されているのですが、例えば key の一覧にないキーを使用する場合、コンパイルエラーが発生します。

return (
  <>
    <p>
      {profile(tanaka, "lastName")}
      {profile(tanaka, "firstName")}さんは、{profile(tanaka, "age")}歳です。
    </p>
  </>
)

image3

この場合、keyof を使用し、key の型を指定します。

const profile = (person: Person, key: keyof Person) => {
  const value = person[key]
  return value
}

これで、エラーが解除されました。

image4

また、ジェネリクスを使用することで、どのオブジェクトにも対応することも可能です。

const profile = <Obj, Key extends keyof Obj>(person: Obj, key: Key) => {
  const value = person[key]
  return value
}

image5

エラーが発生せず、意図した内容が表示されました。

ブログ一覧