【TypeScript】基本となるTypeScriptのクラス宣言について解説

今回はTypeScriptのクラス宣言について簡単にまとめたので解説したいと思います。型を定義するということ以外、基本的にはJavaScriptと変わりませんが改めてみていきましょう。

JavaScriptの復習がてら見ていただけたらと思います。

この記事の内容

クラス宣言の基本形
クラス宣言の省略形
まとめ
参考

クラス宣言の基本形

TypeScriptのクラス宣言の基本形は以下になります。

class Fruits {
  fruitsname: string;

  constructor(fruitsname: string) {
    this.fruitsname = fruitsname;
  }

  say(): void {
    console.log("私は" + this.fruitsname + "を食べたい")；
  }
}

var fruits = new Fruits("ぶどう");
console.log(fruits.fruitsname);

fruits.say();

上記のコードを分解して具体的に見ていきましょう。

まずはクラス名を定義してあげます。今回はFruitsクラスというものを定義しました。

class Fruits {
}

クラス名の先頭は大文字にする決まりがあります。

クラスの中には変数とメソッドを定義できるので、以下のようにfruitsnameという変数とsay()というメソッドを定義しました。

class Fruits {
  fruitsname: string;
  say(): void {
  }
}

void型とは返り値がない場合に定義する型です。

次に、メソッドの中にfruitsnameを表示させるためのコードを追記します。

class Fruits {
  fruitsname: string;
  say(): void {
    console.log("好きなフルーツは" + this.fruitsname + "です。")
  }
}

クラス内の変数を呼び出すには、変数名の前に「this」を付与してあげます。

続いてクラスがインスタンス化される際に必ず呼ばれるコンストラクタというものを記述します。引数が入ってくる場合は、constructorというキーワードの後にその引数を記述します。

以下の記述は、fruitsnameという引数がきた場合にクラス内の変数であるfruitsnameにセットするというものです。

class Fruits {
  fruitsname: string;

  constructor(fruitsname: string) {
    this.fruitsname = fruitsname;
  }

  say(): void {
    console.log("好きなフルーツは" + this.fruitsname + "です。")
  }
}

ここまででクラスの定義が完了したので、後は呼び出す記述を追記してあげます。まずはfruitsnameを出してみましょう。

class Fruits {
  fruitsname: string;

  constructor(fruitsname: string) {
    this.fruitsname = fruitsname;
  }

  say(): void {
    console.log("好きなフルーツは" + this.fruitsname + "です。")
  }
}

var favorite = new Fruits("ぶどう");
console.log(favorite.fruitsname);
=> ぶどう

最後にsay()メソッドにもアクセスしてみます。

class Fruits {
  fruitsname: string;

  constructor(fruitsname: string) {
    this.fruitsname = fruitsname;
  }

  say(): void {
    console.log("好きなフルーツは" + this.fruitsname + "です。")
  }
}

var favorite = new Fruits("ぶどう");
console.log(favorite.fruitsname);
=> ぶどう

favorite.say();
=> 好きなフルーツはぶどうです。

クラス宣言の省略形

constructorに渡ってきた引数をクラス内の変数に渡すという処理はよく行われるため、省略形が用意されています。

class Fruits {
  constructor(public fruitsname: string) {
  }

  say(): void {
    console.log("好きなフルーツは" + this.fruitsname + "です。")
  }
}

var favorite = new Fruits("ぶどう");
console.log(favorite.fruitsname);
=> ぶどう

favorite.say();
=> 好きなフルーツはぶどうです。

publicはアクセス修飾子と呼ばれ、他にもprivateとprotectedがあります。

privateは定義があるクラス以外からの操作を禁止、protectedは定義のあるクラスと子クラス以外からの操作を禁止、publicは内外問わずすべての操作を許可するという意味です。