この動画はメンバー限定動画です
全ての講座が
月額990円で学び放題
例えば、次のような簡単な関数を考えてみましょう。
function print_name(name: string): void {
console.log(name + 'さん');
}
print_name('田中');
パラメータで名前を指定すると、「さん」とつけた状態で画面に表示するというだけの簡単な関数です。
この時、配列で複数の名前を指定できるようにしたいとしましょう。
print_name(['田中', '鈴木', '高橋']);
しかし現状では、文字列のパラメータしか受け取る事ができません。といって、別の名前で関数を準備してしまうと、使い勝手が悪くなります。そこで使えるのが、関数の「オーバーロード」です。
関数をオーバーロードしよう
次のようなプログラムを作成しましょう。
// function05.ts
function print_name(name: string): void;
function print_name(name: string[]): void;
ここでは、関数の宣言だけを先にしています。そして、パラメータに文字列と配列の2種類があることを先に宣言しました。続いて、実装をしていきましょう。
function print_name(name: string | string[]): void {
こうして、関数に複数の型のパラメータが渡せるようになりました。後はこのパラメータの型を検査して、処理を変更していきます。次のように変えていきましょう。
if (typeof name === 'string') {
console.log(name + 'さん');
} else {
for(lt n of name) {
console.log(n + 'さん');
}
}
これで、文字列を渡した場合は1名の名前が表示され、配列で渡した場合は全員に「さん」をつけて表示しています。
![](https://tomosta.jp/wp-content/uploads/2024/05/image-105-1024x192.png)
変数の型を検査する typeof
if構文をみてみましょう。
if (typeof name === 'string') {
ここでは、「typeof」という演算子を使ってnameというパラメータの型を取りだしています。それが「string」と等しいという事はつまり、パラメータが文字列だった場合にこの条件は満たされた状態になります。
こうして、複数の型のパラメータを受け取って、それぞれ適切に処理する関数を作ることができました。