TypeScript

【TypeScript】基本となる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は内外問わずすべての操作を許可するという意味です。

まとめ

  • クラス名の先頭は大文字にする。
  • クラス内には変数とメソッドを定義できる。
  • クラス内の変数を呼び出すには、変数名の前にthisを付与する。
  • クラスがインスタンス化される際に必ず呼ばれるものはコンストラクタと呼ばれる。
  • アクセス修飾子にはpublicとprivateとprotectedがある。

参考

JavaScriptとJava風オブジェクト指向文法の歴史:
https://future-architect.github.io/typescript-guide/class.html

コンストラクター:
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes/constructor

 

 

今回はTypeScriptのクラス宣言について解説しました。コンストラクタやアクセス修飾子など、理解が曖昧だった用語もあったのではないでしょうか。ぜひこの機会に理解を深めていただけたらと思います。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です