🤙

TypeScriptコールシグネチャ完全理解

に公開
JavaScript
TypeScript
tech

はじめに

TypeScriptの書籍を読んでいて、関数オブジェクトの型定義方法（コールシグネチャ）と、メソッドの定義方法の違いがよくわからなくなったので、この記事でまとめたいと思います。

この記事の対象者

・TypeScriptを学び始めた人
・コールシグネチャの使い方がわからない人
・関数の定義方法で躓いた人

関数オブジェクトとは

コールシグネチャの説明に入る前に、関数オブジェクトについて知る必要があります。
関数オブジェクトとは、関数でありながらオブジェクトでもある値のことです。通常の関数のように呼び出すことができ、さらにプロパティやメソッドを持たせることもできます。
関数オブジェクトの例は以下の通りです。

// 関数を定義
function greet(name) {
  greet.count++;        // 関数自身のプロパティを更新
  return `Hello, ${name}!`;
}

// 関数オブジェクトにプロパティを追加
greet.count = 0;

// 使用例
console.log(greet("Alice")); // Hello, Alice!
console.log(greet.count);    // 1

console.log(greet("Bob"));   // Hello, Bob!
console.log(greet.count);    // 2

上記の例では、greet.count = 0;のようにオブジェクト(関数オブジェクト)にプロパティを追加しています。また、console.log(greet("Alice"));のように、オブジェクト自身を関数として呼び出すことができています。
コールシグネチャは、この関数オブジェクトに型をつける方法です。

コールシグネチャの使い方

コールシグネチャは、関数オブジェクトにつける型で、オブジェクトリテラル型として定義される型の中で使用できます。
構文は以下のようになっています。

 type Counter = {
    count: number;
    (n: number) : number;
  };
  const counter: Counter = (n) =>{
    counter.count += n;
    return counter.count;
  };
  counter.count = 0

コールシグネチャは、上記のコード例のように(n: number) : number;という形で型を定義します。また、関数オブジェクトなので、counter(3)のようにオブジェクトを関数として呼び出すことができます。

メソッドの定義方法と何が違う？

似たような型に、メソッドの型定義があります。メソッドの型定義は以下の通りです。

 type Counter = {
    count: number;
    increment: (n: number) => number;
  };
  const counter: Counter = {
    count: 0,
    increment: function (this: Counter, n: number) { // this の型を指定
      this.count += n;
      return this.count;
    },
  };

incrementプロパティの型定義は、関数の型定義としてコールシグネチャと似た構文に見えるかもしれません
ではコールシグネチャと何が違うのかというと、そもそもの関数の使い方が違います。
コールシグネチャは先ほど述べたように、関数オブジェクトなのでcounter(3)のように呼び出すことができます。
一方で上記の場合、Counter型は、countプロパティとincrementメソッドを持つオブジェクトの型を定義するので、メソッドを呼び出すにはcounter.increment(3)のように呼び出す必要があります。
つまり、コールシグネチャ⇔関数オブジェクト、メソッドの型⇔メソッドといった関係になります。

いつ使う？

コールシグネチャを使う時ですが、実はかなり少ないと思います。
実際に僕も実務で関数オブジェクトのような形を見たことがありません。
（恥ずかしながら今日まで関数オブジェクトという概念すら知らなかった。）
それよりもオブジェクトの中で関数を定義したり、関数単体で定義したりする方が圧倒的に多いです。

ではいつ使うかについてですが、例えば少し昔で言うと、jQueryの関数に対して使うことがあったそうです。
もし他にもよく使う場面などを知っている方がいらっしゃいましたら、コメントいただけますと幸いです。

最後に

今回はコールシグネチャについて調べてみました。
せっかく調べて理解しましたが、実はあまり使うことがないということでした。
しかし、他の方が書いたコードを読んでいる際に突然現れることも無きにしも非ずなので、学んでおいて損はないだろうと感じています。
コールシグネチャにばったり出会った時に戸惑わないよう、頭に入れておきたいですね。

参考
・TypeScript公式
・プロを目指す人のためのTypeScript入門

Discussion