TypeScriptの関数に型をつける方法（引数・戻り値）を初心者向けに徹底解説！

1. 関数とは？

1. 関数とは？

関数とは、ある処理をひとまとまりにして名前を付けたものです。何度も同じ処理を使いたいときに便利です。引数とは、関数に渡す入力データのこと、戻り値とは、関数が処理を終えたあとに返す結果のことです。

TypeScriptでは、関数を作るときに「引数」と「戻り値」の型を指定できます。これにより、意図しないデータ型を受け取ったり返したりすることを防ぎます。

2. 関数に型をつける基本構文

2. 関数に型をつける基本構文

TypeScriptで関数に型をつけるときは、次のように書きます。

function 関数名(引数名: 型, 引数名2: 型): 戻り値の型 {
    // 処理内容
    return 戻り値;
}

ポイントは、引数の後に: 型と書くこと、そして関数の丸かっこの後にも: 戻り値の型を書くことです。

3. 引数に型をつける例

3. 引数に型をつける例

例えば、年齢を受け取って画面に表示する関数を作る場合は、次のように書けます。

function printAge(age: number) {
    console.log(`あなたの年齢は${age}歳です`);
}

printAge(25); // 正しい使い方
printAge("二十歳"); // エラー！string型はnumber型に代入できません

あなたの年齢は25歳です

このように、引数にnumber型を指定しておけば、文字列（string）が入ったときにエラーを出してくれます。

4. 戻り値に型をつける例

4. 戻り値に型をつける例

次に、2つの数字を足してその合計を返す関数を作ります。

function addNumbers(a: number, b: number): number {
    return a + b;
}

let sum = addNumbers(5, 7);
console.log(sum);

12

この場合、戻り値の型をnumberと指定しているので、もし間違って文字列を返そうとするとエラーになります。

5. 引数と戻り値の両方に型をつける

5. 引数と戻り値の両方に型をつける

引数にも戻り値にも型をつけることで、さらに安全な関数が作れます。

function greet(name: string, age: number): string {
    return `こんにちは、${name}さん。${age}歳ですね！`;
}

let message = greet("太郎", 30);
console.log(message);

こんにちは、太郎さん。30歳ですね！

引数の型が決まっているため、順番を間違えたり、異なる型を渡したときにすぐ気づけます。

6. 型を省略した場合の動き（型推論）

6. 型を省略した場合の動き（型推論）

TypeScriptは型を省略しても自動的に型を推測（型推論）します。しかし、明示的に型を指定したほうが、後からコードを読む人にも分かりやすくなります。

function multiply(a: number, b: number) {
    return a * b; // 戻り値は自動的にnumber型と推論される
}

ただし、意図しない型の値を返す可能性がある場合は、必ず明示的に型を書きましょう。

7. 複数の引数を持つ場合の注意点

7. 複数の引数を持つ場合の注意点

関数が複数の引数を持つ場合、それぞれに型を指定します。型指定を忘れると、意図しないデータが渡されても気づけません。

function createUser(name: string, age: number, isActive: boolean): string {
    return `${name}さん（${age}歳）は${isActive ? "有効" : "無効"}ユーザーです`;
}

まとめ

まとめ

TypeScriptで関数に型をつける方法について振り返ってみると、引数や戻り値に型を与えることが、どれほど大きな役割を果たしているかがよく分かります。とくに初心者のうちは「型を書くのが面倒だな」と感じることも多いのですが、型を明確にすることで、後からコードを読み返したときの理解しやすさが大きく変わってきますし、作り手自身がミスに気付きやすくなり、プログラム全体の整合性も保たれます。実際の開発現場では、引数の型や戻り値の型をしっかり指定しておくことで、関数の役割がひと目で分かり、どのような値を扱っているのかが直感的に理解できるため、とても重宝される書き方です。 また、関数が複数の引数を持つ場合や、返す値が複雑なオブジェクトになる場合、型が付いているかどうかでコードの扱いやすさは大きく変わります。型が無ければ、どの引数にどんなデータを渡すべきなのか分かりにくくなり、間違った型を渡しても気付けないことがあります。しかし型を明示しておけば、ひとつひとつの引数の役割が明確になり、誤った値を渡したときにはすぐにエラーで知らせてくれるため、安心してコードを書き進められます。 型推論も便利な機能ではありますが、意図した型と異なる推論が行われることもあり、特に学び始めの時期や複雑なロジックを書く場合には、できるだけ自分で型を明示する習慣をつけておくと、のちの混乱を避けられます。また、戻り値の型をしっかりと書いておくことで、関数が最終的にどのような値を返すべきかがすぐに分かり、関数自体の目的がはっきりし、ほかの人と協力して開発するときにもスムーズに進みやすくなります。 以下には、今回の学習内容を少し応用したサンプルとして、引数と戻り値に型をつけながら、処理パターンを切り替えられる関数を用意しています。実際にこのような関数構成は、日常的なアプリケーションやフォーム入力の検証、データの整理といった場面でも使いどころが多く、TypeScriptの型の強さがよく感じられる例になるでしょう。

追加のサンプルプログラム

ここでは、ユーザーの入力値をもとに、条件によって異なるメッセージを返す関数を示しています。引数にも戻り値にも型をつけておくことで、予期しない値が混ざり込むことを避け、どのような内容が返ってくるのかも明確になります。

function checkScore(name: string, score: number): string {
    if (score >= 80) {
        return `${name}さんの成績は良好です。引き続き頑張りましょう。`;
    } else if (score >= 50) {
        return `${name}さんは平均的なスコアです。さらに理解を深めると良いですね。`;
    } else {
        return `${name}さんは基礎の復習がおすすめです。ゆっくり丁寧に身につけていきましょう。`;
    }
}

console.log(checkScore("花子", 82));
console.log(checkScore("花子", 61));
console.log(checkScore("花子", 40));

この例のように、関数に型を指定することで処理内容が明確になり、引数にもルールが適用されるため、プログラムが意図した流れで動くようになります。特に文字列を扱う関数や数値計算を行う関数、条件分岐が増えていく処理などは、型の有無でコードの分かりやすさが大きく変わっていきます。ユーザーが入力するデータを安全に扱いたいときにも、型があることで予期しない値が紛れ込むことを防ぎ、安心して開発を進められるようになります。 初心者のうちは、引数に型を書くことを忘れてしまいがちですが、小さな関数から慣れていけば自然と身についていきます。日常的にコードを書く中で「この関数はどんな値を受け取り、どんな値を返すべきなのか」を意識するだけでも理解が深まりますし、コードの品質も確実に向上していきます。TypeScriptを活用していくうえで、関数に型をつける知識は欠かせない基礎になりますので、繰り返し書きながら自分のものにしていきましょう。