概要

Angular2が登場して、ますます盛り上がりを見せてみる「TypeScript」ですが、正直そこまで感度が上がっていませんでした。
(普段のReactベースでの開発時は、ES6 + Babelで開発しているのもあって。。。)

ただ、そろそろ放置は出来ないだろうという事で、調査を開始した。
実際に、調査した内容の要点だけまとめていこうと思う。

環境

エディターはAtom、トランスコンパイラーにはWebpackを利用する。

TypeScriptとは

TypeScriptはMicrosoft社が開発しているJavaScriptのスーパーセットです。
ネイティブなJavaScriptには存在しない「静的型付け」などを取り入れている為、中・大規模アプリの開発を行うのに適しています。
概要でもお話した通り、最近alpha版がリリースされたAngular2はTypeScriptで開発されています。

また、React / Vue.jsなどでもTypeScriptを用いて開発するとより安全なアプリを制作する事が可能になります。

TypeScriptの機能

静的型付け

ネイティブのJavaScriptは、「動的型付け」の言語です。
「動的型付け」とは「ある変数に値を代入した後に、その値と違う型の値を代入しても良い」という事です。
例えば、

sample.ts

let admin = 'yes';
admin = true;

それに対して、TypeScriptは、「静的型付け」の言語です。
要は「一旦変数にある型の値を代入したら、その変数の型は変更できないよ」という事です。

「動的型付け」の言語はある意味柔軟で、融通の利くとも言えますが、
中・大規模の開発ではそれが原因で良からぬバグがよく発生します。
TypeScriptは「静的型付け」を採用する事で「安全なプログラム」を作成する事に感度を置いています。

TypeScriptで採用されている型の種類

Type	Name
string	文字列
number	数値
boolean	真偽値
any	何でもあり

静的型付けの書き方

sample.ts

let num: number;
let num: number = 10;
let num = 10 // TypeScriptが型推論をしてくれて、自動的にiはnumber型になる。

let x; // xはany型になる。
let x = 10; // xはany型のまま。
let x = 'hello'; //xはany型のまま。

// 配列型を宣言する。
let names: string[] = ['Steve', 'Jack', 'Page'];

列挙型

列挙型は「定数を分かりやすく管理する」為のものです。
列挙型は「enum(イーナム)」キーワードで表現する事ができます。
また、慣習的に始めの文字は大文字にします。
enumのそれぞれの定数に「数値定数」を代入してあげます。
これで準備はOKです。

sample.ts


enum Language {
    JavaScript = 0,
    TypeScript = 1,
    Dart = 2,
    CoffeeScript = 3
}

let language: Language = 1;

// 条件分岐などで利用可能
if (language === Language.TypeScript) {
    console.log('OK'); // "OK"
}

console.log(Language.Dart); // 2
console.log(Language[3]); // "CoffeeScript"

enumでは定数を指定して、数値を取得する事も可能ですし(Laguage.TypeScript)、その逆の数値を指定して文字列定数を取得する事も可能です(Language[2])。

また、数値定数は省略する事も可能です。
その場合は、0から始まる連番が自動的に付与されます。

最後に、複数で同名のenumを宣言する事も可能です。
その場合は、enum同士がマージされて利用できます。
(同名のenumを複数宣言する場合は、数値定数を省略できるのは1のenumだけです。)

終わり

今回は「静的型付け」「列挙型」の2つについて解説しました。
次回は「関数」「クラス」編を解説しようとおもいます。

続きは次回。

TypeScript1.8 入門① (静的型付け・列挙型)

概要

環境

TypeScriptとは

TypeScriptの機能

静的型付け

TypeScriptで採用されている型の種類

静的型付けの書き方

列挙型

終わり