【TypeScript】デフォルト引数の活用方法10選！

はじめに

TypeScriptは、型安全性を強化するためのプログラミング言語として急速に人気を集めています。

その中でも、デフォルト引数は、関数の引数が提供されない場合にデフォルト値を設定するための便利な機能として注目されています。

この記事では、TypeScriptのデフォルト引数をどのように活用するか、初心者でも理解しやすいように、具体的なサンプルコードを交えながら詳しく解説していきます。

最近のウェブ開発のトレンドを見ても、TypeScriptの採用率は増加傾向にあります。

特に大規模なプロジェクトや複数人での開発作業を行う際に、TypeScriptの型システムは大きな強みとなります。

しかし、そんなTypeScriptの機能の中でも、特にデフォルト引数は、関数の設計や利用時の柔軟性を大幅に向上させるものとして、多くの開発者から評価されています。

では、なぜデフォルト引数がこれほどまでに注目されているのでしょうか。

デフォルト引数を使うことで、関数呼び出し時に引数が省略された場合、自動的にデフォルト値を割り当てることができるのです。

これにより、関数の利用者は、必要な場合だけ引数を指定し、それ以外の場合はデフォルトの動作を期待することができます。

その結果、関数の呼び出しコードがシンプルになり、コード全体の可読性や保守性が向上します。

このような背景をもとに、この記事では、TypeScriptのデフォルト引数の基本的な使い方から応用例、さらには注意点やベストプラクティスまでを徹底的にガイドします。

サンプルコードを交えて、初心者でも分かりやすく、かつ詳細にデフォルト引数の魅力や活用方法を学べる内容となっていますので、最後までお付き合いいただければと思います。

最後に、TypeScriptをこれから学びたい方、すでに使用しているがデフォルト引数の活用方法に自信がない方、より効果的なコーディングを目指す方など、多くの読者にとって、この記事がTypeScriptのデフォルト引数の活用に関する参考資料として役立つことを期待しています。

●TypeScriptとデフォルト引数の基礎知識

TypeScriptは、JavaScriptのスーパーセットであり、JavaScriptの機能に加えて静的型付けを提供するプログラミング言語です。

この静的型付けのおかげで、プログラムが実行される前にエラーを検出でき、バグを事前に減少させることが可能になります。

大規模なプロジェクトやチームワークにおいて、TypeScriptはコードの品質を向上させ、開発者の生産性を向上させる役割を果たします。

また、TypeScriptは、JavaScriptには存在しない多数の機能を持っています。

その中の1つが、本記事で取り上げる「デフォルト引数」です。

デフォルト引数とは、関数が呼び出されたときに引数が提供されない場合に使用されるデフォルトの値を指定する機能のことを言います。

JavaScriptにもこの機能は存在しますが、TypeScriptでは型の情報と合わせて使用することができるため、より強力で安全にデフォルト引数を扱うことができます。

このコードでは、デフォルト引数を設定しています。

function greet(name: string = "ゲスト") {
    console.log(`こんにちは、${name}さん！`);
}

上記の関数greetは、引数としてnameを受け取りますが、このnameにはデフォルトの値として”ゲスト”が設定されています。

そのため、この関数を引数なしで呼び出すと、デフォルト引数が使われます。

このコードを実行すると、次のような結果を得られます。

greet(); // 結果として「こんにちは、ゲストさん！」と出力されます。
greet("太郎"); // 結果として「こんにちは、太郎さん！」と出力されます。

○TypeScriptとは

JavaScriptのスーパーセットとしてのTypeScriptは、大規模なアプリケーションやライブラリの開発を容易にするための多くの機能を提供しています。

その主な特徴として、静的型付けが挙げられます。

これにより、コンパイル時に型に関するエラーをキャッチすることができ、ランタイム時のバグを大幅に減少させることができます。

また、TypeScriptは、インターフェース、ジェネリクス、モジュールなどの高度な機能もサポートしています。

これにより、より堅牢で保守性の高いコードを書くことが可能になります。

○デフォルト引数の利点

