オブジェクトの形を書く
INPUT · スライド
01 / 06
?現実のデータには「ある人と無い人がいる項目」があるよ。よび名を登録している人としていない人、というような。
そういうプロパティは、名前のうしろに ? を付ける。書かなくてもいい項目という意味になる。
interface Hito { namae: string; aisho?: string;}const yui: Hito = { namae: "ゆい" };console.log(yui);実行結果
{ namae: "ゆい" }02 / 06
? を付けた項目は、そのままでは使えない? を付けると、TypeScript は「入っていないかもしれない」と考えるようになる。
だから確かめずに使おうとすると止められるよ。「undefined の可能性があります」というのがそれだ。これは実際に起きるバグを先に見せてくれているんだ。
interface Hito { namae: string; aisho?: string;}const yui: Hito = { namae: "ゆい" };console.log(yui.aisho.length);実行結果
型のエラー: 'yui.aisho' は 'undefined' の可能性があります。
03 / 06
!== undefined で確かめてから使う入っているかどうかを if で確かめると、その中では TypeScript も「ここは入っている」と分かってくれる。
書き方は if (変数.項目 !== undefined) {。確かめてから使うという当たり前の手順を、型が思い出させてくれるんだよ。
interface Hito { namae: string; aisho?: string;}const rin: Hito = { namae: "りん", aisho: "りんちゃん",};if (rin.aisho !== undefined) { console.log(rin.aisho);}実行結果
りんちゃん
04 / 06
readonly逆に、作ったあとに変えてほしくない項目もある。会員番号や学籍番号のようなものだよ。
そういうプロパティには、名前の前に readonly を付ける。付けていない項目はこれまでどおり書きかえられる。
interface Kaiin { readonly bangou: number; namae: string;}const k: Kaiin = { bangou: 7, namae: "ゆい" };k.namae = "ゆいこ";console.log(k);実行結果
{ bangou: 7, namae: "ゆいこ" }05 / 06
readonly に代入すると止まるreadonly を付けた項目に代入しようとすると、その行でエラーになる。
コメントで「ここはいじらないでね」と書いても読まれないことがあるけれど、型に書けば読まれなくても守られるよ。
interface Kaiin { readonly bangou: number; namae: string;}const k: Kaiin = { bangou: 7, namae: "ゆい" };k.bangou = 9;実行結果
型のエラー: 読み取り専用プロパティであるため、'bangou' に代入することはできません。
06 / 06
? と readonly は、どちらもほんの数文字だ。それだけで「無いかもしれない」「変えてはいけない」というデータの決まりごとをコードに書き残せる。
書き残しておけば、あとから触る人が決まりを知らなくても、型が止めてくれる。ここから書いてみよう。