省略できる項目と変えない項目

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

1文字ぶんの手間で、壊れる余地が減る

? と readonly は、どちらもほんの数文字だ。それだけで「無いかもしれない」「変えてはいけない」というデータの決まりごとをコードに書き残せる。

書き残しておけば、あとから触る人が決まりを知らなくても、型が止めてくれる。ここから書いてみよう。