デフォルト引数は、関数の呼び出し時に特定の引数が省略された場合に、その引数に与えられるデフォルトの値を指定することができる機能です。

この機能の主な利点は次の通りです。

1. 関数の柔軟性の向上：デフォルト引数を使用することで、関数の使用方法が柔軟になります。引数を省略した場合でも、関数は正常に動作します。
2. コードの冗長性の削減：関数を呼び出す際に、同じ値を何度も指定する必要がなくなります。
3. 明確な意図の伝達：デフォルト引数を設定することで、その関数がどのような場合にどのように動作するのか、開発者の意図が明確に伝わります。

このコードでは、デフォルト引数を活用しています。

function calculateTax(price: number, taxRate: number = 0.1) {
    return price + price * taxRate;
}

この関数は、価格と税率を引数として受け取り、税込みの価格を返します。

税率はデフォルトで0.1（10%）が設定されているため、税率の引数を省略しても関数は正常に動作します。

このコードを実行すると、次のような結果を得られます。

calculateTax(1000); // 結果として1100が返されます。
calculateTax(1000, 0.08); // 結果として1080が返されます。

デフォルト引数の活用により、関数の使い方がより柔軟になり、コードの可読性や保守性も向上します。

●実際の使い方：デフォルト引数を活かした10のサンプルコード

TypeScriptを利用する上で、デフォルト引数は非常に便利な機能となっています。

特に、関数の引数に初期値を設定することが可能になり、関数の柔軟性や使いやすさが向上します。

ここでは、デフォルト引数を活用したサンプルコードを10選紹介し、その詳しい解説をしていきます。

○サンプルコード1：基本的なデフォルト引数の設定

デフォルト引数は、関数の引数が指定されなかった場合に、初期値を設定することができる機能です。

非常に基本的なデフォルト引数の設定方法を表したサンプルコードを紹介します。

// デフォルト引数の基本的な使い方
function greet(name: string = 'ゲスト') {
    return `こんにちは、${name}さん！`;
}

このコードでは、greetという関数が定義されており、引数nameのデフォルト値として'ゲスト'が設定されています。

引数が省略された場合、このデフォルト値が使用されます。

例として、次のように関数を呼び出すと考えます。

console.log(greet());  // 引数を省略
console.log(greet('太郎'));  // 引数を指定

上記のコードを実行すると、引数が省略された場合は'こんにちは、ゲストさん！'、引数として'太郎'が指定された場合は'こんにちは、太郎さん！'という出力結果が得られます。

このデフォルト引数を活用することで、関数を呼び出す際の柔軟性が向上します。

特定のシチュエーションでの引数の指定を忘れることがあっても、デフォルト値が適用されるため、意図しないエラーや不具合を防ぐことができます。

○サンプルコード2：オプショナルな引数との併用

TypeScriptで関数を記述する際、オプショナルな引数とデフォルト引数を併用することができます。

これにより、関数呼び出し時に特定の引数を省略可能にしながら、省略された際のデフォルト値を設定することが可能になります。

例を見てみましょう。

function greet(name?: string, greeting: string = "こんにちは"): string {
  return `${greeting}、${name || "ゲスト"}さん！`;
}

このコードでは、name引数はオプショナルで、指定されない場合は"ゲスト"という値が用いられます。

一方、greeting引数はデフォルト引数として設定され、指定されない場合は"こんにちは"が用いられます。

この関数をいくつかの異なる方法で呼び出すと次のような結果になります。

console.log(greet());               // こんにちは、ゲストさん！
console.log(greet("山田"));        // こんにちは、山田さん！
console.log(greet("山田", "おはよう")); // おはよう、山田さん！
console.log(greet(undefined, "こんばんは")); // こんばんは、ゲストさん！

このコードを実行すると、関数は以下のような返り値を返します。

1つ目のgreet()では、どちらの引数も指定されていないため、nameは"ゲスト"、greetingは"こんにちは"として評価されます。

結果、”こんにちは、ゲストさん！”という文字列が返されます。

2つ目のgreet("山田")では、name引数に”山田”が指定されていますが、greetingは指定されていないためデフォルトの”こんにちは”が使用されます。

