React入門 ・ Chapter 4

値に型をつける

コード演習 ・ 冒頭を無料公開中

準備運動の4つ目から、TypeScriptに入ります。といっても、身構える必要はありません。これまでの3章、実はすでにTypeScriptのファイル(.ts)の中でコードを書いてきました。この章でやるのは、そこに「型」というメモを書き足すことだけです。

型とは「この箱には何が入るか」のラベル

変数は値を入れる箱でした。TypeScriptでは、箱にラベルを貼れます。

const userName: string = "太郎";
const age: number = 28;
const isStudent: boolean = true;

変数名の後ろに : 型の名前 を書く——これだけです。stringは文字列、numberは数値、booleanはtrue/falseの2値。ラベルを貼ると、「この箱には文字列しか入れない」という約束になります。

型があると何が嬉しいのか

約束を破るとどうなるか、見てみましょう。

const age: number = "28"; // エラー!

コード演習はブラウザ上でそのまま実行できます

本文の残り、エディタ・テスト実行・解答コード・ヒントはプラン加入後に利用できます。

料金プランを見る