クラスのフィールドに型を書く

01 / 05

JavaScript と同じに書くと怒られる

JavaScript コースで書いたクラスを、そのまま TypeScript に持ってくると赤くなる。constructor の中で this.namae に値を入れているだけなのに、だ。

出るのは「プロパティ 'namae' は型 'Hito' に存在しません」。TypeScript にとってクラスはどんなデータを持つかの設計図でもあるから、宣言していないものが急に生えてくるのを許さないんだよ。

class Hito {  constructor(namae: string) {    this.namae = namae;  }}

実行結果

型のエラー: プロパティ 'namae' は型 'Hito' に存在しません。

02 / 05

持ちものを先に書く

直し方はかんたん。class の { のすぐ下に、持つものの名前と型を1行ずつ書く。この1つずつをフィールドと呼ぶよ。

宣言してしまえば this.namae はこのクラスのもの。あとは JavaScript のときと同じように代入して、外から読める。

class Hito {  namae: string;  constructor(namae: string) {    this.namae = namae;  }}const h = new Hito("ゆい");console.log(h.namae);

実行結果

ゆい

03 / 05

宣言したら必ず入れる

宣言だけして constructor で代入しないと、こんどは別のエラーが出る。「プロパティ 'namae' に初期化子がなく、コンストラクターで明確に割り当てられていません」だ。

長いけれど、言っているのは「持つと宣言したのに、入れていないよ」ということ。宣言と代入はセットだと覚えておこう。

class Hito {  namae: string;  constructor() {  }}

実行結果

型のエラー: プロパティ 'namae' に初期化子がなく、コンストラクターで明確に割り当てられていません。

04 / 05

メソッドにも型を書く

メソッドの引数と戻り値の型は、ふつうの関数とまったく同じ書き方だよ。かっこの中に引数の型、かっこのうしろに戻り値の型。

this. で読んだフィールドにも型が付いているから、文字列と数値の取りちがえもここで見つかる。

class Hito {  namae: string;  constructor(namae: string) {    this.namae = namae;  }  yobu(keishou: string): string {    return this.namae + keishou;  }}const h = new Hito("ゆい");console.log(h.yobu("さん"));

実行結果

ゆいさん

05 / 05

表示するとフィールドだけが出る

インスタンスをそのまま console.log に渡すと、持っているフィールドがオブジェクトの形で出てくる。メソッドは出ないよ。

中身をまとめて確かめたいときに便利。1つだけ見たいなら h.namae のようにプロパティを指定すればいい。ここから書いてみよう。

class Hito {  namae: string;  toshi: number;  constructor(namae: string, toshi: number) {    this.namae = namae;    this.toshi = toshi;  }}const h = new Hito("ゆい", 20);console.log(h);

実行結果

{ namae: "ゆい", toshi: 20 }