[TypeScript] Rest 引数

はじめに

関数の引数は、あらかじめ個数がわかっていればいいのですが、必ずしもそうとは限りません。

複数の引数を使用したいけれど、事前に引数の数がわからなない場合もあるでしょう。

このような問題を解決するために、TypeScript には Rest 引数というものが備わっています。

今回は、この Rest 引数について説明します。

目次

Rest 引数のある関数の定義

Rest 引数は、事前にいくつの引数を準備したらよいのかわからない場合に有効です。

Rest 引数は「…」を使用して作成します。…の後ろの名前の引数には複数の値が渡される可能性があるので配列にします。渡される引数の数は0個でも構いません。

Rest引数の後ろには、別の引数を記載しては行けません。エラーになりますので注意してください。ちなみにRest引数の前には、別の引数を置いても構いません。

それでは、Rest 引数の定義書式を以下に示します。

function 関数名 (...変数名: データ型[]) {
  // 処理
}

Rest 引数のある関数の利用

Rest 引数を持つ関数の定義例を以下に示します。

以下は、複数の文字列型の引数を受け取って関数内部で連結した文字列を出力します。

join という関数は配列の値を連結するものです。

function addNames(...names : string[]) {
    console.log(names.join(" "));
}

addNames("Taro","Yamada")  // Taro Yamada

 

[TypeScript] 関数のオーバーロード

はじめに

TypeScript では関数のオーバーロードをすることができます。

オーバーロードは、同じ名前の関数を複数定義することです。

今回はこのオーバーロードについて説明します。

目次

関数のオーバーロードとは?

冒頭でも触れましたが、関数のオーバーロードとは同じ名前の関数を複数定義することです。

同じ名前の関数を複数定義するには以下の条件があります。

  • 引数の数が同じであること
  • 引数の数のデータ型、戻り値のデータ型が異なること

オーバーロードの例

以下にオーバーロードの例を示します。

addnumという関数をおーバーロード定義しています。1つは引数と戻り値が number 型で、もう1つは引数と戻り値が string 型です。

関数内部では「+」演算子で、引数の足し算をしています。与えられたデータ型数値の場合は数の足し算になり、文字列が渡された場合は連結になります。

function addnum(x:number, y:number) : number
function addnum(x:string, y:string) : string {
    return x + y;
}

console.log(addnum(2, 3));
console.log(addnum("青", "空"));

[TypeScript] アロー関数

はじめに

TypeScript では、JavaScript と同様にアロー関数を使用することができます。

今回はアロー関数とは何かと、その定義方法と使用方法について説明します。

目次

アロー関数とは?

アロー関数とはES2015(ES6)からサポートされた、新しい関数です。

アロー関数の特徴は、関数を短く書くことができるという特徴があります。

アロー関数は前回紹介した無名関数をさらに省略して書くことができる関数ということもできます。

アロー関数の定義

アロー関数定義の書式を以下に示します。

(引数1, 引数2, ...) => 処理

まずは、足し算をする無名関数をみてみましょう。

let addnum = function (x : number, y : number) : number {
    return x + y;
}

次に、上記の無名関数をアロー関数で書き換えた例を示します。function キーワードと return キーワードがなくなりましたが、動作は無名関数と変わりません。

let addnum = (x : number, y : number) => x + y;

アロー関数の使用方法

アロー関数の使用方法は、無名関数と変わりません。アロー関数を変数に代入後、変数を関数のように使用します。

let addnum = (x : number, y : number) => x + y;

let ans = addnum(2,3);
console.log(ans);

ちなみに引数なしのアロー関数も作成できます。以下に「Hello」と表示するアロー関数の例を示します。

let hello = () => console.log("Hello");
hello();