TypeScriptの型注釈とは
TypeScriptの型注釈とは、変数や関数に対して「どんな型の値を扱うか」を明示する書き方です。変数の後ろや関数の引数・戻り値に: 型名という形で記述します。
なぜ型注釈が必要なのか
JavaScriptでは、変数にどんな値でも自由に代入できます。
// JavaScript
let price = 1000;
price = "1000円"; // 数値のつもりが文字列に変わっても、実行するまで気づけない型注釈を付けておけば、こうした意図しない変化をコードを書いている段階で検知できます。特に関数は複数の場所から呼び出されることが多いため、引数や戻り値の型を明示しておくメリットが大きくなります。
変数の型注釈の書き方
変数名の後ろに: 型名を書きます。
let name: string = "kino";
let age: number = 30;
let isStudent: boolean = false;基本の型はstring（文字列）、number（数値）、boolean（真偽値）の3つを押さえておけば、日常的なコードの大半はカバーできます。
関数の引数の型注釈
関数の引数にも、変数と同じ書き方で型を指定します。
function greet(name: string) {
console.log(`こんにちは、${name}さん`);
}
greet("kino"); // OK
greet(123); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.引数の型注釈は省略できないルールになっています。TypeScriptが引数の型まで推論してくれることはないため、関数を書くときは必ず引数に型を書く癖をつけておくと安全です。
関数の戻り値の型注釈
戻り値の型は、引数リストの後ろに書きます。
function add(a: number, b: number): number {
return a + b;
}戻り値の型は、実は多くの場合で省略可能です（TypeScriptがreturnの中身から自動で推論してくれます）。ただし、意図しない型が返ってしまうミスに気づきやすくするため、あえて明示しておくのがおすすめです。何も値を返さない関数には、voidという型を使います。
function logMessage(message: string): void {
console.log(message);
// 何も return しない
}デフォルト引数・オプション引数の書き方
「値を渡さなかったときの初期値」を決めておきたい場合は、デフォルト引数を使います。
function greet(name: string, honorific: string = "さん") {
console.log(`${name}${honorific}、こんにちは`);
}
greet("kino"); // "kinoさん、こんにちは"
greet("kino", "先生"); // "kino先生、こんにちは"「渡しても渡さなくてもいい引数」にしたいだけであれば、オブジェクトの型定義でも紹介した?を引数にも使えます。
function greet(name: string, honorific?: string) {
console.log(`${name}${honorific ?? ""}、こんにちは`);
}配列やオブジェクトの型定義における?の使い方は、こちらの記事でも紹介しています。
アロー関数の型注釈
Reactのコードなどでよく使うアロー関数も、書き方はほぼ同じです。
const add = (a: number, b: number): number => {
return a + b;
};
const multiply = (a: number, b: number): number => a * b;通常の関数と違い、アロー関数は変数に代入する形になるため、変数側に型注釈を付けたくなるかもしれませんが、上記のように引数・戻り値それぞれに書くのが基本の形です。
型注釈を省略していい場面
ここまで「型注釈を書く」ことを中心に説明してきましたが、実はすべての場所に書く必要はありません。
let count = 0; // number型として自動推論されるので、型注釈は省略してOK初期値から型が明らかな変数や、多くの関数の戻り値は、TypeScriptの型推論に任せて省略しても問題ありません。逆に、関数の引数のように推論できない場所には必ず書く、というメリハリを意識すると、コードもすっきりします。型推論の詳しい仕組みはこちらの記事で解説しています。
よくあるエラー
function add(a: number, b: number): number {
return a + b;
}
add(1); // Error: Expected 2 arguments, but got 1.これは、関数が必要としている引数の数と、実際に渡した数が合っていないために起きるエラーです。デフォルト引数やオプション引数（?）を使っていない引数は、必ず渡す必要があります。
よくある質問
Q. 型注釈は必ず書かないといけませんか？
A. いいえ。関数の引数以外は、型推論に任せて省略できる場面が多いです。ただし、意図を明確にするためにあえて書くこともよくあります。
Q. voidとは何ですか？
A. 何も値を返さない関数の戻り値に使う型です。returnを書かない関数によく使われます。
Q. デフォルト引数とオプション引数はどう使い分けますか？
A. 「値を渡さなかったときの初期値」を決めたいならデフォルト引数、「渡さなくてもエラーにしたくない」だけならオプション引数（?）を使います。
まとめ
- 型注釈は変数・関数の後ろに
: 型名という形で書く - 関数の引数の型注釈は省略できないが、戻り値や初期値のある変数は省略できることが多い
- デフォルト引数・オプション引数を使い分けると、柔軟な関数が書ける
- アロー関数も、通常の関数と同じ考え方で型注釈を付けられる
公式ドキュメントにも、関数の型についてのより詳しい解説があります。
▶ TypeScript公式ドキュメント：More on Functions
にほんブログ村へ
