Angularのための、TypeScript入門 その2

Typescript - Classes - Part 1

参考サイト

https://www.codingforentrepreneurs.com/projects/getting-started-typescript/

概要

• typescriptのclassをゼロから作ってみる。

class SweetSweetBasil {
  constructor(name:string){ // constructorは、インスタンスがnew演算子で新規作成されたときに、実行される関数
    console.log("Hello " + name)
  }
}

let basil = new SweetSweetBasil("World") // newでclassのinstanceを作成する
let basil = new SweetSweetBasil("basil")

• new 演算子は、コンストラクタ関数を持ったユーザ定義のインスタンスを作成する。つまりここでは、new SweetSweetBasilのインスタンスを作成する。SweetSweetBasilは、newでインスタンスが作成されると、SweetSweetBasil classのコンストラクタ関数を実行する。

• SweetSweetBasilにcolor()メソッドを追記してみる。

class SweetSweetBasil {
  constructor(name:string){ // constructorは読み込みと同時に実行される
    console.log("Hello " + name)
  }
  color(){ // color メソッドを定義する。
    console.log("Green")
  }
}

let world = new SweetSweetBasil("World")
let basil = new SweetSweetBasil("basil")

basil.color()
world.color()

Typescript - Classes - Part 2

• classの内容を少し複雑にしてみる。

class SweetSweetBasil {
  color: string; // 変数アノテーションを指定する。
  constructor(name:string, startColor:string){ // constructorは読み込みと同時に実行される
    console.log("Hello " + name)
    this.color = startColor //pythonで言うところの、self.color, new instance されたときに、this.colorにstartColorを代入する
  }
  getColor(){
    console.log("Green")
  }
}
let world = new SweetSweetBasil("World", "green")
let basil = new SweetSweetBasil("basil", "bright green")
basil.getColor()
world.getColor()

console.log(basil.color)
console.log(world.color)

• classをextends で継承してみる。

class SweetSweetBasil {
  color: string;
  constructor(name:string, startColor:string){ // constructorは読み込みと同時に実行される
    console.log("Hello " + name)
    this.color = startColor //pythonで言うところの、self.color
  }
  getColor(){
    console.log("Green")
  }
}
let world = new SweetSweetBasil("World", "green")
let basil = new SweetSweetBasil("basil", "bright green")
basil.getColor()
world.getColor()

console.log(basil.color)
console.log(world.color)


class Basil extends SweetSweetBasil { // extendsで、classを継承
  constructor(name:string, startColor:string){ // constructorの引数は省略ｄけいない
    super(name, startColor) // super()で継承する必要あり、ここも省略できない
  }
}

let basil3 = new Basil("basil", "light green")

basil3.getColor()
console.log(basil3.color)

• constructorと継承の昨日の確認をしてみる。

class SweetSweetBasil {
  color: string;
  constructor(name:string, startColor:string){
    console.log("Hello " + name)
    this.color = startColor  
  }
  getColor(){
    console.log(this.color) // ここをthis.color(self.color)に修正する。
  }
}


class Basil extends SweetSweetBasil {
  constructor(name:string, startColor:string){
    super(name, startColor)
  }
  setNewColor(newColor:string){
    this.color = newColor
  }
}

let basil3 = new Basil("basil", "light green")

basil3.getColor() //lightgreen　になる。
basil3.setNewColor("Red") //Red
basil3.getColor() //red
console.log(basil3.color)