TypeScriptで定義できる型まとめ

概要

TypeScriptで定義できる型をまとめる

tscコマンド

tscコマンドでtsファイルをjsファイルへ変換する

tsc index.ts

ES5へのコンパイラ

ほぼすべてのブラウザが対応しているES5へコンパイルすることができる
例：ES6への変更

tsc index.ts --target es6

型注釈と型推論

基本的には型推論が推奨。初期化する際は型注釈を使用するのがおすすめ。

// 型注釈
let hasValue1: boolean = true;
let count: number = 10;
let float:  number = 3.14;
let negative: number = -12;
let single: string = "hello";

// 型推論
let hasValue2: boolean;

オブジェクト

このように定義できるが、基本的には型推論に任せ省略する。

const person: {
    name: string;
    age: number;
} = {
    name: 'Jack',
    age: 21
}

配列

型推論にすれば文字列だけではなく数字も入るようななんでも入る配列を作成することができる。

const fruits: string[] = ['apple', 'banana'];

Tuple型

配列の中身の型を型注釈で定義する事ができる

const book: [string, number, boolean] = ['business', 2, true];

Enum

enum CoffeeSize {
    SHORT = 'SHORT',
    TALL = 'TALL',
    GRANDE = 'GRANDE',
    VENTI = 'VENTI'
}

const coffee = {
    hot: true,
    size: CoffeeSize.SHORT
}

any型

なんでもありの型

let anything: any = true;
anything = "aaaa";
anything = 2;

// string型で定義した変数にany型を代入してもエラーは出ない
let banana: string;
banana = anything;

union型

複数の方を同時に定義

let union: number | string = 10;

Literal型

特定の値のみしか受け付けない型

const apple: true = true;

// だめ
const apple: true = 'hello';


let clothSize: 'small' | 'medium' | 'large' = 'large';
// OK
clothSize = 'small';
// NG
clothSize = 8888;

typeエイリアス

型を変数に定義することができる

type ClothSize = 'small' | 'medium' | 'large';
let clothSize: ClothSize = 'large';

関数へ型を適用

function add(num1: number, num2: number): number {
    return num1 + num2;
}

add(2, 8);

void型とundefined型

返り値がない関数にはvoid型を定義することができる。
console.logで出力した場合undefinedが表示されるため、返り値にundefinedを指定することもできるが、その際は必ずretuenが必要。
しかし、ほとんどの場合はundefined型を返り値として定義することはないため、void型を使っておけば大丈夫。

function sayHello(): void {
    console.log('Hello');
}

関数型

変数に代入する関数へ型を指定したい場合
コロンが重複してしまうため、アローを使って返り値を定義する

const doubleNumber: (num: number) => number = number => number * 2;

callback関数へ型をつける

function doubleAndHandle(num: number, cb: (num: number) => number): void {
    const doubleNum = cb(num * 2);
}

doubleAndHandle(21, doubleNum => {
    return doubleNum;
});

unknown型

any型とは違いunknown型はどんな型でも一度は代入することができるが、違う型を更に代入することはできない

// unknown型
let unknownInput: unknown;
let text: string;
text = 'gggg';
// NG
text = unknownInput;

error型

void型はundefinedを返すが、never型は何も返さない場合に使用する。
以下のようにerrorの場合や、whileで終わらないループ処理を実行する際にも使用されるらしい。

// never型
function error(message: string) {
    throw new Error(message);
}