TypeScript 学習日記 その0004 関数の型を定義する

参考にさせていただいたページ

• 関数の型 - TypeScript Deep Dive 日本語版

はじめに

いくつか方法がありますが、少し書いてみます。

後日もう少し充実させていこうと思います。

例として、以下のような「引数が2つあってオブジェクトを返す関数」の型を定義してみます。

    const myFunction = function (arg1, arg2) {
      return {
        a: arg1,
        b: arg2,
      }
    }

引数arg1はstring型、引数arg2はnumber型を想定しています。

typeキーワードを使う基礎的な方法

まずは基礎的な方法で定義してみます。

    // 型を定義
    type MyFunction = ( arg1: string, arg2: number ) => {
      a: string
      b: number
    }

    // 関数を定義して型を適用
    const myFunction: MyFunction = function (arg1, arg2) {
      return {
        a: arg1,
        b: arg2,
      }
    }

    // 実行
    const example = myFunction('str', 111)
    console.log('returnValue: ', example) // { a: 'str', b: 111 }

JavaScriptでアロー関数を書くときの記法と似ています。 あくまでも型の定義なので、=>の右側はオブジェクトであっても丸括弧でくくったり、returnキーワードを付けたりはしません。

Genericsを使って定義する

Genericsを使って同じ型を定義してみます。

    // 型を定義
    type MyFunction<T1, T2, T3> = (arg1: T1, arg2: T2) => T3

    // 関数を定義して型を適用
    const myFunction: MyFunction<
      string,
      number,
      {
        a: string
        b: number
      }
    > = function (arg1, arg2) {
      return {
        a: arg1,
        b: arg2,
      }
    }

    // 実行
    const returnValue = myFunction('ttt', 111)
    console.log(returnValue)

Genericsを使って定義した型は、使用するときに型引数を渡すことができます。

この例では型引数T1、T2、T3を渡しています。

渡されたT1、T2、T3はそれぞれ (arg1: T1, arg2: T2) => T3 という風に適用されます。

さきほどの「typeキーワードを使う基礎的な方法」と見比べるとよく理解できると思います。

引数の型が決まっていない関数を定義する（関数実行時に引数の型が決まる関数を定義する）

「TypeScript 学習日記 その0008 引数の型が決まっていない関数を定義する（関数実行時に引数の型が決まる関数を定義する） - Motomichi Works Blog」に別途書きました。