TypeScriptの型一覧

• number 数値型
• string 文字列型
• boolean 真偽型 (true,false)
• any 任意の型

変数宣言の仕方

変数名:型名で宣言します。

let data:number = 100;

number型で宣言したので別の型の値を代入しようとするとエラーになります。

data = 'hoge'; //エラー

型推論

型推論により、型を指定していなくても初期値から型が決まります。

let data = 'hoge';　//文字列型になる

型を指定していませんが、最初に文字列型を入れているため、他の型の値を代入しようとするとエラーになります。

data = 100; //エラー

関数の引数に型を指定

関数の引数、返り値にも型を指定することができ、指定した型以外の時エラーになります。
(引数名:引数の型):返り値の型
また返り値の型は指定していなくても型推論によって型が決まります。

const show = (result:number):string => `結果は${result}です`;

console.log(show(1000));　//結果は1000です

console.log(show('1000')); //数値型でないのでエラー

配列の型指定

const fruits: string[] = ['パイン', 'いちご', 'バナナ'];
const numbers: number[] = [10, 20, 30];

タプル型

タプル型は複数の型を表現するための型です。

タプル型で配列を宣言
一番目がstring,2番目がnumber,3番目がbooleanで宣言をしているので、順番が違ってもエラーになります。

const data: [string,number,boolean] = ['Hello',10,true];
const data: [string,number,boolean] = [10,'Hello',true]; //エラー

列挙型

列挙型の定数を「列挙子」といいます。
列挙子には0,1,2,3...と数値が割り振られます。
以下の場合は

• Spring = 1
• Summer = 2
• Autumn = 3
• Winter = 4
  が割り当てられます

 enum Season {
   Spring,
   Summer,
   Autumn,
   Winter
 }

let s: Season = Season.Summer;

console.log(s); //1
console.log(Season[s]); //Summer

また、「列挙子 = 値」にすることで任意の値を割り当てることもできます。

 enum Season {
   Spring = 2,
   Summer = 4,
   Autumn = 6,
   Winter = 8
 }

共有型

複数の型のいずれかで宣言
以下の場合numberまたはboolean型以外の値を代入するとエラーになります。

let data: number | boolean;

data = 100; 
data = true;
data = 'hoge'; //エラー

配列の場合

let data1: (string | number)[] = ['hoge',10,'hoge'];
let data1: (string | number)[] = ['hoge',10,true]; //string,number型以外の型があるのでエラー

型エイリアス

型に対して任意の名前をつけることができます。
type 任意の名前 = 型

普通にタプル型で配列を宣言

let data:[string,number,boolean] = ['1', 2, true];

型に名前をつけて、それを利用して配列を宣言

type Type01 = [string,number,boolean];
let data: Type01 = ['1', 2, true];

共有型で型エイリアス

type Type01 = number | string;
let data:Type01;
data = 1;
data = 'hoge';
data = true; //エラー

文字列リテラル型

特定の文字列を型として利用できます。

Seasonにある文字列以外はエラー

type Season = 'Spring' | 'Summer' | 'Autumn' | 'Winter';

const getSeason = (s: Season)=> console.log(`今は${s}です`);

getSeason('Summer');　//今はSummerです
getSeason('Spring');　//今はSpringです
getSeason('Fall'); //エラー
getSeason('summer'); //エラー

また、SeasonのSpring,Summer,Autumn,Winterそれぞれが型として利用することができます。

const getSpring = (s:'Spring')=> console.log(`今は${s}です`);

getSpring('Spring'); //今はSpringです
getSpring('Summer'); //エラー