TypeScriptでのコンストラクタ(constructor)の表現まとめ

はじめに

Typescriptを書いていて、そういえばコンストラクタ(constructor)でこういう書き方もできたなと書き方をど忘れしていたことがあったので、備忘としてTypescriptのいろんな形式のコンストラクタ(constructor)をまとめます。

基本のコンストラクタ(constructor)

基本的なコンストラクタ(constructor)の記述です。
これを少しずつ色々な形に変形していきます。

greeter.ts

class Greeter {
  greeting: string;
  name: string;

  constructor(message: string, name: string) {
    this.greeting = message;
    this.name = name;
  }

  greet() {
    return this.greeting + this.name;
  }
}

let greeter = new Greeter("Hello, ", "Taro");
console.log(greeter.greet()) // => Hello, Taro 

コンストラクタ(constructor)のパラメータをOptional(任意)にしてみる

一部のパラメーターを必須のパラメーターからOptional(任意)のパラメーターにします。
下記の例ではmessageが任意になっています。
あってなくてもいいプロパティがある configのようなclassを作成する場合に利用します。
(* Optionalのパラメーターはconstructorに限らず通常のfunctionの記述でも利用できます。)

greeter.ts

class Greeter {
  greeting: string;
  name: string;

// 任意のパラメーターは必須のパラメーターより先に記述することができないので、messageが後になっています。
  constructor(name: string, message?: string) {
    this.greeting = message ?? '';
    this.name = name;
  }

  greet() {
    return this.greeting + this.name;
  }
}

let greeter = new Greeter("Taro"); //  => messageは任意のプロパティなので、なくてもエラーにならない
console.log(greeter.greet()) // => Taro

constructorでPartialを利用して、オブジェクトを引数にする

Partial<T>はTが持つすべてのプロパティをOptional(任意)のプロパティとした型 を提供します。
constructorの引数をPartial<T>とすることで、オブジェクトを引数として初期化することができます。

greeter.ts

class Greeter {
  greeting: string;
  name: string;

// init は {greeting?:string, name?:string } の型として振舞います。
  constructor(init :Partial<Greeter>) {
// Object.assign(this, init) とするとスマートに記述できます。
    this.greeting = init.greeting ?? ''
    this.name = init.name ?? ''
  }

  greet() {
    return this.greeting + this.name;
  }
}

let greeter = new Greeter({name: "Taro"}); //  => Objectをconstructorに渡せます。
console.log(greeter.greet()) // => Taro

Parameter propertiesでプロパティ宣言をシンプルにする

Parameter propertiesを利用することで、プロパティの宣言とconstructorの引数をシンプルに記述できます。

greeter.ts

class Greeter {
  //Parameter propertiesで宣言を行う場合には、アクセス修飾子は必須
  constructor(
    private message: string,
    private name: string
  ){}

  greet() {
    return this.message + this.name;
  }
}

let greeter = new Greeter("Hello, ", "Taro");
console.log(greeter.greet()) // => Hello, Taro 

おわりに

コンストラクタ(constructor)の表現だけでいろいろと便利な表現ができるので、TypeScript面白いな〜と改めて思いました！

参考記事

TypeScriptのclassをオブジェクトで初期化する
TypeScript:Partial
TypeScript:Parameter properties