結果、”こんにちは、山田さん！”という文字列が返されます。

3つ目のgreet("山田", "おはよう")では、nameに”山田”、greetingに”おはよう”が指定されているため、それに従った結果、”おはよう、山田さん！”が返されます。

4つ目のgreet(undefined, "こんばんは")では、name引数に明示的にundefinedが指定されているため、デフォルト値の”ゲスト”が用いられ、greetingには”こんばんは”が指定されています。

結果、”こんばんは、ゲストさん！”が返されます。

○サンプルコード3：関数オーバーロードとの連携

TypeScriptは、他の言語でよく見られる関数のオーバーロードの機能をサポートしています。

関数オーバーロードとは、同じ関数名で異なるシグネチャ（パラメータの型や数）を持つ複数の関数を定義することです。

そして、デフォルト引数と関数のオーバーロードを連携させることで、より柔軟な関数定義が可能となります。

関数オーバーロードとデフォルト引数を組み合わせたTypeScriptのサンプルコードを紹介します。

// オーバーロードのシグネチャ
function displayMessage(name: string): void;
function displayMessage(name: string, age: number, city?: string): void;

// 関数の実装
function displayMessage(name: string, age: number = 20, city: string = "東京") {
    console.log(`${name}は${age}歳で、${city}に住んでいます。`);
}

// このコードを使用する例
displayMessage("山田");
displayMessage("鈴木", 25);
displayMessage("佐藤", 30, "大阪");

このコードでは、関数displayMessageをオーバーロードしています。

関数のシグネチャとしては、nameだけを持つバージョンと、name、age、cityを持つバージョンの2つがあります。

そして、実際の関数の実装では、ageとcityにデフォルト引数を設定しています。

このため、関数を呼び出す際に、ageやcityを省略しても、デフォルトの値が使用されます。

このコードを実行すると、次の結果が得られます。

山田さんは20歳で、東京に住んでいます。
鈴木さんは25歳で、東京に住んでいます。
佐藤さんは30歳で、大阪に住んでいます。

このように、関数のオーバーロードとデフォルト引数を組み合わせることで、多様な呼び出し方が可能となります。

このテクニックを用いれば、関数の利用者にとって柔軟かつ簡潔なAPIを提供することができます。

○サンプルコード4：配列やオブジェクトとの組み合わせ

TypeScriptのデフォルト引数の活用法として、配列やオブジェクトとの組み合わせが非常に有効です。

これにより、より複雑なデータ構造を持った関数を簡潔に表現できます。

ここでは、配列やオブジェクトとの組み合わせたデフォルト引数の具体的な使い方を詳しく解説します。

// このコードでは、ユーザー情報を受け取る関数を定義しています。
function getUserInfo(name: string, details: { age?: number, hobbies?: string[] } = {}) {
  const age = details.age || '情報なし';
  const hobbies = details.hobbies || ['情報なし'];
  console.log(`名前: ${name}, 年齢: ${age}, 趣味: ${hobbies.join(', ')}`);
}

このコードでは、getUserInfoという関数を定義しています。

この関数は、ユーザーの名前（name）と詳細情報（details）を受け取ります。

詳細情報には、オブジェクトとして年齢（age）と趣味（hobbies）が含まれる可能性があります。

しかし、detailsにデフォルトの空オブジェクトを設定しています。

これにより、詳細情報が提供されない場合でも関数は問題なく動作します。

このコードを実行すると、次のような結果を期待することができます。

getUserInfo('田中');
// 名前: 田中, 年齢: 情報なし, 趣味: 情報なし

getUserInfo('山田', { age: 25 });
// 名前: 山田, 年齢: 25, 趣味: 情報なし

getUserInfo('佐藤', { age: 30, hobbies: ['読書', '映画鑑賞'] });
// 名前: 佐藤, 年齢: 30, 趣味: 読書, 映画鑑賞

上のコードから分かるように、getUserInfo関数を呼び出す際に詳細情報を省略しても、関数はデフォルトの値を使用して正しく動作します。

これはデフォルト引数の力を活かしたTypeScriptの強力な特徴の一つです。

