Zenn
🏹

【TypeScript】アロー関数

に公開
TypeScript
tech

初めに

こんにちは！TypeScriptにおけるアロー関数についてまとめていきたいと思います。

TypeScript

基本的な構文

const 関数名: (引数: 型, ...) => 戻り値の型 = (引数1, 引数2, ...) => 戻り値;

例

const add = (a: number, b: number): number => a + b;
console.log(add(2, 3));

実行結果
5

  • a: number, b: number → 引数の型指定
  • : number → 返り値の型指定

オプション引数

const greet = (name?: string): string => `Hello, ${name || "Guest"}!`;
console.log(greet());       
console.log(greet("Alice"))

実行結果
Hello, Guest!
Hello, Alice!

  • name?: string → ? をつけると省略可能な引数になる
  • name?: string の ? があることで、name を 指定しなくてもエラーにならない。
  • name を渡さなかった場合、undefined になるので name || "Guest" で "Guest" に置き換えている。

デフォルト値付き

const greet = (name: string = "Guest"): string => `Hello, ${name}!`;
console.log(greet());       
console.log(greet("Alice"))

実行結果
Hello, Guest!
Hello, Alice!

関数の戻り値が void

const logMessage = (message: string): void => {
    console.log(message);
};
logMessage("This is TypeScript!");

実行結果
This is TypeScript!

  • voidは「値を返さない」ことを示す。

オブジェクトを返す場合

const createUser = (id: number, name: string) => ({ id, name });
console.log(createUser(1, "Alice")); // { id: 1, name: 'Alice'

実行結果
{ id: 1, name: 'Alice' }

  • オブジェクトを返す場合は () で囲む。

Discussion