【超基礎】TypeScript関数の引数まとめ

前提

この記事は、初学者の私が、サバイバルTypeScriptで学んだこと+調べたことをまとめたものになります。

従って、経験則に基づいた発言ではないため、一部慣習とは違っていたり、認知にずれがあったりする可能性がありますので、ぜひコメントで指摘していただけると幸いです。

TypeScriptにおける引数

• 渡す引数と期待する引数の数と型の一致が必須。(JSだと無視)
• 型を引数として渡すこともできる(ジェネリクス)
• C言語の様なポインタ渡しは存在せず、基本は値渡しのみ。呼び出し先の関数で書き換えても、呼び出し元では変化しない

オブジェクトのみ新しい変数に代入すると値を共有するようになるため、呼び出し先で書き換えると、共有された呼び出し元のオブジェクトも更新される。

typesciprt

function func(a: number,b: string): void{
    console.log(`num:${a},str:${b}`);
}

func(1,"hello"); //=> num:1,str:hello

オプション引数

• 呼び出し先関数の引数の後ろに?を付けたもの
• 関数呼び出し時に引数を省略できる
• undefindとのユニオン型になり、引数が省略された場合はundefinedとなる
  ➡ そのままでは各型のメソッドが使えないので、関数の初めに型ごとの処理をする必要がある。
• 通常の引数と併用できるが必ず最後に置く必要がある

多くのケースではデフォルト引数を使った方がいい。・

オプション引数

function funcOpt(a: number,b?: string){ //引数の後ろに'?'を付ける。
    if(typeof b === "undefined"){ //型について初璃
        b = "undef";
    }
    console.log(`num:${a},str:${b}`);
}

funcOpt(1,"hello") //=> num:1,str:hello
funcOpt(5) //=> num:5,str:undef　省略ok

デフォルト引数

• オプション引数よりシンプルに書ける
• 可読性、保守性も高い
• 特に順番に関する制限はない
• 引数の型がundefinedの時に動作する

引数の型がnullだとデフォルト引数は適用されない

デフォルト引数

function funcOpt(a: number,b: string ="undef"){ //よりシンプルかつ直感的な実装
    console.log(`num:${a},str:${b}`);
}

funcOpt(1,"hello") //=> num:1,str:hello
funcOpt(5) //=> num:5,str:undef　省略ok

残余引数（可変長引数）

• 引数の前に...を付けることで、引数の数が可変になる
• 渡された引数は配列として扱われる➡省略すると空の配列が生成される
• 通常の引数と併用できるが必ず最後に置く必要がある
• 関数呼び出し側では配列を渡すとエラーになるため、スプレッド構文を使う

スプレッド構文：配列の先頭に...を付けたもの、配列を引数に分解できる

残余引数

function funcOpt(a: number,...b: number[]){ //number[]型であることに注意
    console.log(`num_1:${a},num_2:${b}`);
}
funcOpt(1) //=> num_1:1,num_2:
funcOpt(1,2) //=> num_1:1,num_2:2
funcOpt(1,2,3,4,5) //=> num_1:1,num_2:2,3,4,5

まとめ

以上になります。ずっと「引数に謎の修飾がされているな」というだけのやんわりとした理解だった部分の解像度が上がりました。

当方初学者なため、認知のずれや、モダンな開発現場ではもう使わない表現などがありましたらコメントで指摘していただけると幸いです。😸