変数に型をつける

TypeScriptは、JavaScript + 型みたいなものです。

utouto97.hatenablog.com

ですので、JavaScriptのプログラムに型をつけていきましょう。

まずは、変数からみていきます。

変数には、その変数の宣言時に型をつけることができます。
その方法は非常に簡単で、変数名の後ろに : を挟んで型名を書くだけです。

const msg : string = "Hello!";

ここで使える型名には次のようなものがあります。

boolean
number
string
any
Array<T> または T[] (Tは型名)
自分で宣言した型
関数型

変数の型と代入する値の型が異なるとエラーとなります。

const msg : string = 1; // 1はnumber

上記のプログラムを実行すると、 Type 'number' is not assignable to type 'string'.というエラーが発生します。
これは、string型の変数に、number型の値（1）を代入しようとしているからです。

any型

any型はどんな型でもOKな型です。
つまり、any型の変数には、number型の値でも、string型の値でも、自分で宣言した型の値でも代入することができます。

var msg : any = "Hello";
console.log(typeof msg); // string
msg = 123;
console.log(typeof msg); // number

typeofはその後ろに続く変数の型を取得することができます。
上の例をみてみると、2行目のtypeofではstring型、4行目のtypeofではnumberであるということがわかります。
変数宣言時には、anyを指定しているので、異なる型の値を後から代入してもエラーにはなりません。

型推論

TypeScriptでは、自明な型は自動で推論してくれます。

const msg = "Hello";
console.log(typeof msg); // string

string型である "Hello" で初期化をしているので、変数msgはstring型であると推論されています。
このように、初期化時に代入される値の型をその変数の型であると推論してくれます。

複数の型に対応

|でつなぐことで複数の型に対応させることができます。

var msg : string | number = "Hello";
console.log(typeof msg); // string
msg = 123;
console.log(typeof msg); // number

配列の型宣言

配列の型宣言はArray<T>を使います。
Tには配列の要素の型を入れます。

const a : Array<number> = [1, 1, 2, 3, 5, 8];

また、T[]という形式でも記述することができます。

const a : number[] = [1, 1, 2, 3, 5, 8];

自分で型を宣言する

自分で型を宣言する方法は2種類あります。
それはinterfaceを使う方法とtypeを使う方法です。

interfaceとtypeは別物であり、それぞれ特徴がありますが、基本的な使い方はどちらも同じです。

interface User {
  name: string;
  age: number;
}

type User {
  name: string;
  age: number;
};

interfaceやtypeで宣言された型は、stringやnumberと同様に使えます。

interface Pos {
    x: number;
    y: number;
}

const p : Pos = {
    x : 100,
    y : 200
}