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

1. 関数とは？

1. 関数とは？

関数とは、ある処理をひとまとまりにして名前を付けたものです。毎回同じ処理を書く代わりに、必要なときに呼び出して使い回せるのが大きな特徴です。

関数には、引数（ひきすう）と戻り値（もどりち）があります。引数は関数に渡す材料、戻り値は処理が終わったあとに返ってくる結果だと考えると分かりやすいでしょう。

たとえば「名前を受け取って挨拶文を作る」といった処理も、関数にしておくと何度でも使えます。

function sayHello(name: string): string {
    return `こんにちは、${name}さん`;
}

let message = sayHello("花子");
console.log(message);

こんにちは、花子さん

この例では、nameが引数、returnで返している文字列が戻り値です。TypeScriptでは、こうした関数に型をつけることで、間違った使い方を事前に防げるようになります。

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

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

TypeScriptで関数に型をつけるときは、「引数の型」と「戻り値の型」をセットで考えるのが基本です。最初は少し難しく見えるかもしれませんが、形はとても決まっています。

関数名のあとにある丸かっこの中では、引数名の後ろに: 型を書きます。そして、丸かっこを閉じたあとに関数全体の戻り値の型を指定します。

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

例えば、「数値を1つ受け取って、その数値をそのまま返す」だけのシンプルな関数は、次のように書けます。

function echoNumber(value: number): number {
    return value;
}

let result = echoNumber(10);
console.log(result);

10

このように、引数と戻り値の型を最初に決めておくことで、「どんな値を受け取って、どんな結果を返す関数なのか」が一目で分かるようになります。初心者の方は、まずこの基本の形をそのまま覚えるのがおすすめです。

3. 引数に型をつける例

3. 引数に型をつける例

例えば、年齢を受け取って画面に表示する関数を作る場合は、次のように書けます。ここでは引数にnumber型を指定して、「年齢は数字だけ」とルールを決めています。

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

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

あなたの年齢は25歳です

ポイントは、age: numberの部分です。これがあることで、文字列（"二十歳"のようなstring）を間違って渡したときに、TypeScriptが「その使い方は違うよ」と教えてくれます。

初心者のうちは、引数の型をつけるメリットを「入力ミスを早い段階で見つけられる」と捉えるとイメージしやすいです。特に、数値を扱う計算や、年齢・個数・金額などのデータでは、型を決めておくと安心してコードを書けます。

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

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

次に、2つの数字を足してその合計を返す関数を作ります。ここで大事なのは、関数の右側にある: numberの部分です。これが「この関数は最後に数字（number）を返します」という宣言になります。

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

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

12

このように戻り値の型を決めておくと、「返ってくる結果が何の型なのか」がはっきりします。たとえば、合計を文字として返してしまうようなミスがあると、TypeScriptがエラーで気づかせてくれます。

function addNumbersWrong(a: number, b: number): number {
    return "合計は" + (a + b); // エラー！戻り値はnumberのはずなのにstringを返している
}

初心者の方は、「戻り値の型は、関数の答えの種類を決めるもの」と覚えると分かりやすいです。計算結果を返すならnumber、文章を返すならstring、というように、目的に合わせて指定していきます。

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を活用していくうえで、関数に型をつける知識は欠かせない基礎になりますので、繰り返し書きながら自分のものにしていきましょう。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

TypeScriptの関数に型をつけるとはどういう意味ですか？

TypeScriptでは関数に「引数」や「戻り値」の型を指定できます。これにより、間違った型のデータを渡したり返したりするのを防ぎ、コードの安全性が高まります。