#023　TypeScript（9）：引数

2024年7月8日 07:50

TypeScriptのアロー関数：特殊な引数の型付け

オプショナルな引数

説明: ?をつけることで、その引数はオプショナル（省略可能）になります。引数intが渡されなかった場合、undefinedになります。

const funcTestOption = (str: string, int?: number): void => {
  console.log(str, int);
}

デフォルト値のある引数

説明: =の後にデフォルト値を指定できます。この引数が省略された場合、デフォルト値が使用されます。

const funcTestDefault = (int: number = 0, str: string = 'aaa'): void => {
  console.log(int, str);
}

可変長引数（レストパラメータ）

説明: ...itemsは可変長引数を表し、任意の数の引数を配列として受け取ります。

const eachNumber = (...items: number[]): void => {
  for (const item of items) {
    console.log(item);
  }
}

関数の型付けのメリット

コードの意図が明確になる: 関数が何を受け取り、何を返すのかが一目でわかります。
エラーの早期発見: 間違った型の引数を渡したり、間違った型の戻り値を返したりすると、コンパイル時にエラーが表示されます。
IDEのサポート: 適切な補完や提案が得られ、開発効率が向上します。

初心者向けの考え方

関数に型をつけることで、「この関数はこういうデータを受け取って、こういうデータを返すんだよ」というルールを明示できます。これにより、関数の使い方がわかりやすくなります。

ファイルの作成

tsファイル

tsファイル内容

// オプショナルな引数
const funcTestOption = (str: string, int?: number): void => {
    console.log(str, int);
}
funcTestOption("テスト"); // 出力: テスト undefined
funcTestOption("テスト", 123); // 出力: テスト 123

// デフォルト値のある引数
const funcTestDefault = (int: number = 0, str: string = 'aaa'): void => {
    console.log(int, str);
}
funcTestDefault(); // 出力: 0 aaa
funcTestDefault(456); // 出力: 456 aaa
funcTestDefault(456, "bbb"); // 出力: 456 bbb

// 可変長引数（レストパラメータ）
const eachNumber = (...items: number[]): void => {
    for (const item of items) {
        console.log(item);
    }
}
eachNumber(1, 2, 3); // 出力: 1 2 3
eachNumber(4, 5, 6, 7); // 出力: 4 5 6 7

コマンド実行

npm run build

index.html修正

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>タイプスクリプト</h1>
    <script src="./arrow_function_type_option.js"></script>
</body>
</html>

結果

終わりに

少し長くなったので、ここで一旦お話をクローズさせて頂きます。
自分自身の学習記録帳のため、乱雑な文章になっている可能性があります。
申し訳ございません。

最後までお読みいただき、ありがとうございます。
私も皆さんのnoteを拝見させて頂いて、多くの気づきを得ています。
本当に感謝🙏です。
今後ともよろしくお願いします。

この記事が気に入ったらサポートをしてみませんか？