連載
» 2022年06月10日 05時00分 公開

TypeScriptの型エイリアスにまつわるあれこれTypeScriptのTypeあれこれシリーズ(9)

altJS、すなわち、JavaScriptの代わりとなる言語の筆頭であるTypeScript。そのTypeScriptは、言語名が示す通り、JavaScriptにType、つまり、型の概念を持ち込んだものです。本連載では、このTypeScriptのType(型)に関して、さまざまな方向から紹介していきます。前回は、クラスや関数を利用する段階で型の指定ができるジェネリクスについて、紹介しました。今回は、今あるデータ型をもとに、新たなデータ型を定義できる型エイリアスについて、あれこれ紹介していきます。

[齊藤新三(著)/山田祥寛(監修),WINGSプロジェクト]

この記事は会員限定です。会員登録(無料)すると全てご覧いただけます。

「TypeScriptのTypeあれこれシリーズ」のインデックス

連載:TypeScriptのTypeあれこれシリーズ

型エイリアスとtypeキーワード

 まず、これまでに学んできた型について復習しておきます。

 第1回で紹介したように、TypeScriptのデータ型には、小文字から始まるプリミティブ型と大文字から始まるオブジェクト型があります。

 プリミティブ型には、number、string、boolean、symbol、bigintなどJavaScriptでおなじみのものに加えて、特殊なデータ型として、any、unknown、undefined、null、void、neverなどが含まれます。一方、オブジェクト型は、DateやMapなどのJavaScriptの組み込みオブジェクトをはじめとして、クラスを自作することで無数に定義できます。

 また、第2回では、複数のデータ型をまとめて扱えるユニオン型を紹介しました。例えば、第2回のリスト27では、次のコードを紹介しています。このうち、「number|string」がユニオン型を表すコードです。

let element: number|string = taro[0];
element = taro[1];
リスト1

型を新たに定義するtypeキーワード

 TypeScriptには、この「number|string」というデータ型に名前を付けて、一つの新しいデータ型とする仕組みがあります。これが型エイリアス(Type Alias)です。

 型エイリアスを宣言するには、typeキーワードを使用します。例えば、リスト1の「number|string」を一つのデータ型として名前を付けたのが、リスト2の(1)です。

type NumStr = number|string;  // (1)
 :
let element: NumStr = taro[0];  // (2)
element = false;  // (3)
リスト2

 リスト2の(1)では、「number|string」をNumStrというデータ型としています。このように、新たなデータ型を定義したならば、それ以降は(2)のように、そのデータ型の名前を記述するだけで利用できるようになります。

 ここで、typeキーワードの使い方を構文としてまとめておきます。

[構文]型エイリアス
type 型名 = 型記述;

typeのデータ型はエイリアス

 ただし、typeキーワードで、それまでになかったデータ型を作ることができるわけではありません。例えば、リスト2の(1)で定義したNumStrは、あくまでも「number|string」に名前を付けて、再利用しやすいようにしただけです。ということは、NumStrの実体は「number|string」というユニオン型であり、もともと存在したデータ型の組み合わせに過ぎません。よってリスト2の(3)のコードは「number|string」の型指定に反するため、図1のエラーとなります。

図1 NumStrの実体の型定義に反してエラーとなった画面

 typeキーワードによって定義されたデータ型を「型エイリアス」と呼ぶのは、その実体がこれまでの型指定そのものだからです。

type利用のバリエーション

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。