SHOEISHA iD

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

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

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

TypeScriptの根幹「型システム」、バージョン3から5.2までの変更点を解説!

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

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

 その登場以来、順当にアップデートを重ねているTypeScriptに関して、バージョン3から5.2までの変更点をまとめて紹介するのが、本連載です。前回は、タプルに関しての変更点を紹介しました。今回は、TypeScriptの根幹ともいえる型システムに関する変更点を紹介します。

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

型システムに関する新機能リスト

 本連載は、TypeScriptのバージョン3から5.2までのアップデート内容を、テーマごとにバージョン横断で紹介する連載です。第3回である今回紹介するのは、TypeScriptの根幹ともいえる型システムの変更点です。具体的には、以下の内容を順に紹介します。

  1. ジェネリクスと「...」に関する新機能
  2. constキーワードに関する新機能
  3. 型定義におけるテンプレート文字列
  4. Mapped型での再マッピング
  5. インデックスシグネチャの新しいキー
  6. catchブロック変数でunknownが可能
  7. returnのない関数の戻り値

ジェネリクスと「...」に関する新機能

 最初に紹介するのは、ジェネリクスと「...」演算子に関する新機能です。

ジェネリクスとスプレッド演算子の組合せ

 例えば、個人情報を表す型定義としてPersonalBaseDataがあり、プロパティとしてid(number型)、name(string型)、phone(string型)があるとします。同様に、id、name、birth(Date型)プロパティが定義されたPersonalBirthDataがあるとします。これらのオブジェクトを、スプレッド演算子を使ってマージするリスト1のような関数を定義したとします。この関数の戻り値は、id、name、phone、birthのプロパティが含まれたオブジェクトとなります。

リスト1:PersonalBaseDataとPersonalBirthDataをマージする関数
function mergePersonalData(base: PersonalBaseData, birth: PersonalBirthData) {
  return {...base, ...birth};
}

 このような関数の引数の型を汎用化し、さまざまなオブジェクトに適用できる関数として、リスト2のようなものを考えたとします。

リスト2:ふたつのオブジェクトをマージする関数
function mergeData<B, E>(base: B, extended: E) {
  return {...base, ...extended};
}

 このmergeData()関数では、リスト1のmergePersonalData()関数と違い、BやEが実行時に指定されるため、そもそもスプレッド演算子で展開できるデータ型かどうかが判定できません。そのため、エラー表示となっていました。それが、バージョン3.2で、エラーとならずに問題なく関数定義ができるように変更されています。

ジェネリクスと残余構文の組合せ

 ...演算子は、スプレッド演算子以外に残余構文でも利用されます。そのような構文とジェネリクスを組合せたコードとして、リスト3のような関数を考えます。

リスト3:ジェネリクスと残余構文を組合せた関数の例
function extractOtherPersonalProperties<PD extends PersonalBaseData>(personalData: PD) {
  const {id, name, phone, ...otherProperties} = personalData;
  return otherProperties;
}

 このextractOtherPersonalProperties()のジェネリクスで記述されているPersonalBaseDataは、前項のPersonalBaseDataと同じ、すなわち、id、name、phoneの各プロパティが存在するオブジェクトとします。よって、extractOtherPersonalProperties()の引数の型であるPDは、PersonalBaseDataを拡張した型、すなわち、プロパティとしてid、name、phoneが含まれていれば、それ以外には任意のプロパティを含めることができます。

 そして、関数内の処理は、引数として渡されたオブジェクトからid、name、phone以外のプロパティのオブジェクトを取り出す処理となっています。その際、...演算子を利用して、引数personalDataのid、name、phone以外が、otherPropertiesに格納されるようにしています。このコードが、以前はエラーとなっていましたが、3.2で問題なく動作するようになりました。

会員登録無料すると、続きをお読みいただけます

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

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

メールバックナンバー

次のページ
constキーワードに関する新機能

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

  • 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/19309 2024/04/17 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング