TypeScriptに挑戦するなら必ず覚えておきたい型定義の基本

基本的なTypeScriptの型についてまとめておく。

TypeScriptの型(レベル1)

文字列型

var name: string = 'Gorira';
name = 'GoriGorira';

数値型

var num: number =  18;

真偽値型

var isOpen: boolean = true;

配列型

var keywords: string[] = ['Gorira', 'Goriko', 'Gorio'];

上記の場合、配列には文字列型をしていしているため、0などの数値を配列に格納すると警告が表示されてしまう。他のデータ型を配列に格納したい場合は以下のように記載する。

var kewords: (string|number)[] = ['Gorira', 'Goriko', 'Gorio', 0];

このようにパイプ(string|number)で型を繋いであげると、文字列型も数値型も配列に格納することができる。

タプル型

var payment: [number, string, number] = [1, 'Gorira', 65];

タプル型はこのように配列で型の順番を定義することができる。
number,string,numberという順番で型を定義しているため、配列の中身が['Gorira', 'Gorira', 65]のような形ふだと警告が表示されてしまう。

オブジェクト型

var object: { [key: string]: string } = {
  name = 'Gorira',
  id = 'inu'
};

TypeScriptの型(レベル2)

供用型 (Union型)

var sample: string | number;
sample = 'Gorira';
sample = 56;

このように変数に文字列型も数値型も定義することができる.

sample = trure;

この場合はboolean型は定義していないため警告が表示される。

var sample: string | number | boolean;

とすれば問題ない。

enum型

enum Animals {
  Gorira = 100,
  Goriko = 3,
  Gorio = 50,
}

console.log(Animals.Gorira);    // 100

enum型は少し変わっているが、このようにconsole.logで参照されていることが確認できる。
また下記のような書き方もできる。

enum Ningen {
  Gorira ,
  Goriko,
  Gorio,
}

console.log(Ningen.Gorira);   // 0

このような書き方をすると、自動的にインデックスが貼られる。
値を省略して書くこともできる。
もちろん数値以外でも、文字列を渡すことも可能。

TypeScriptの型(レベル3)

any型

var something: any = 'foo';
something = 100;
something = true;
something = { id: 1 };

any型ではTypeScriptの厳格さのようなもが薄れてしまう。
そのため、このany型はできるだけ使用しないように心がけると良い。
むしろ、使わないようにした方が良い。

null, undefined型

var el: Element | null = document.querySelector('#app');
var gori: undefined = undefined;

TypeScriptで型を指定しなかった場合

var unknown = 'gorigorigorira';
// この時点でunknownは文字列型と推測されている。

unknown = 10;
// そのためこのように10と数値を代入すると[文字列型しか代入できない]と警告がでてしまう。

このように型を指定しないことももちろんできる。
このことを型推論という。