Ceeds Academy教材アプリ教材・症状語・タグで検索
索引グラフ試す
プログラミング言語▸TypeScript

TypeScript: 関数(引数/戻り値の型・アロー関数)

hands-on所要 20分最新草稿
前提: TypeScript: 変数と基本型(let/const・型注釈)→次: TypeScript: オブジェクトと型定義(interface / type)
意味グラフ(この教材と内容的に近い教材・1ネスト)
例え(Analogies)
関数の型=自販機の仕様

関数の引数/戻り値の型は、自販機の「コインを入れたら飲み物が出る」という仕様書。入れる物と出る物が決まっているから、誤った使い方を弾ける。

概要

📍 programming-languages ▸ TypeScript ▸ 関数 | 種別: hands-on | facts_as_of 2026-06(TypeScript 6.0)

公式ドキュメント — hands-on

🎞 スライド

関数に型をつける

引数と戻り値の両方

形(テキスト図)

function add(a: number, b: number): number
↑引数の型 ↑戻り値の型

バリエーション

アロー関数 … (name: string): string => ...
オプション … level?: string(あってもなくても可)
デフォルト … step: number = 1(省略時は 1)
値を返さない … 戻り値は void

—
出典(sources)

TypeScript Handbook (Functions) ; TypeScript 6.0 / 2026-06確認

確認問題(Review-Questions)
オプション引数を表す記法は?択一
基礎公式
解答・解説▾ 開く

引数名の後ろに ?(例: level?: string)。

2つのnumberを受け取りnumberを返すアロー関数 add を書け。コード
基礎公式
解答・解説▾ 開く

const add = (a: number, b: number): number => a + b;

目次
例え概要公式ドキュメント出典確認問題
鮮度
最新
更新: 2026-06-15
次回棚卸し: 2026-12-15
周期: 6か月
版: TypeScript 6.0

概要

関数の引数と戻り値に型をつける。アロー関数、オプション引数(?)、デフォルト値も扱う。

公式ドキュメント準拠(TypeScript 6.0)

エディタを読み込み中…
  • 戻り値が無い関数は void。アロー関数は簡潔で this の振る舞いが異なる。

出典: TS Handbook: Functions

🧭 誤解訂正集

よくある誤解 正しい理解
引数は必ず渡す ? を付けたオプション引数は省略できる
戻り値の型は省ける 省略可だが、明示すると return の取り違えを防げる
アローと function は同じ this の振る舞いが異なる

📖 用語

  • 引数 / 戻り値 … 関数に渡す値 / 関数が返す値。それぞれに型を付ける。
  • アロー関数 … (x) => ... の簡潔な関数。this の扱いが function と異なる。
  • オプション引数 … level? のように省略可能な引数。
  • デフォルト値 … step = 1 のように省略時に使う既定値。
  • void … 値を返さない関数の戻り値型。

✅ 確認の目安(can-do)

引数・戻り値の型、オプション引数、デフォルト値、void を区別し、**「この関数の引数は必須か任意か・戻り値の型をどう書くか」**を判断できる。

⚠️ エラー復旧集

症状 原因 復旧
Expected 2 arguments, but got 1 引数不足 引数を渡す。任意なら ? でオプション化
戻り値の型不一致 return の型違い return する値と戻り値型を揃える