TypeScriptのジェネリックス①

はじめに

• 前回までTypeScriptのAdvaiceTypeのことを調べたので、引き続きジェネリックスの調べる

px-wing.hatenablog.com

ジェネリックス

• メンバ間で意味のある型制約を提供することです。
• 安全性と柔軟性を組み合わせているので便利

typescript-jp.gitbook.io

　型を引数として受け取る

function echo<T>(value: T): T {
  return value;
}
// 下記の２つともエラーにならない
console.log(echo<string>('hello'))
console.log(echo({name: 'Yamada'}).name)

extendを指定して型パラメータに制約をつける

function echo<T extends {name: string}>(value: T): T {
  return value;
}
// 下記のコードはエラーになる
console.log(echo<string>('hello'))
// 下記のコードは制約通りなのでエラーにならない
console.log(echo({name: 'Yamada'}).name)

keyofを利用してオブジェクトのキーのunion型を作成する

function echo<T extends {name: string}, U extends keyof T>(value: T, key: U): T {
  value[key]
  return value;
}
console.log(echo({name: 'Yamada',skill: 'php'},'skill').skill)

classに対してジェネリックスを利用する

class Database<T extends string | number | boolean>{
  private data: T[] = []
  add(item: T) {
    this.data.push(item)
  }
  remove(item: T) {
    this.data.splice(this.data.indexOf(item), 1)
  }
  get() {
    return this.data
  }
}
const stringDatabase = new Database<string>();
stringDatabase.add('Test1')
stringDatabase.add('Test2')
stringDatabase.add('Test3')
stringDatabase.remove('Test2')
console.log(stringDatabase.get())

• 実行結果

[ 'Test1', 'Test3' ]