基礎からのTypeScript［関数］

外資系企業でソフトウェアエンジニアをしております、タロイモと言います。今日もよろしくお願いします。

前回からTypeScriptの文法について解説しています。
今回は第二回として関数を説明していきます。

環境構築をはじめに書きますが、すでに構築済みの方は飛ばしてください。

0. 環境構築

TypeScriptのエディタ
Visual Stadio Codeを使用します。TypeScriptと同様にMicroSoft開発であるため使用しますが、基本的にどのエディタでも対応しています。

TypeScriptコンパイラ
Macだとターミナル、Windowsだとコマンドプロンプトを開き、以下コマンドを実行し、インストールします。
※npm（Node.js）のインストール方法は割愛します。

npm install -g typescript

-gオプションはグローバルインストール（PC自体へのインストール）を行うため、npmの前にsudoをつけないと実行できない場合があります。

1. 関数の書き方

基本的にTypeScriptはJavaScriptと同じ書き方が行えます。

関数宣言(function statement)
引数と返り値のデータ型を定めること以外はJavaScriptと同じです。

function 関数名(引数: 引数のデータ型): 返り値のデータ型{
    return 返り値;
}

function sum(height: number, width: number): string{
    let square: number = height * width;
    return `面積は${square}です。`;
}
console.log(sum(2, 5)); //面積は10です。

関数リテラル(function literal)
変数に返り値のデータ型を指定するのではない点に注意してください。

let 変数名 = function(引数: 引数のデータ型): 返り値のデータ型{
    return 返り値;
}

let sum = function(height: number, width: number): string{
    let square: number = height * width;
    return `面積は${square}です。`;
}
console.log(sum(2, 5)); //面積は10です。

アロー関数(Arrow function expression)
基本的には関数リテラルをシンプルにしたものと考えて良いです。
※ただし、JavaScriptと同様にthisを固定する点で関数リテラルと違うことに注意です。参考

//returnなし
let 変数名 = (引数: データ型): 返り値のデータ型 => 返り値;

//returnあり
let 変数名 = (引数： データ型): 返り値のデータ型 => {
 return 返り値;
}

let sum = (height: number, width: number): string => {
    let square: number = height * width;
    return `面積は${square}です。`;
}
console.log(sum(2, 5)); //面積は10です。

2. 関数固有のデータ型

void型
Javaでお馴染みのvoid型も使うことができます。
void型は、返り値を返さない(returnしない)関数ということを明示するために使います。

function sum(height: number, width: number): void{
    let square: number = height * width;
    console.log(`面積は${square}です。`);
}
sum(2, 5); //面積は10です。

never型
void型と区別しづらいのがnever型です。
voidは、何もreturnしない場合に使います。
neverは、returnをしません。何もreturnしないのではなくreturn自体をしない（辿り着けない）のです。

never型は以下の状況で使います。
・実行されるreturn文が存在しない時(無限ループ時など)
・常にエラーをthrowする関数 

わかりづらいので例を示します。

//無限ループ
function hoge(): never {
    while(true){
        //returnなし
    }
}

//エラーをthrowする
let hoge: never = (() => { throw new Error(`エラーです`) })(); 

また、neverにはnever型以外の数字を入れることができません。

let hoge: never = 123; //エラー
let hoge: never = "ホゲホゲ"; //エラー

3. 引数をうまく扱う方法

オプション(任意)引数
引数を省略した場合にも、正しく実行されるようにできます。

function 関数名(引数?: 引数のデータ型): 返り値のデータ型{
    return 返り値;
}

let sum = (height?: number, width?: number): string => {
    if (height === undefined) {
        return "引数が必要です";
    } else {
        let square: number = height * width;
        return `面積は${square}です。`;
    }
}
sum(2, 5); //面積は10です。
sum(); //引数が必要です。

デフォルト(既定)引数
引数を省略した場合に、初期値を指定することもできます。

function 関数名(引数: 引数のデータ型 = 初期値): 返り値のデータ型{
    return 返り値;
}

let sum = (height: number = 2, width: number = 5): string => {
    if (height === undefined) {
        return "引数が必要です";
    } else {
        let square: number = height * width;
        return `面積は${square}です。`;
    }
}
sum(2, 5); //面積は10です。
sum(); //面積は10です。

レスト(残余)引数
引数を配列として扱ってくれるのが、レスト引数です。
引数の前に"..."を書きます。

function 関数名(...引数: 引数のデータ型): 返り値のデータ型{
    return 返り値;
}

let sum = (...args: number[]): string => {
    let result = 0;
    for (let arg : args) {
        result += arg;
    }
    return `合計は${result}です。`;
}
sum(2, 5); //合計は7です。

4. まとめ

今回はTypeScriptの関数を扱いました。

量は多くなりましたが、
JavaScriptと大きく変わる点はほとんどありません。

他にもJavaなどでお馴染みのオーバーロードなども紹介したかったのですが、TypeScriptでは未完成な機能だなと思ったので割愛しました。
興味がある方は調べてみてください。

関数の型

本日もご精読ありがとうございました。