この動画はメンバー限定動画です

全ての講座が
月額990円で学び放題

講座の情報を見る

TypeScript入門関数をオーバーロードしよう

記事を共有:

  • X
  • Pocket
  • クリップボードにコピー

例えば、次のような簡単な関数を考えてみましょう。

function print_name(name: string): void {
  console.log(name + 'さん');
}
print_name('田中');

パラメータで名前を指定すると、「さん」とつけた状態で画面に表示するというだけの簡単な関数です。

この時、配列で複数の名前を指定できるようにしたいとしましょう。

print_name(['田中', '鈴木', '高橋']);

しかし現状では、文字列のパラメータしか受け取る事ができません。といって、別の名前で関数を準備してしまうと、使い勝手が悪くなります。そこで使えるのが、関数の「オーバーロード」です。

関数をオーバーロードしよう

次のようなプログラムを作成しましょう。

// function05.ts
function print_name(name: string): void;
function print_name(name: string[]): void;

ここでは、関数の宣言だけを先にしています。そして、パラメータに文字列と配列の2種類があることを先に宣言しました。続いて、実装をしていきましょう。

function print_name(name: string | string[]): void {

こうして、関数に複数の型のパラメータが渡せるようになりました。後はこのパラメータの型を検査して、処理を変更していきます。次のように変えていきましょう。

if (typeof name === 'string') {
  console.log(name + 'さん');
} else {
  for(lt n of name) {
    console.log(n + 'さん');
  }
}

これで、文字列を渡した場合は1名の名前が表示され、配列で渡した場合は全員に「さん」をつけて表示しています。

変数の型を検査する typeof

if構文をみてみましょう。

if (typeof name === 'string') {

ここでは、「typeof」という演算子を使ってnameというパラメータの型を取りだしています。それが「string」と等しいという事はつまり、パラメータが文字列だった場合にこの条件は満たされた状態になります。

こうして、複数の型のパラメータを受け取って、それぞれ適切に処理する関数を作ることができました。

前のレッスン 次のレッスン