TypeScriptTypeScriptはマイクロソフトが開発しているJavaScriptのスーパーセットで、AngularやReactの主要フレームワークでサポートされていたりVue.jsも3からはTypeScriptに書き換えられるのだとか。いうことで今注目のTypeScriptをさらっと入門してみます。Linkインストールnpmでインストールします。typescriptインストールできてるか確認。found」と出てパスが通っていなかったら通す。PATH=$PATH:/usr/local/Cellar/node/8.1.3/lib/node_modules/typescript/bin:$PATHプロジェクトディレクトリに移動して初期設定をする。--init簡単なファイルを作成してみましょう。'こんにちは!';console.log(message);tsファイルはそのままではブラウザで認識しないのでコンパイルします。test.tstest.jsが新しく作成されていれば成功です。ファイルを更新する度に毎回コマンドを実行するのは大変なので、次のコマンドを実行します。--watchこれでファイルを更新する度に自動的にビルドが実行されます。bでビルドが実行できます。型の基本TypeScriptの特徴として型を明示的に指定することです。使用する型としては次のものがあります。型の指定は変数名の後に:(コロン)を付けてその後に型名(アノテーション)を付けます。'こんにちは';たとえば数値型(number)で宣言した型に文字列を入れようとするとエラーになります。後に型名を指定するだけなのでそれほど難しいことはないですが、配列はちょっと書き方で迷いますよね。これは、型名の後にブラケット([])を付けます。];配列と似たような型でtuple型というのがあります。これは固定数で複数の型を指定することができます。順で制限したい場合次のようになります。2];オブジェクトオブジェクトの場合は次のようになります。28};しかしこれだと、オブジェクトの中の型推論ができません。TypeScriptにはインターフェイスという機能があり、次のようにすると型推論ができるようになります。number};typeを使用する方法もあります。number};使い方はどちらも同じです。28}オブジェクトの場合、プロパティがない場合もあります。その場合、変数の後に?を付けます。Types)JavaScriptだと何もない値の場合、nullやundefinedになりますが、string型で宣言していた場合、文字列しか入れることができないのでエラーになります。Typesという指定方法で複数の型を使用できるようになります。関数は引数の後に型名を記述します。`${num1}+${num2}は、${sum}です。クラスTypeScriptのクラスメンバーは修飾子(public・private・protected)を付与できる。`${this.num1}+${this.num2}は、${sum}です。ゲッター/セッタークラスプロパティを操作するのにゲッター/セッターメソッドを作ることはよくありますが、TypeScriptではget/setアクセサという機能があります。列挙型は複数の定数をひとまとめすることができる変数です。次のように何も代入しない場合は0からのインクリメントされた値が入ります。2ジェネリクスジェネリクスは関数やクラスの定義時にはまだ型が決まっていなくて、使用時に型を指定したいときに使用できる機能です。関数の引数を使用時に決めたい場合は次のようになります。type;}genericsTest<string>('test');<T>の部分はエイリアスになり任意の文字列を使用することができますが、Typeの頭文字のT、KeyのK、UnknownのU、ElementのEなどが使用されることが多いようです。複数のジェネリクス複数のジェネリクスを使用する場合は「,」で区切って記述します。100);インターフェイスのジェネリクスジェネリクスはインターフェイスで使うことが多いかもしれません。REPLYNAMEE-MAILURLコードを書く場合は<pre>で囲んでください。WixこのブログではjQueryやWordPressを中心としたWeb制作関係のことを書いております。ご意見ご感想などお気軽にコンタクトフォームよりお問い合わせください。Web関係のお仕事も募集しております。