※このブログではサーバー運用、技術の検証等の費用のため広告をいれています。
記事が見づらいなどの問題がありましたらContactからお知らせください。

【TypeScript】関数について（基礎）

TypeScript function 関数

投稿日：2020年12月16日

実践

使い方【基礎】

まずはシンプルな関数を書いてみます。

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

console.log(add(1, 2));

関数でも引数と返り値の型を推論させることができます。

ただし引数については、型を一意に正しく推論させることが困難であるため明示的に指定するのが一般的です。

上の様に定義した関数を名前付き関数といいます。

TypeScriptには名前付き関数の他にいくつかの関数の宣言方法があります。

// 名前付き関数
function greet1(name: string): string {
    let greeting = `Hello ${name}`;
    console.log(this);
    return greeting;
}
greet1("marsquai");

// 無名関数
let greet2 = function (name: string): string {
    let greeting = `Hello ${name}`;
    return greeting;
};
greet2("marsquai");

// アロー関数
let greet3 = (name: string): string => {
    let greeting = `Hello ${name}`;
    return greeting;
};
greet3("marsquai");

// アロー関数（省略記法）
let greet4 = (name: string) => `Hello ${name}`;
greet4("marsquai");

// 関数コンストラクタ（非推奨）
let greet5 = new Function("name", "return `Hello ${name}`");
greet5("marsquai");

アロー関数は自身がthisを持たないため、classのメソッドでthisを使いたい場合などに便利です。

Functionコンストラクタは非常に多くの問題を抱えているため、滅多なことでない限り使用は控えましょう。

省略可能な引数

関数の引数は?を使って省略可能にすることができます。

省略可能引数は必須パラメータの後に設定する必要があります。

その関数で引数を省略した場合、対象の引数にはundefinedが入ります。

function greet(firstName: string, lastName?: string) {
    console.log(`Hello ${firstName}${lastName ? lastName : ""}!!`);
}
greet("mars");
greet("mars", "quai");

引数のデフォルト値

関数の引数にはデフォルト値を設定することができます。

function greet(name: string = "ななしさん") {
    console.log(name);
}

greet();

可変長引数

TypeScriptでは可変長引数を定義する場合RestParameterを使います。

（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters）

RestParameterは関数の最後の引数に...を付けます。RestParameterになれるのは最後の引数だけで、２つ以上指定することはできません。

function greetAndAdd(name: string, ...nums: number[]): number {
    console.log(`Hello ${name}`);

    return nums.reduce((a, b) => a + b);
}

console.log(greetAndAdd("marsquai", 1, 2, 3, 4, 5, 6));

可変長引数はargumentsという取得方法でも実装することはできますが、その方法の場合型チェックなどが行われず危険なので、できる限りRestParameterを使いましょう。

記事へのコメント

【TypeScript】関数について（基礎）

実践

使い方【基礎】

省略可能な引数

引数のデフォルト値

可変長引数

検索

カテゴリ

Web開発

機械学習

プログラミング

その他

サーバー開発

Linux

目次