○サンプルコード5：非同期関数内での使用

TypeScriptで非同期の処理を行う場合、async/awaitを用いて簡単に非同期処理を扱うことができます。

ここでは、非同期関数内でデフォルト引数を使う方法について学びます。

例えば、APIからデータを取得する際に、取得するデータの数を引数として渡す場合が考えられます。

しかし、毎回データ数を指定することは煩雑です。

そこで、デフォルト引数を利用して、引数が指定されなかった場合のデータ数を設定できるようにします。

// このコードでは非同期関数を使用してAPIからデータを取得しています。
async function fetchData(count: number = 10): Promise<string[]> {
    // 仮のAPIレスポンスとして配列を返す
    return new Promise((resolve) => {
        const data = Array(count).fill("data");
        setTimeout(() => {
            resolve(data);
        }, 1000);
    });
}

このコードでは、非同期関数fetchDataを定義しています。

関数はcountという引数を受け取り、デフォルト値として10を設定しています。

これにより、引数を指定せずに関数を呼び出すと、デフォルトで10個のデータを返すようになります。

関数の戻り値としてPromise<string[]>を設定し、非同期にデータを取得して配列の形で返すことを表しています。

このコードを実行すると、引数を渡さない場合は10個の”data”が含まれる配列が、引数に例えば5を渡すと5個の”data”が含まれる配列が、それぞれ1秒後に返されます。

デフォルト引数は非同期関数でも、通常の関数と同じように使うことができます。

しかし、非同期関数の特性上、関数の実行が完了するまでに時間がかかることがあるため、関数を呼び出す際にはawaitキーワードを使って結果を待ちましょう。

// このコードを実行すると、デフォルトの10個のデータを取得した結果、10個の"data"という文字列が含まれる配列を出力します。
(async () => {
    const result = await fetchData();
    console.log(result); // ["data", "data", ... , "data"]
})();

非同期関数のデフォルト引数を利用する際の注意点として、デフォルト引数の値が非同期で取得する必要がある場合、直接関数の引数に非同期処理を書くことはできません。

その場合は、関数内で条件分岐を使って非同期処理を行い、適切な値を取得するようにしましょう。

○サンプルコード6：クラスとメソッド内での設定

TypeScriptを用いた開発で、クラスとメソッド内でデフォルト引数を設定する方法について解説します。

クラス内のメソッドでデフォルト引数を利用することで、オブジェクト指向の概念をより柔軟に取り入れることが可能になります。

// TypeScriptでのクラス定義
class Greeting {
  // メソッド内でのデフォルト引数の設定
  sayHello(name: string = "Guest"): string {
    return `Hello, ${name}!`;
  }
}

const greet = new Greeting();

// デフォルト引数を使わない場合
console.log(greet.sayHello("Taro"));  // 出力: Hello, Taro!

// デフォルト引数を使う場合
console.log(greet.sayHello());        // 出力: Hello, Guest!

このコードでは、Greetingというクラスを定義しています。

このクラス内にsayHelloというメソッドがあり、引数nameにデフォルト値として"Guest"を設定しています。

これにより、sayHelloメソッドを呼び出す際に引数を指定しない場合、デフォルトの"Guest"という文字列が使用されます。

このコードを実行すると、引数を指定して呼び出した場合はその名前が表示されますが、何も指定しない場合には"Guest"というデフォルト値が適用されてHello, Guest!という文字列が表示されます。

また、クラスとメソッド内でのデフォルト引数の活用は、実際の開発でも様々なシーンで役立ちます。

例えば、ユーザーのプロフィール情報を持つクラスがある場合、デフォルトのプロフィール画像やニックネームなどをデフォルト引数として設定することが考えられます。

class UserProfile {
  displayProfile(name: string = "匿名ユーザー", icon: string = "default_icon.png"): void {
    console.log(`名前: ${name}, アイコン: ${icon}`);
  }
}

const user = new UserProfile();
user.displayProfile();  // 出力: 名前: 匿名ユーザー, アイコン: default_icon.png

