TypeScript

【TypeScript】様々な関数表現について(引数のオプション/アロー関数/オーバーロード/void型)

 
TypeScript

 

今回はTypeScriptの様々な関数表現についてまとめたので解説したいと思います。基本的にはJavaScriptと同じ表現方法なので、JavaScriptを触ったことがある方はそこまで難しくない内容だと思います。

今回は6つの表現方法に絞って解説していきます。

この記事の内容
  1. 基本形
  2. 引数のオプション
  3. 引数の初期値
  4. 式関数
  5. アロー関数
  6. 関数のオーバーロード
  7. void型
  8. まとめ
  9. 参考

基本形

TypeScriptの関数の基本形は、以下のように引数と返り値に型を定義します。

function multi(x: number, y: number): number{
  return x * y
}
xとyに付与されているnumberが引数の型、後ろに付与されているnumberが返り値の型になります。

引数のオプション

引数に必ず値が入ってくるかどうか分からないといった場合は、引数に?(クエッションマーク)を記述することでオプションにすることができます。

function multi(x: number, y?: number): number{
  if (y) {
    return x * y
  } else {
    return x
  }
}

console.log(multi(2, 4))
=> 8

console.log(multi(2))
=> 2

引数の初期値

TypeScriptでは、あらかじめ引数に値を持たせておくことも可能です。引数に値が入ってきた場合は、初期値が上書きされてしまうのでその点に注意しておきましょう。

function multi(x: number, y: number = 9): number{
  return x * y
}

console.log(multi(5, 8));
=> 40(引数が上書きされているため)

console.log(multi(5));
=> 45

式関数

先程までは宣言的な記述方法でしたが、式のように記述することも可能です。記述方法は以下のようになります。

var multi = function(x: number, y: number): number{
  return x * y
}

アロー関数

先程のような式関数でも良いですが、TypeScriptではアロー関数と呼ばれるものを使用することで簡略的に記述することが可能です。アロー関数を用いると以下のようにfunctionを記述しなくて済みます。

var multi = (x: number, y: number): number => {
  return x * y
}

 

さらに、上記関数は以下のように1行で記述することも可能です。

var multi = (x: number, y: number): number => x * y

関数のオーバーロード

TypeScriptでは引数や返り値が異なる、同じ名前の関数を定義することが可能です。これを関数のオーバーロードと呼びます。

関数のオーバーロードを使用することで、文字列と数値がそれぞれ渡された時の条件分岐を記述することができます。ちなみにany型とは、どんな型でも代入可能な型システムです。

function merge(x: number, y: number): number;
function merge(x: string, y: string): string;

function merge(x: any, y: any): any {
  if (typeof x === "string" && typeof y === "string") {
    return x + y;
  }
  return x + y;
}

console.log(merge(5, 8));
=> 13

console.log(merge("おはよう", "日本"))
=> おはよう日本

console.log(merge("おはよう", 10))
=> test.ts:13:13 - error TS2769: No overload matches this call.
文字列と数値の混合が渡された場合は「No overload matches this call.」というエラーが表示されます。

void型

ここまでは返り値(return)がある関数を見てきました。しかし関数の中には必ずしも返り値を持つものだけとは限りません。このような場合には、void型を返り値に設定する必要があります。

例を見てみましょう。

function multi(x: number, y: number): void{
  console.log(x * y)
}

console.log(multi(2, 4))
=> 8
=> undefined

 

このように返り値にvoid型を設定した場合、undefinedが返り値として出力されています。言い換えると、void型以外の場合は必ず返り値を返さなくてはならない点に注意しましょう。

undefinedはvoid型の値として扱うことができるため、以下のように記述することもできます。

function multi(x: number, y: number): void{
  console.log(x * y)
  return undefined
}

console.log(multi(2, 4))
=> 8
=> undefined

まとめ

  • 引数にオプションを設定したい場合は、引数に?を付与する。
  • 引数の初期値を設定することが可能だが、値が入ってきた場合は上書きされる。
  • 宣言的な関数表現ではなく、式関数的な記述も可能である。
  • 式関数はアロー関数で省略することができる。
  • 関数のオーバーロードを用いることで、名前が同じ関数を定義することができる。
  • 返り値がない場合は、void型を返り値に設定する必要がある。

参考

TypeScript超入門(2)：構文を理解する：
https://qiita.com/ringtail003/items/7ccf992f18b768e0e633#%E9%96%A2%E6%95%B0%E3%81%AE%E6%9B%B8%E3%81%8D%E6%96%B9

void型：
https://nju33.com/typescript/void%20%E5%9E%8B

 

 

今回はTypeScriptの様々な関数表現について解説しました。どれも基本的かつ、ほぼJavaScriptと同じ意味合いなので、ぜひこの機会に理解を深めていきましょう。

JavaScript TypeScript
こんな記事もおすすめ