JavaScriptからTypeScriptへ

JavaScript（以下JS)を学んでいたら、その進化版としてTypeScript（以下TS)があることを知った。
そこで学んだことをまとめていく。

TypeScriptとは？

JSをベースに拡張して作られた言語。違いは、JSは動的型付け　で　TSは静的型付　となり、大規模開発に耐えられる使用となっている。JSを拡張した言語のため、JSの構文を使うことができる。

JSでの大規模開発では、チームで作成するのでいつの間にか意図した型が変数に入らずにエラーが起きることもあり、これに気付けるのは実行した時にエラーが出た時である。一方TSは型を定義するので実行前にエラーに気づくことができ、コード製作者の意図もわかりやすく可読性も上がる。
ただ、TSだけではブラウザで直接実行できないので、JSに変換する必要がある。

型の指定

まず大切な型の指定についてまとめる。明示的に変数やclassなどに型を指定することで、間違った値が入ることがなくなり、製作者の意図を理解しやすくしたりすることができる。

書き方

class Name {
 firstName: string;
 lastName: string;

 constructor(firstName: string, lastName: string){
  this.firstName = firstName;
  this.lastName = lastName;
 }
}

上のように、変数名の横に「: 型の種類」　とつけて、変数の型を指定する。

型の種類

よく使いそうな型をとりあえずまとめる

number型、string型、boolean型

よく見る形なのでわかると思うが、numberは数値、stringは文字列、booleanはtrue/falseを意味している

Object型

　オブジェクトの形を型として定義する。


const name: {
 firstName: string,
 lastName: string
} = {
 firstName: 'test',
 nastName: 'test'
}

何もかも型を定義しないといけないの？
TSには型推論と言うTS側が自動で型を予想して適応してくれる機能がある。このおかげで全ての変数などが出てきた時に、型を指定する必要はない。このおかげで冗長になることもない。上のオブジェクト型でも明示的に型を定義しなくても推論してくれる。また、変数に値を代入したときは、推論してくれる。

Array型

　配列を意味している。書き方は　「: string[]」　のように型の種類 + [] と書く。注意点は配列内の値全てが、型の種類に固定される。

Tuple型

TSで導入された型。配列の要素数が固定の時に使う。


 const name: [string, number] = ['test', 30]

Enum型

　TSで導入された型。定数のリスト。配列のように0〜の番号を自動で適応される。

 enum Name { Satou, Katou, Yamada = 100}

 Name.Satou

enum型で定義しておけば、TSの入力補助機能で選ぶことができ、いちいち定数名を覚える必要もなくなって、使いやすい。
それぞれの文字に対する数値は自動的に適応すると０〜になるが、Yamadaのように数値を指定することもできる。文字を定義することもできる。

any型

　anyは型を指定せず、どんな値も入ることができる。しかし、TSは型定義をすることに意味があるので、このany型は使用しない方がいい。

もし、値が代入される型が複数あるかもしれないときは？

Union型

型指定の種類が複数の可能性がある場合の書き方


 const name: string | number ;

「 | 」で複数の型をつなげることで、そのどれでも型が適応することができる。

Literal型

　今までは、もともとTSが持っていた型を使用していたが、文字を指定することもできる。

 const name: 'satou' | 'katou';

これは、'satou'か'katuo'の値しかとることができない。
例えば、'finish'|'unfinish'のようにすれば、完了・未完了の定義ができ、それをもとにif文で条件を分けることができる。

エイリアス型

Literal型やUnion型を何度も書くのは面倒だし、修正も大変となる。それを解決してくれるのがエイリアス型となる。型の定義を変数のようにまとめられる。


 type Test = number | string;

typeはTSで導入されたものである。

function型（void型）

　変数に関数を入れたい時に指定する。戻り値の型も指定できる。


 function test(n1: number, n2: number): number {何かしらの処理} //戻り値の型指定

 let plus: Function; // let plus: (a:number, b:number) => number;
 plus = test;

functionで定義したときの（）後ろに戻り値の型を指定できる。returnが無い場合は「: void」を指定できる。
また、Function型はfunctionを代入すると言うことを型定義してる。しかし、ここで問題が出てしまう。どんな形のfunctionが代入できてしまう。そこでアロー関数を使った書き方（コメントの中）で引数と戻り値の型を指定することで、代入したい目的の形の関数を代入するように、指定を厳しくすることができる。

型をどんどん指定するので長く見えるかもしれないが、エラーに気付きやすくなるので、今後使っていきたい。

そして TypeScript へ