このように、デフォルト引数を利用することで、ユーザーが特定の情報を入力しなかった場合のデフォルトの動作を定義することができます。

これにより、システムがより使いやすく、柔軟になります。

○サンプルコード7：ジェネリクスとの連携

TypeScriptにおけるジェネリクスは、型の再利用性を高めるための強力なツールとして知られています。

一方で、デフォルト引数は関数の柔軟性と利便性を向上させるものです。

これら2つの特性を組み合わせることで、よりダイナミックで再利用性の高い関数を作成することができます。

ジェネリクスとデフォルト引数を組み合わせたサンプルコードを紹介します。

function combine<T = string>(input1: T, input2: T, separator: string = " "): string {
    return `${input1}${separator}${input2}`;
}

// 使用例
const result1 = combine(3, 5); // このコードでは、数字を結合しています。
const result2 = combine("Hello", "TypeScript", "-"); // このコードでは、文字列を特定のセパレータで結合しています。

このコードでは、combineという関数にジェネリクス<T>を使用しています。

こちらの<T>は、デフォルトとしてstring型が設定されています。

関数の第三引数separatorにはデフォルト引数としてスペースが設定されています。

このため、separatorを指定しない場合、2つの入力をスペースで結合します。

このコードを実行すると、result1には数字の3と5がスペースを挟んで結合された”3 5″という結果が、result2には文字列の”Hello”と”TypeScript”がハイフンで結合された”Hello-TypeScript”という結果が得られます。

○サンプルコード8：高階関数での応用

TypeScriptでのプログラミングにおいて、高階関数は非常に有用な概念です。

高階関数とは、他の関数を引数として受け取ったり、関数を返す関数のことを指します。

そして、デフォルト引数と組み合わせることで、非常に効果的なコードを書くことが可能となります。

ここでは、高階関数とデフォルト引数の応用的な使い方について、サンプルコードとともに詳しく解説します。

// 高階関数の定義: 引数として関数を受け取り、新しい関数を返す
function withLogger(fn: (a: number, b: number) => number, logger: (message: string) => void = console.log): (a: number, b: number) => void {
    return (a: number, b: number) => {
        const result = fn(a, b);
        logger(`計算結果: ${result}`);
    };
}

// 計算関数の定義
function sum(a: number, b: number): number {
    return a + b;
}

// withLoggerを用いて新しい関数を生成
const loggedSum = withLogger(sum);

// 実行
loggedSum(5, 3);

このコードでは、まず高階関数withLoggerを定義しています。

この関数は計算関数fnとログ出力関数loggerを引数として受け取り、新しい関数を返します。

ログ出力関数にはデフォルト引数としてconsole.logが設定されており、何も指定しなければそのデフォルト値が使用されます。

次に、計算関数sumを定義しています。この関数は単に2つの数値を足し合わせるだけのシンプルな関数です。

そして、withLoggerを使用して、ログ出力機能を持った新しい関数loggedSumを生成しています。

このコードを実行すると、5と3の計算結果、すなわち8がログとして出力されることになります。

この例からわかるように、デフォルト引数を持った高階関数を活用することで、柔軟で再利用可能なコードを効率よく書くことが可能となります。

○サンプルコード9：外部ライブラリとの連携

TypeScriptを日常的に使用する中で、外部ライブラリとの連携を避けては通れません。

特にデフォルト引数の利用は、外部ライブラリの関数やメソッドを使う際に非常に役立ちます。

ここでは、人気のある外部ライブラリ「lodash」を例に、デフォルト引数の利用方法を解説します。

Lodashは、JavaScriptで使えるユーティリティライブラリの一つです。

配列、数値、オブジェクト、文字列、関数などの操作をサポートしており、多くの開発者に支持されています。

TypeScriptでも利用が可能で、型定義ファイルも提供されています。

このコードでは、Lodashのget関数を使って、オブジェクトから指定したパスの値を取得しています。

デフォルト引数を設定することで、指定したパスの値が存在しない場合の返り値も定義しています。

import { get } from 'lodash';

