こんにちは！
今回は、TypeScriptの「関数」について分かりやすく解説します。
関数は、プログラムを効率的に書くための重要なツールです。TypeScriptでは、JavaScriptの関数に型を付けてさらに強力なものにすることができます！
関数とは？
関数とは、ある特定の処理をまとめたコードのことです。
例えば、同じ処理を何度も書くのではなく、関数にしておくことで、必要なときに呼び出すだけで済むようになります。
function greet(): void {
console.log("こんにちは！");
}
greet(); // "こんにちは！"このように、一度作った関数を何度でも呼び出せるので、コードがすっきりし、再利用性が高まります。
TypeScriptの関数の特徴
TypeScriptでは、関数に「型」を付けられるのが最大の特徴です！これにより、ミスを防ぎ、コードをより安全に保つことができます。
1. 基本的な関数の作り方
TypeScriptの関数は次のように定義します。
function 関数名(引数: 引数の型): 戻り値の型 {
// 処理内容
return 値;
}例: 足し算を行う関数
function add(a: number, b: number): number {
return a + b;
}
console.log(add(2, 3)); // 5ここで重要なのは、引数と戻り値の型を明示していることです。
a: number→ 引数aは数値型b: number→ 引数bも数値型: number→ 戻り値も数値型
このように型を指定することで、意図しない型の値が渡されるのを防ぐことができます。
2. 引数がオプションの場合
場合によっては、引数を「必須」にせず、「オプション」にしたいこともあります。そんなときは、引数名の後ろに ? を付けます。
function greet(name?: string): void {
if (name) {
console.log(`こんにちは、${name}さん！`);
} else {
console.log("こんにちは！");
}
}
greet(); // "こんにちは！"
greet("太郎"); // "こんにちは、太郎さん！"3. デフォルト値を持つ引数
引数にデフォルト値を設定することもできます。これにより、関数を呼び出すときに引数を省略してもエラーになりません。
function greet(name: string = "ゲスト"): void {
console.log(`こんにちは、${name}さん！`);
}
greet(); // "こんにちは、ゲストさん！"
greet("花子"); // "こんにちは、花子さん！"
4. アロー関数
TypeScriptでも、JavaScriptと同様にアロー関数を使えます。シンプルで読みやすいのが特徴です。
const multiply = (a: number, b: number): number => {
return a * b;
};
console.log(multiply(4, 5)); // 20アロー関数でも型の付け方は通常の関数と同じです。
5. 可変長引数 (Rest Parameters)
複数の引数をまとめて1つの配列として扱いたい場合、Rest Parameters を使います。
function sum(...numbers: number[]): number {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10
console.log(sum(10, 20)); // 30関数の型をさらに詳しく
TypeScriptでは、関数そのものに型を付けることも可能です。これにより、関数の構造そのものを保証できます。
例: 関数型の型定義
type MathOperation = (a: number, b: number) => number;
const add: MathOperation = (a, b) => a + b;
const subtract: MathOperation = (a, b) => a - b;
console.log(add(10, 5)); // 15
console.log(subtract(10, 5)); // 5この例では、MathOperation という型を定義し、それに基づいて関数を作成しています。
コールバック関数
関数を引数として他の関数に渡すこともできます。これをコールバック関数と呼びます。
function operate(a: number, b: number, callback: (x: number, y: number) => number): number {
return callback(a, b);
}
const result = operate(5, 3, (x, y) => x * y); // 掛け算
console.log(result); // 15型エイリアスとジェネリック
TypeScriptではジェネリックを使って、柔軟で再利用性の高い関数を作成することができます。
例: 配列の最初の要素を取得する関数
function firstElement<T>(arr: T[]): T | undefined {
return arr[0];
}
console.log(firstElement([1, 2, 3])); // 1
console.log(firstElement(["a", "b", "c"])); // "a"ここでは、<T> を使って型を柔軟にしています。配列の要素型に応じて戻り値の型も変わります。
まとめ
TypeScriptの関数は、JavaScriptの便利な部分をそのまま引き継ぎつつ、型安全性を追加しています。
- 基本的な関数からジェネリック関数まで幅広く対応
- 型を指定することでエラーを未然に防げる
- 再利用性が高く、保守性の良いコードを書ける
TypeScriptを学び始めたばかりの方でも、今回紹介した内容をマスターすれば、関数を効率よく活用できるようになります！
もっと詳しく知りたい方はTypeScript公式ドキュメント を参考にどうぞ
関連記事はこちら↓↓
