TypeScriptで関数の返り値を型に変換する(ReturnTypeを使う)

知見 メモ

あるfunctionが返す値から型を作りたかった。

たとえば

const foo = ()=> {
  return {
    foo: 1,
    fooo: 2,
    foooo: 3
  }
}

という関数があって、返り値のオブジェクトの内容で型を定義したかった。

この返り値を直接活かして型に変換して

type Foo = {
  foo: number,
  fooo: number,
  foooo: number
}

こんな型を作りたい。

ためしに適当にこう書いてみたりする

const foo = ()=> {
  return {
    foo: 1,
    fooo: 2,
    foooo: 3
  }
}

type Foo = typeof foo

↓ やったか！？

type Foo = () => {
    foo: number;
    fooo: number;
    foooo: number;
}

やってない、function型だこれ

const foo = ()=> {
  return {
    foo: 1,
    fooo: 2,
    foooo: 3
  }
}

type Foo = typeof foo() // シンタックスエラー

これもダメ……

ReturnType

じゃあどうするかというとReturnTypeというものがTS2.8からビルトインされている。

ジェネリクスを1つ受け取る型で、返り値を型にしてくれる。

const foo = ()=> {
  return {
    foo: 1,
    fooo: 2,
    foooo: 3
  }
}

type Foo = ReturnType<typeof foo>

↓ やったか！？

type Foo = {
    foo: number;
    fooo: number;
    foooo: number;
}

やった

目的達成できてよかったよかった。

参考情報

いくつか用例があるのでこれはエラーになる、直接ジェネリクスに関数定義を置くとこうなる、みたいなのがわかる

使っていきましょう