function getValueFromObject(obj: object, path: string, defaultValue: any = null) {
    // Lodashのget関数を使用して、デフォルト値とともに値を取得
    return get(obj, path, defaultValue);
}

const sampleObject = {
    user: {
        name: "Taro",
        age: 25,
        address: {
            city: "Tokyo"
        }
    }
};

// 指定したパスの値が存在する場合
const userName = getValueFromObject(sampleObject, "user.name"); // Taro

// 指定したパスの値が存在しない場合、デフォルト値を返す
const userCountry = getValueFromObject(sampleObject, "user.country", "Japan"); // Japan

このコードを実行すると、getValueFromObject関数は指定したパスの値を取得します。

もし指定したパスの値が存在しない場合、デフォルト引数で設定した値を返すので、エラーを回避しながら、安全に値を取得できます。

このように、外部ライブラリの関数とデフォルト引数を連携させることで、より柔軟かつ安全なコードを書くことが可能となります。

特に、外部ライブラリの関数が予期しない値を返す可能性がある場合や、関数の挙動をカスタマイズしたい場合に、デフォルト引数は非常に便利です。

○サンプルコード10：実践的なビジネスロジック例

TypeScriptでのデフォルト引数を活用することで、関数やメソッドの呼び出し時に引数を省略できる利点があります。

これを実際のビジネスロジックの中でどのように利用できるのか、サンプルコードを通じて詳しく解説していきます。

例えば、商品の販売価格を計算する際に、税込み価格を算出する関数を考えてみましょう。

この関数では、税率として8%をデフォルト引数として設定し、必要に応じて税率を変更できるようにします。

// 販売価格を計算する関数
function calculatePrice(price: number, taxRate: number = 0.08): number {
  return price + price * taxRate;
}

// 使用例
const result1 = calculatePrice(1000);  // 1000円の商品に税率8%を適用
const result2 = calculatePrice(1000, 0.1);  // 1000円の商品に税率10%を適用

このコードでは、calculatePrice関数を使って商品の税込み価格を計算しています。

第2引数のtaxRateはデフォルトで0.08と設定されているため、引数を省略した場合は8%の税率が適用されます。

このコードを実行すると、result1の値は1080となり、result2の値は1100となります。

このように、デフォルト引数を活用することで、関数の利用者は必要に応じて引数を省略することができ、コードの可読性や保守性が向上します。

更に、この関数を拡張して、特定の日に割引が適用されるロジックを組み込むことも考えられます。

例えば、毎週金曜日は10%オフのキャンペーンを行っているとします。

この場合、次のように関数を拡張できます。

function calculateDiscountedPrice(price: number, taxRate: number = 0.08, discountDay: string = "金"): number {
  const today = new Date().getDay();
  const dayNames = ["日", "月", "火", "水", "木", "金", "土"];

  if (dayNames[today] === discountDay) {
    price = price * 0.9;  // 10%の割引を適用
  }

  return price + price * taxRate;
}

// 使用例
const result3 = calculateDiscountedPrice(1000);  // 金曜日の場合、900円の税込み価格を計算

このコードでは、calculateDiscountedPrice関数内で現在の曜日を取得し、金曜日であれば10%の割引を適用しています。

このような拡張性を持たせることで、デフォルト引数の活用範囲が更に広がります。

●注意点と対処法

TypeScriptでデフォルト引数を活用する際には、いくつかの注意点とその対処法を知ることで、より効果的かつ安全にコードを書くことができます。

ここでは、デフォルト引数の活用における主要な注意点と、それに対する対処法を紹介します。

○デフォルト引数の常識的な使い方

デフォルト引数は便利である一方、適切でない使い方をするとコードの可読性や保守性を低下させる可能性があります。

□デフォルト引数の後ろに非デフォルト引数を配置しない

デフォルト引数の後に非デフォルト引数を配置すると、関数呼び出し時に引数の指定が複雑になる可能性があります。

このコードでは、message にデフォルト引数を設定していますが、その後に非デフォルト引数 age が配置されています。

function greet(message: string = "Hello", age: number) {
  console.log(`${message}, I am ${age} years old.`);
}

