Typescriptの型

2020/4/5 JavaScript

Typescript は、型注釈（Type Annotation）と型推論（Type Inference）で型を指定することが出来ます。今回の記事では、その型にどんな種類があるのかご紹介します。

 

Javaと同様の型

まずは、Javaと同様の型です。Javaの型の詳細は本ブログに多く紹介していますので、本日では省略します。

・boolean

・string

・null

 

使用頻度の高いTypescript の型

次にJavaにない Typescript の型です。

 

number型

JavaにはNumber型はありますが、number型はありません。そして、number型はJavaのNumber型とは少々異なります。

Typescript の number型は、整数、小数点、マイナスを代入することが出来ます。

const personNumber : number = 1;
const personNumber : number = 1.11;
const personNumber : number = -1;

 

Object型

Object型はJSONのような型です。型推論がかなり便利で、次のように書くとname, oldそれぞれString, numberに型推論してくれます。

const person = {
  name: "sato",
  old: 32
}

console.log(person.name);

 

アクセスは上記のように実施し、次のように無い要素にアクセスするとエラーを出してくれます。

console.log(person.qwer);

 

Tuple型

配列の要素ごとに型を指定することができます。また、要素の数も指定することが出来ます。次のように書きます。

const book: [string, number] = ['manga', 1000];

 

アクセスの方法は配列と同じです。次のようにアクセスできます。

console.log(book[0]);

 

注意点は配列と同様に要素が追加できてしまう点です。要素を追加しても追加した要素にはアクセスすることが出来ません（アクセスしようとするとエラーが起きます）。なので、要素の追加はやめておきましょう。

 

Enum（列挙）型

列挙型は指定したものを入力したいときに使用します。例えば血液型を指定したいときには次のようにEnum型を定義します。

enum BladType {
    A,
    B,
    O,
    AB
}

let myBladType = BladType.A;

 

定義したEnum型を初期値として代入されたmyBladTypeはBladType型になります。これで、myBladTypeには定義した血液型以外の値は入りません。

 

BladType.Aの実際の値は0になります。Enum型では定義した要素に0から値が連番で振られます。初期値を入力することも出来ますが時短のため初期値を入力しないことを薦めます。

 

Enum型には、守らなくてもコンパイルエラーは起きないけど慣例として守ることが推奨される一般的な書き方があります。

  1. 名前はパスカルケースで書く。単語の意味の先頭が大文字になります。
  2. 要素は大文字で書く。

 

Literal（リテラル）型

let banana: 'banana' = 'banana';

上記のように書くと変数bananaはリテラル型になります。リテラル型に定義した情報は書き換えることが出来ません。bananaの中身は常にbananaになります。

 

const banana = 'banana';

また、このような書き方でもリテラル型になります。これでもbananaの中身は常にbananaになります。

 

let banana = 'banana';

上記のように書くとbananaはstring型になります。string型は他の情報に書き換えることが出来ます。

 

union型

複数の型を指定することが出来ます。指定した型のどれかと合っていればエラーが起きません。次のように書きます。

const unionTest: string | number = 'banana';

 

前述のリテラルと組み合わせて使用すると次のようになります。

const fruits: 'banana' | 'peach' = 'peach';

 

Type alias（タイプエイリアス ）型

タイプエイリアス型は、型をエイリアスとして保持することが出来ます。何度も同じ宣言をする必要があるときなど簡潔に書けて便利かもしれません。

前述のリテラル型とユニオン型の組み合わせをタイプエイリアス型で使用してみると、次のように記載できます。

type fruitsList = 'banana' | 'peach';
const fruits: fruitsList = 'peach';

 

私が慣れているJavaには無い概念だからかと思いますが、可読性が落ちるのでは？と懸念が残ります。

 

使用頻度の低いTypescript の型

Javaにない Typescript の型で、使用頻度の低い型をご紹介します。

 

undefined型

undefined型があります。次のように記載します。

let temp1: undefined;
let temp2: null;

 

undefined型、null型には次のようにundefined、nullしか入れることが出来ません。

temp1 = null;
temp1 = undefined;
temp2 = null;
temp2 = undefined;

 

unknown

何でも代入することができます。しかし、unknown型を代入するときには、typeofで型を確認してからでないと代入することが出来ません。

let unknownTest : unknown;
let stringTest : string;
if ( typeof unknownTest === "string") {
  stringTest = unknownTest;
}

 

any

unknownと同様に、何でも代入することができます。any型を代入するときにも、なんにでも代入できます。

let anyTest : any;

 

never

nerverは、終わらない関数の return の型として使用できます。終わる関数に対しては使用することが出来ません。

function test() : never {
  while ( true );
}

 

never は何もメッセージを返せないので、try / catch を使用して何かしらのメッセージを返すようにしたほうが便利なパターンが多いように思います。

 

以上、Typescriptの型を紹介しました。