Ugo

Webエンジニアのためのプログラミング情報サイト

TypeScriptの型を0から学ぶ！すべての型の一覧とその使い方。

TypeScriptの型を0から学ぶ！すべての型の一覧とその使い方。

この記事では、TypeScriptを学習するうえで要となる型について学んでいきたい。

“TypeScirpt”という名前が示す通りTypeScriptはデータ型の指定を明示的におこなう静的型付け言語。

JavaScriptは型の判定をプログラムの実行時におこなう動的型付け言語であり、JavaScriptとTypeScirptの一番大きな違いはこの「型の扱い方」による違いだと言えるだろう。

この記事では、TypeScriptに存在するすべての型を網羅的に紹介していきたいと思う。

目次

基本型（プリミティブ型）

まずはすぐにプログラミングの核をなす基本型（プリミティブ型）から説明する。

number 数値型

数値型はその名の通り数値をあらわすデータ型。
TypeScriptではnumberで表される。

数値型を使用した例

let myValue: number = 12;
myValue = 8;
console.log(++myValue);

変数の宣言と同時に値を代入する際は、以下のように型を省略することもできる。

let myValue = 12;

基本的にTypeScriptでは、型は省略しないほうがいいと考えたほうがいいだろう。

TypeScriptでは、小数点以下を含む数にはdoubleを使用する。

string 文字列型

文字列型にはstringが使われる。

文字列型を使用した例

let myValue: string = 'Hello, ';
myValue += "again";
console.log(myValue);

TypeScriptでは文字列をあらわす際に以下の3種類の句点を使用することができる。

  • 「’」 シングルクォーテーション
  • 「”」ダブルクォーテーション
  • 「`」バッククォート

バッククォートで囲む場合は複数行の文字列を改行などを含めて指定することが可能。

また文字列の中で変数を使用することができる。変数は${}で囲む。

`Hello!!
Welcome to my site ${name}`

boolean 真偽型

真偽型はtrueとfalseという2種類の状態しか持たないもっともシンプルなデータ型。

TypeScriptではbooleanで表される。

真偽型を使用した例

let isInit: boolean = false;
isInit = !isInit; 
console.log(isInit);

symbol シンボル型

symbolはJavaScriptとTypeScriptに存在する特殊なデータ型だ。

symbolはsymbolファクトリーを使って生成され、symbolは常にユニークであるという特徴を持つ。

シンボル型を使用した例

const ARTICLE_NAME: symbol = Symbol('name');
const USER_NAME: symbol = Symbol('name');
console.log(ARTICLE_NAME === USER_NAME); // falseとなる

シンボルの常にユニークであるという特徴を活かして、タイプの識別などに使用するといいだろう。

const LOG_INFO = Symbol('INFO');
const LOG_WARN = Symbol('WARN');
const LOG_ERROR = Symbol('ERROR');

switch(level) {
  case LOG_INFO: 
    console.log(msg); break
  case LOG_WARN: 
    console.warn(msg); break;
  case LOG_ERROR:
    console.error(msg); break;
}

void

通常、voidは関数がいかなる返り値も持たないことを明示するために使用される。

public printMessage(message: string) : void {
  console.log(message);
}

変数のデータ型としてvoidを指定することもできるがnullかundefinedしか代入することができないので、意味のある使い方をするのは難しいだろう。

nullとundefined

TypeScriptではnullとundefinedもひとつのデータ型として捉えることができる。

nullとundefinedはJavaScript・TypeScriptにおいては区別される。

nullはnullという値が代入されている状態であり、undefinedは値がまだ代入されていない状態だ。

const nullVal: null = null;
const undefinedVal: undefined = undefined;
console.log(nullVal);
 // null
console.log(undefinedVal); // undefined
console.log(nullVal === undefinedVal); // falseとなる

nullとundefinedのどちらでも無いことをチェックするには以下のようにif条件に変数名のみを記述する。

if (checkedValue)

any 任意型

anyを指定すると型のチェックはおこなわれない。

以下のようなコードも有効だ。

let myData: any = 120;
myDate = 'hello'; // エラーにならない
let myValue = '' // 型の指定と初期化を省略した変数は自動でanyとみなされる。
myValue = 999;

ユーザ定義型

次にユーザ定義型に分類されるデータ型を見ていこう。

array 配列

配列は同じデータ型を持つ変数の集まり。

TypeScriptではJavaScriptと異なりanyを型として指定しない限りは、配列は同じデータ型しか含めることができない。

配列を使用した例

let nameArr: string[] = ['Thomas', 'John', 'Martin'];
nameArr.push('Sara'); 
nameArr[1] = 'Jonny';
nameArr.forEach(name => console.log(name));

配列はArray<>を使ってあらわすこともできる。

let numberArr: Array<number> = [5, 12, 8];

interface インターフェイス

インタフェースはオブジェクトの構造を定義するためのオブジェクト。

インターフェイスとクラスは似た特徴を枠割を持つが、インターフェイスはオブジェクトの構造を定義するのみでロジックなどは通常持たない。

export interface Human {
  firstName: string;
  lastName: string;
  age: number;
}

const sampleHuman: Human = {
  firstName: 'Thomas',
  lastName: 'Müller',
  age: 25
}

console.log(JSON.stringfy(sampleHuman));

class クラス

クラスはひとつの目的によって集められたフィールドや関数の集まり。

オブジェクト指向プログラミングでは通常クラスは、商品や顧客といった現実世界の物を象徴することが多い。

class Customer {
  cutomerId: number;
  email: string;

  constructor(id: number, email: string) {
    this.customerId = id;
    this.email = email;
  }

  showCustomerDate() {
    console.log(this.customerId + ':' + this.email);
  }
}

クラスとインターフェイスの違いについてはこちらの記事を参考にしてほしい。

function 関数

TypeScriptではJavaScriptと同様に関数もひとつのデータ型として考えることができる。

function multiple(a: number, b: number): number {  
  return a * b;  
}  

let mutiple = function (a: number, b: number): number {  
  return a * b;  
};

tuple タプル

タプルは異なる二つのデータ型を納めるデータ型。

let myTuple: [number, string];
myTuple = [3, 'Mike'];
console.log(myTuple[1]);

指定したのと異なるデータ型を代入することは出来ない。また、2つのデータ型の順番は固定されている。

let myTuple: [number, string];
myTuple = [12, false] // エラー
myTuple = ['Tony', 12]; // エラー

union ユニオン

ユニオン型を使えば当てはまる可能性のある複数のデータ型を指定することができる。

平たく言えばユニオン型はOR条件のデータ型といえる。

let personOne: Teacher | Student;

ユニオン型はnullになる可能性がある値をセーフにするために使うこともできる。

let message: string | null;
message = getMessageFromDatabase();

enum 列挙型

enumはひとつのテーマに沿った定数の集まり。

プログラム内でよく使われる値はenumとして定義しておくとプロジェクト内の不整合を防ぐことができる。

enum OrderStatus {
  Ordered, Payed, Delivered
}

if (order.status === OrderStatus.Payed) {
  console.log('料金は支払い済みです。');
}
MENU