ロゴ

Typescriptでジェネリクス型の変数のプロパティを使用する方法

※本ページはプロモーションが含まれています

Typescriptでジェネリクス型に型付けした変数のプロパティを使う方法

Typescriptでジェネリクス型に型付けした変数のプロパティを使おうとすると、

プロパティ'name'は型'T'に存在しません。

というエラーが出ます。

ジェネリクス型に型付けされた変数は、どんな型が入ってくるのかわからないし、型が明確に定義されていないからプロパティにアクセスできないんですね。

そこで、「extends」を使ってジェネリクス型に入るであろう型の最低限必要な情報を与えてあげるとプロパティにアクセスできます。

type hoge = {
  name:string;
}

const example = (data:T) => {
  console.log(data.name)
}

「Tはhogeに設定した構造を最低限持っている」という情報を与えることで、Tに型付けした変数のプロパティにアクセスできるわけですね。

逆に、hogeで設定した構造を持っていない型タイプをTに設定しようとするとエラーになります。

上記の例だと、下記のような型を渡すと、nameが無いのでエラーになります。

type fuga = {
  id:number;
  text:string;
}

下記のように、string型のnameが入っていればOK。

type fuga = {
  id:number;
  name:string;
  text:string;
}