前回の記事では TypeScriptの型推論 について解説しました。
TypeScriptでは型推論を利用することで、型を書かなくても安全なコードを書くことができます。
しかし、関数の場合は 型を明示的に指定することが非常に重要です。
この記事では次の内容を解説します。
- TypeScriptの関数型
- 引数の型指定
- 戻り値の型指定
- void型
- Optional引数
- アロー関数の型
関数の型はTypeScriptの中でも非常に重要な部分なので、しっかり理解していきましょう。
TypeScriptの関数とは
JavaScriptでは次のように関数を書きます。
function add(a, b) {
return a + b
}このコードはJavaScriptでは問題なく実行できます。
しかし、次のようなコードもエラーになりません。
add("1", 2)この場合、結果は
"12"になります。
JavaScriptでは文字列と数値を足すと文字列結合になるためです。
このような問題を防ぐために、TypeScriptでは 関数の型を指定することができます。
引数の型
TypeScriptでは引数に型を指定できます。
function add(a: number, b: number) {
return a + b
}このコードでは
a → number
b → numberと定義しています。
そのため次のコードはエラーになります。
add("1", 2)TypeScriptは
string は number に代入できないと判断します。
戻り値の型
TypeScriptでは 戻り値の型 も指定できます。
function add(a: number, b: number): number {
return a + b
}このコードでは
戻り値 → numberと定義しています。
もし次のようなコードを書くと
function add(a: number, b: number): number {
return "hello"
}TypeScriptはエラーを出します。
理由
string は number に代入できないからです。
戻り値の型を指定することで、関数の仕様が明確になります。
void型
戻り値がない関数では void型 を使います。
例
function log(message: string): void {
console.log(message)
}この関数は
戻り値なしです。
そのため
voidを指定します。
void型は
- ログ出力
- UI操作
- 副作用処理
などでよく使われます。
Optional引数
TypeScriptでは Optional引数 を使うことができます。
Optional引数とは
省略できる引数です。
例
function greet(name?: string) {
console.log("Hello " + name)
}この関数は
greet()
greet("Taro")どちらでも実行できます。
Optional引数は
?を使って定義します。
デフォルト引数
JavaScriptと同様に デフォルト値 を設定できます。
function greet(name: string = "Guest") {
console.log("Hello " + name)
}この場合
greet()の結果は
Hello Guestになります。
アロー関数
TypeScriptでもアロー関数が使えます。
const add = (a: number, b: number): number => {
return a + b
}アロー関数は
- React
- Vue
- 配列処理
などで頻繁に使われます。
コールバック関数の型
関数を引数として渡す場合も型を指定できます。
例
function process(callback: (value: number) => void) {
callback(10)
}このコードでは
callbackは
number を受け取る関数として定義されています。
実務での関数型の使い方
実際の開発では関数型は次のような場面で使われます。
API処理
function fetchUser(id: number): Promise<User> {
}計算処理
function calculatePrice(price: number, tax: number): number {
}UIイベント
function handleClick(): void {
}関数の型を明確にすることで
- コードの意図
- 入力データ
- 出力データ
が分かりやすくなります。
関数型を使うメリット
関数型を指定するメリットは次の通りです。
バグを防げる
型チェックで誤った値を防げます。
コードが読みやすい
関数の仕様が明確になります。
IDE補完が強い
引数の型が自動表示されます。
まとめ
この記事では TypeScriptの関数型 を解説しました。
重要なポイントを整理します。
- 引数に型を指定できる
- 戻り値の型も指定できる
- voidは戻り値なし
- Optional引数が使える
- アロー関数も型指定できる
関数型を理解することで、TypeScriptのコードがより安全で読みやすくなります。
次の記事
次回は
TypeScriptのオブジェクト型
を解説します。
TypeScriptでは
- type
- interface
を使ってオブジェクトの構造を定義できます。
これは ReactやAPI開発でも非常に重要な概念です。
コメント