SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ますます便利になるTypeScript! バージョン3からの変更点と総まとめ

プライベート構文やアクセサなど、TypeScriptのクラス構文に関する変更点を解説

ますます便利になるTypeScript! バージョン3からの変更点と総まとめ 第5回

  • X ポスト
  • このエントリーをはてなブックマークに追加

コンストラクタからフィールドの型推論を

 次に紹介するクラス構文に関する新機能は、バージョン4.0で導入されたコンストラクタからのフィールドの型推論です。

フィールドの型指定を省略

 例えば、リスト1のBMIDataクラスの(1)〜(3)のそれぞれのフィールドには、データ型が記述されています。これは、以下のように初期値を記述することで、その初期値からの型推論が働くため、データ型指定を省略できます。

#name = "";

 この型推論が、コンストラクタでの値代入から働くようにバージョン4.0で改良されました。この仕組みを利用すると、BMIDataクラスは、リスト5のように記述できます。

リスト5:コンストラクタからの型推論を利用したフィールド定義
class BMIData {
  #name;  // (1)
  #height;  // (2)
  #weight;  // (3)
  constructor(name: string, height: number, weight: number) {
    this.#name = name;  // (4)
    this.#height = height;  // (5)
    this.#weight = weight;  // (6)
  }
  :
}

 リスト5のBMIDataクラスでは、(1)〜(3)のフィールドには型指定も初期値も記述していません。にもかかわらず、図2のように、#nameはstringと型推論されています。

図2: #nameの型が型推論によりstringに
図2: #nameの型が型推論によりstringに

 この原因は、(4)のコードにあります。(4)でフィールドの#nameにstring型のnameを代入しているため、この型推論によりデータ型が決まるようになっています。(2)の#heightも(5)のコードでnumber型に、(3)の#weightも(6)のコードで同じくnumber型になります。

 ただし、このコンストラクタからの型推論が働くのは、コンパイルオプションとして、noImplicitAnyが有効な場合のみなのには注意しておいてください。

型推論の注意すべき点

 また、この型推論は、コンストラクタ内での値の代入で決まりますので、必ずしも引数の受け渡しである必要はありません。例えば、以下のコードのように、何か値を代入することで、フィールドの型は決定される点には留意しておいてください。

constructor(…) {
  this.#name = "名無し";
  :
}

 さらに、このフィールドの型推論に関して注意しておかなければならないのは、型推論が働くのは、あくまでコンストラクタの処理のみということです。例えば、initialize()というメソッドを用意し、リスト6のようにコンストラクタからこのinitialize()メソッドを呼び出したとしても、#weightへの型推論は働かず、#weightはany型となってしまうので注意してください。

リスト6:コンストラクタ以外からは型推論が働かない例
class BMIData {
  #name;
  #height;
  #weight;
  constructor(name: string, height: number, weight: number) {
    this.#name = name;
    this.#height = height;
    this.initialize(weight);
  }
  initialize(weight: number) {
    this.#weight = weight;
  }
  :
}

子クラスでのsuper()の位置

 コンストラクタ続きで、次に紹介するのは、子クラスでのsuper()の位置に関する変更です。バージョン4.6で導入された地味な変更ですが、それなりの影響力もあるので紹介します。

コンストラクタ内でのsuper()の位置に注意

 例えば、リスト1のBMIDataを継承したBMIDataWithAgeクラスを考えたとします。このクラスでは、コンストラクタ内で親クラスであるBMIDataのコンストラクタをsuper()で呼び出す必要があるため、リスト7のようなコードになります。

リスト7:コンストラクタ内でのsuper()の例
class BMIDataWithAge extends BMIData {
  #age: number;
  constructor(name: string, height: number, weight: number, age: number) {  // (1)
    console.log("初期化されました");  // (2)
    super(name, height, weight);  // (3)
    this.#age = age;  // (4)
  }
}

 リスト7では、(1)でコンストラクタを定義し、(3)で親クラスのコンストラクタを呼び出し、引数を渡しています。(4)がこのクラスのコンストラクタの独自の処理であり、フィールドに引数を代入しています。

 ここで問題となるのが、(2)です。これまでsuper()を記述する位置は、コンストラクタ内で一番先頭という約束事でした。したがって、(2)のように、super()より前にコードを記述すると、エラーとなっていました。これが、バージョン4.6で変更され、現在、(2)のコードはエラーとなりません。

コンストラクタ内でのsuper()の位置の条件

 ただし、この仕組みには制約があり、super()より前に記述できるコードにはthisアクセスを含みません。そのため、例えば、(4)のコードを以下のようにsuper()より前に記述すると、依然エラーとなるので、注意してください。

constructor(name: string, height: number, weight: number, age: number) {
  this.#age = age;
  super(name, height, weight);
}

次のページ
アクセサに関する新しい仕組みとは

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ますます便利になるTypeScript! バージョン3からの変更点と総まとめ連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 齊藤 新三(サイトウ シンゾウ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook <個人紹介>WINGSプロジェクト所属のテクニカルライター。Web系製作会社のシステム部門、SI会社を経てフリーランスとして独立。屋号はSarva(サルヴァ)。HAL大阪の非常勤講師を兼務。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/19501 2024/05/30 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング