TypeScriptでの関数の書き方

こんにちは、yayoiです！
本記事ではTypeScriptの関数の書き方をまとめています。

関数の書き方は主に3種類あります。
それぞれ順番に見ていきましょう～

関数宣言を用いる書き方

まずは構文と具体例から見ていきましょう！

構文 :

function 関数名 (引数 : 引数の型 ) : 戻り値の型 { 処理の内容 }Code language: JavaScript (javascript)

具体例 :

function add ( a: number, b: number ) : number {
    return a + b;
}

Code language: TypeScript (typescript)

と、このように先頭に「function」と付き、文として定義されることが特徴です。
関数宣言を用いて定義された関数は、ファイルの中でその関数が定義されているよりも前の箇所で、呼び出すことができます。
再利用性が高い処理を切り出して関数化する際に主に関数宣言を利用します。

呼び出し方 :

関数名 (引数)

具体例 :

add (1, 2);
//3が返ってくる
Code language: JavaScript (javascript)

文として定義されるため、関数単体で呼び出すことができます。

関数式を用いる書き方

構文 :

function (引数: 引数の型): 戻り値の型 { 処理の内容 }Code language: JavaScript (javascript)

具体例 :

function ( a: number, b: number ) : number {
    return a + b;
}

Code language: TypeScript (typescript)

関数宣言と同様に先頭に「function」が付きますが、式として定義されることが関数宣言を用いる書き方との大きな違いです。
関数名も定義しません。
関数式を用いて定義された関数は、ファイルの中でその関数が定義されているよりも前の箇所では、呼び出すことができません。
一時的・限定的な処理を関数化する際に主に関数式を利用します。
基本的には変数に関数式を格納してから、その変数を呼び出すことで関数を呼び出します。

呼び出し方 :

変数 = function (引数: 引数の型): 戻り値の型 { 処理の内容 }Code language: TypeScript (typescript)

変数名 (引数)

具体例 :

const add = function ( a: number, b: number ) : number {
    return a + b;
};

add (1, 2);
//3が返ってくる

Code language: TypeScript (typescript)

関数式を格納する変数の名前が、関数宣言での関数名にあたるようなイメージです。

アロー関数式を用いる書き方

構文 :

(引数: 引数の型): 戻り値の型 => { 処理の内容 }Code language: PHP (php)

具体例 :

( a: number, b: number ) : number => {
    return a + b;
}

Code language: JavaScript (javascript)

=>という矢印のような記述が特徴的で、関数式と同様に式として定義されます。
アロー関数式は関数式と似ていて、ファイルの中でその関数が定義されているよりも前の箇所では、呼び出すことができません。
一時的・限定的な処理を関数化する際に利用しますが、特にコールバック関数に向いています。
基本的には変数に関数式を格納してから、その変数を呼び出すことで関数を呼び出します。

関数式との違いとしては、functionという長い文字を省ける点や、関数内でのthisの扱いがあります。

呼び出し方 :

変数 = function (引数: 引数の型): 戻り値の型 => { 処理の内容 }Code language: JavaScript (javascript)

変数名 (引数)

具体例 :

const add = function ( a: number, b: number ) : number => {
    return a + b;
};

add (1, 2);

Code language: JavaScript (javascript)

呼び出し方は関数式とほとんど変わりません。
しかし、この後紹介する省略記法がとても便利です。

構文 :

(引数: 引数の型): 戻り値の型 => 式Code language: PHP (php)

具体例 :

( a: number, b: number ) : number => return a + b

const add = ( a: number, b: number ) : number => return a + b;
//変数にアロー関数式を格納する場合

Code language: JavaScript (javascript)

省略記法では、=>の右側の

{ 処理 }

が、

式

に置き換わっています。
つまりアロー関数式の=>の右側に記述する式が1つだけの場合に{}とreturnを省略できます。
省略せずに省略記法を表現すると下記のようになります。

(引数: 引数の型): 戻り値の型 => { return 式; }Code language: PHP (php)

1点注意すべきが、省略記法での戻り値にオブジェクトリテラルを用いるときに、オブジェクトリテラルを()で囲む必要があります。
省略記法でないアロー関数式の

{ 処理 }

と区別するためです。

具体例 :

type User = { name: string; age: number };
//オブジェクトの型を定義

const getUser = (): User => ({ name: "yayoi", age: 26});

Code language: JavaScript (javascript)

もし、戻り値のオブジェクトリテラルに()を付けない場合は、

{ 処理 }

にreturnが無いため、何も返していない旨のエラーが出ます。

const getUser = (): User => { name: "yayoi", age: 26};
//エラーになる
Code language: JavaScript (javascript)

以上、いかがでしたでしょうか？
TypeScriptでの関数の書き方をざっくり説明してみましたが、ここもっと知りたい！やここはこうじゃない？といったご意見・ご指摘ございましたらコメントまでお願いします！
最後まで読んでいただきありがとうございました！！！