このコードを実行すると、ageが明示的に指定されていないためエラーが発生します。

正しくは、デフォルト引数は最後に配置するか、すべての引数にデフォルト値を設定してください。

□明確なデフォルト値を設定する

デフォルト引数の値は、関数の利用者が理解しやすいものを設定することが望ましいです。

function calculateTax(amount: number, taxRate: number = 0.1) {
  return amount + amount * taxRate;
}

このコードでは、taxRate にデフォルトの税率として 0.1 (10%) を設定しています。

このように、明確なデフォルト値を設定することで、関数の動作が予測しやすくなります。

□デフォルト引数を頻繁に変更しない

関数のデフォルト引数は、一度公開した後はなるべく変更しないようにします。

デフォルト引数の変更は、関数の利用者にとって予期しない動作の変更をもたらす可能性があります。

○エラーを防ぐためのベストプラクティス

TypeScriptでのデフォルト引数の活用は、エラーを防ぐためのいくつかのベストプラクティスを知ることで、より安全にコードを書くことができます。

□型を明示的に指定する

デフォルト引数を設定する際、型を明示的に指定することで、期待しない値が設定されるのを防ぐことができます。

function createPerson(name: string, age: number = 30) {
  // ...
}

このコードでは、age に対してデフォルト引数として 30 が設定されていますが、型を number と明示的に指定しています。

これにより、文字列や他の型の値が設定されることを防ぐことができます。

□デフォルト引数の値がundefinedの場合の挙動を確認する

TypeScriptでは、デフォルト引数が undefined の場合にデフォルト値が使用されることを確認することが重要です。

function printMessage(message: string = "Hello, World!") {
  console.log(message);
}

const inputMessage: string | undefined = undefined;
printMessage(inputMessage);

このコードを実行すると、"Hello, World!" が出力されます。

inputMessage が undefined の場合にデフォルト値が適用されることが確認できます。

●カスタマイズのアドバイス

デフォルト引数は、関数の引数に初期値を設定する際に用いられる非常に便利な機能です。しかし、その利便性を最大限に活かすためには、より高度な活用方法やカスタマイズの方法を知ることが重要です。本項では、デフォルト引数の拡張活用方法について、詳細なサンプルコードを交えて解説します。

○デフォルト引数の拡張活用方法

□計算を含むデフォルト引数

TypeScriptのデフォルト引数は、単なる固定値だけでなく、計算の結果をデフォルト値として設定することも可能です。

function calculatePrice(taxRate = 0.1, price: number = 1000) {
    return price + price * taxRate;
}

このコードでは、taxRateという引数のデフォルト値として0.1を指定しています。

また、priceのデフォルト値として1000を指定しています。関数を呼び出す際に特定の引数を省略した場合、その引数にはデフォルト値が使用されます。

このコードを実行すると、税率10%のときの価格が計算され、1100という結果を返します。

□関数をデフォルト引数として利用

関数の戻り値をデフォルト引数として設定することもできます。

これにより、関数の初期値を動的に生成することが可能になります。

function getDefaultName() {
    return "John Doe";
}

function greet(name = getDefaultName()) {
    console.log(`Hello, ${name}!`);
}

上記のコードでは、getDefaultName関数を用いて、greet関数の引数nameのデフォルト値を設定しています。

greet関数を引数なしで呼び出すと、getDefaultName関数が実行され、「Hello, John Doe!」と表示されます。

まとめ

TypeScriptを使いこなすためには、さまざまな機能の中でも「デフォルト引数」の活用は欠かせません。

この記事を通して、デフォルト引数の基本的な使い方から、より高度な使い方、そして実践的なビジネスロジックの例まで、幅広く解説してきました。

特に注目すべきは、デフォルト引数を応用した場面での使い方です。

例えば、非同期関数内でのデフォルト引数の活用や、クラスとメソッド内での設定方法、ジェネリクスとの連携方法など、これらのテクニックをマスターすることで、より洗練されたコードを書くことが可能となります。

これらの知識をもとに、TypeScriptのコーディングスキルをさらに向上させ、より品質の高いコードを書いていきましょう。