TypeScriptのclassのプロパティとconstructorのthisは省略可能

classのプロパティとconstructor

TypeScriptでコードを書く際に以下のようなコードを見かける。

class Person {

  name: string
  age: number

  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }

  show(): string {
    return `${this.name} is ${this.age} years old.`
  }
}

const p = new Person('John', 23)
console.log(p.show())

このコードは間違えではないが、class内にプロパティとconstructorのthisの指定が含まれている。

TypeScriptだとconstructorの引数にprivateなどを指定して範囲を限定すればclass内のプロパティとconstructorのthisを書かずに省略することが可能。

class Person {

  constructor(private name: string, private age: number) {
  }

  show(): string {
    return `${this.name} is ${this.age} years old.`
  }
}

const p = new Person('John', 23)
console.log(p.show())

このTypeScriptのコードをJavaScriptにコンパイルしてもプロパティとthisありのコードと同じ結果になる。

コード量をかなり減らして見やすくできるので特に理由がなければなるべく後者の書き方のほうが良い。