先生と生徒の会話形式で理解しよう

生徒

「先生、TypeScriptで関数を定義するときにインターフェースを使うことができるって聞いたんですが、本当ですか？」

先生

「その通りです。TypeScriptでは、インターフェースを使って関数の形を決めることができます。つまり、関数の引数の型や戻り値の型をあらかじめ決めておけるんです。」

生徒

「なるほど！でも、なんでわざわざインターフェースで定義するんですか？普通に関数を書くだけではだめなんですか？」

先生

「良い疑問ですね。インターフェースを使うと、関数を型として再利用できたり、複数の関数が同じルールに従うようにできるんです。では、具体的に使い方を見ていきましょう。」

1. インターフェースで関数型を定義するとは？

TypeScriptのインターフェース（interface）は、オブジェクトの形を定義するためだけでなく、関数の型を定義するためにも使えます。例えば「この関数は文字列を受け取って数値を返す」といったルールを、インターフェースで表現できるのです。

これは、料理のレシピのようなものだと考えるとわかりやすいです。「材料は何か」「出来上がりはどうなるか」を決めておくことで、誰が作っても同じ形式の料理になる、そんなイメージです。

2. 基本的な書き方

では、まずシンプルな例を見てみましょう。
「文字列を受け取って、その文字列の長さ（数値）を返す関数」をインターフェースで定義してみます。


interface StringToNumber {
    (text: string): number;
}

const getLength: StringToNumber = (msg) => {
    return msg.length;
};

console.log(getLength("TypeScript"));

この例では、StringToNumberというインターフェースを作り、引数がstring、戻り値がnumberである関数を表しています。その後、getLengthという関数がそのインターフェースに従って作られています。

3. 複数の引数を持つ関数を定義する

関数は引数が一つとは限りません。複数の引数を持つ場合も、同じようにインターフェースで定義することができます。


interface Calculator {
    (a: number, b: number): number;
}

const add: Calculator = (x, y) => x + y;
const multiply: Calculator = (x, y) => x * y;

console.log(add(3, 7));
console.log(multiply(4, 5));


10
20

Calculatorというインターフェースを定義し、「2つの数値を受け取って数値を返す」というルールを作りました。そのおかげで、addもmultiplyも同じ型に従っているので、安心して使えるようになります。

4. 関数型インターフェースを使うメリット

関数型をインターフェースで定義することには、次のようなメリットがあります。

再利用性が高い：同じ型の関数を複数作るときに便利。
統一性がある：異なる関数でも同じルールを守らせることができる。
型チェックで安心：引数や戻り値を間違えたらエラーで教えてくれる。

例えば大きなアプリケーションでは、「すべての計算関数はCalculatorインターフェースを使う」と決めておけば、チーム全体で同じルールを守れるので安心です。

5. オブジェクトのメソッドに関数型インターフェースを使う

インターフェースは単体の関数だけでなく、オブジェクトのメソッド（関数のこと）にも利用できます。これによって、より現実的なプログラムを作れるようになります。


interface User {
    name: string;
    greet: (message: string) => void;
}

const user: User = {
    name: "Alice",
    greet: (msg) => {
        console.log(msg + "、" + "私は" + "Aliceです。");
    },
};

user.greet("こんにちは");


こんにちは、私はAliceです。

この例では、Userインターフェースに「文字列を受け取って何も返さない（void）greetメソッド」を定義しました。オブジェクトuserはそれに従って作られているため、間違いがなく安全です。

まとめ

関数型インターフェースの本質を押さえながら振り返る

TypeScriptで関数型をインターフェースとして定義する方法は、プログラムの統一性や再利用性を高めるうえで非常に重要な役割を果たします。インターフェースというとオブジェクトの形を定義する印象が強いですが、関数そのものの型を表現する力も持っており、引数や戻り値の型を事前に決めておくことで、コードの見通しが良くなるだけでなく、大きなプロジェクトでも混乱せずに関数を扱えるという利点があります。とくに「この関数はどんな値を受け取り、どんな値を返すべきか」を明確にできることで、関数呼び出し時のミスも減り、型安全性が高まり、他の開発者が見たときにも意図が伝わりやすくなるという特徴があります。

さらに、関数型インターフェースは複数の関数に同じ型ルールを適用できるため、コードの統一感が生まれます。アプリケーション全体で使う共通の処理、例えば計算処理、文字列操作、データ取得処理などをインターフェース化しておくことで、自由度を保ちながらも一貫した作り方を維持できる点は大きな魅力です。オブジェクトのメソッドにも応用できるため、クラス設計や複雑な構造のアプリケーションでも効果を発揮します。関数型をインターフェースにまとめることで、関連処理をグループ化でき、保守性も高くなります。

サンプルコードで関数型インターフェースの応用例を確認

ここで、もう一歩進んだ応用例として、複数の関数型インターフェースとオブジェクト構造を組み合わせた形を紹介します。インターフェースの力で関数の形を固定しつつ、柔軟なデータ操作を実現する例となります。


interface StringFormatter {
    (value: string): string;
}

interface NumberProcessor {
    (num: number): number;
}

interface ToolBox {
    format: StringFormatter;
    process: NumberProcessor;
}

const tools: ToolBox = {
    format: (v) => "◆" + v + "◆",
    process: (n) => n * 2,
};

console.log(tools.format("データ"));
console.log(tools.process(15));


◆データ◆
30

この例では、文字列を整形する関数と数値を処理する関数という、性質の異なる2つの関数型インターフェースを用意し、それをひとつのオブジェクトToolBoxにまとめています。関数を複数まとめて扱うケースは実務でもよくあり、規模が大きくなるほどインターフェースの強みが感じられます。このように、関数の定義を整理しておくと、処理内容が増えても迷わず機能追加ができるようになります。

また、関数型インターフェースを使うことで、関数ごとの責務をはっきり分けながら柔軟にロジックをまとめられます。「何を受け取り、何を返すのか」が明確になるため、実装時の迷いも少なくなり、メンテナンス性の高い構造をつくりやすくなります。これはTypeScriptの型定義の強みが最も活かされる部分であり、習得しておくと今後さまざまな場面で応用できます。

関数型インターフェースが活躍する場面

関数型インターフェースは、単純な関数定義にとどまらず、アプリケーション全体の設計にも深く関わります。例えば、フォーム入力の検証関数、APIレスポンスの処理、データの加工や変換、状態管理のイベント処理など、多くの処理が「一定の形を持った関数」として定義されます。こうした処理にインターフェースを導入することで、統一性を保ちながら機能拡張を繰り返すことができます。実務で長く使われるコードほど、関数型インターフェースの効果が大きくなるため、今の段階でしっかり理解しておく価値があります。

先生と生徒の振り返り会話

生徒

「先生、インターフェースで関数の型まで決められるって知って驚きました！」

先生

「TypeScriptのインターフェースはとても柔軟なので、関数の形をしっかり定義しておくと本当に便利ですよ。」

生徒

「確かに、関数の型をまとめると統一感が出ますね。複数の関数を扱うときに役立ちそうです！」

先生

「その通りです。とくに大規模なプロジェクトでは欠かせない考え方ですね。」

生徒

「サンプルのToolBoxみたいに、いろんな関数をまとめる方法も面白かったです！」

先生