Typescriptの押さえておくべき構文 #JavaScript

JSはわかるけど、TS触りたて、程度のレベルを想定しています。

const

ES6の構文。
使い方：const root = document.getElementById('app');
JSでいうvar letの定数版。一旦宣言すると、後から値が書き換えられない（イミュータブル）。

=>

ES6のアロー関数を採用しているもの。functionの記述と関数名が必要なくなる。
直ちに値を返すなら{}とreturnも省ける。

arrow.ts

function (x) {
  return "Hello," + x + "!"; 
}

// アロー関数を使うと
(x: string) => {
    return "Hello," + x + "!";
}

interface

変数や関数（メンバ）の型を定義するだけのもの

interface.ts

interface インターフェイス名 {
    メンバ変数名: メンバ変数の型名;
    メンバ関数名(引数名: 引数の型名): 戻り値の型名;
}

typeof

すでに具体的なデータが宣言されている場合に、その型をまるっと使ってタイプの定義をするときに使用する。

type.ts

let sampleState = {
  id: 1,
  text: "sample",
}

type sampleState = typeof sampleState;

ジェネリック `T`

型引数を導入してその都度定義できる。クラス、関数に使用すると効果を発揮する。戻り値に指定しても良い。

ex.ts

function a<T>(x: T) {
  alert(x);
}

a<string>("BELTLOGGER");
a<number>(9);
a<Date>(new Date());

クラスに付加するときはこう。

ex2.ts

class MyPerson<T>{
  public name: T;
}

型推論

全てに型定義の記載をすると、コードが長くなる場合がある。
その場合はコードの文脈（変数の初期化や、戻り値の型など）によって、
型が推測できる場合は、型定義を省略できる。

type-inference.ts

var str = ''; //変数の初期化
str = 123;  //初期化時に文字列を入れている為、変数の型定義無しでもコンパイルエラーとなる。

// 関数定義時に、引数で型=numberを定義
function hoge(n:number):void{
    alert(n *10);
}

// 定義した型で変数を初期化
var num = 10;
hoge(num); // => 100

// 定義した型と異なる型で変数初期化
var str = 'あいうえお';
//引数の型定義をしている為、ここでコンパイルエラーとなる。
hoge(str);

オーバーロード

同名の関数で、引数・返り値の型が異なる場合などに使う。
以下のように書くと、stringかnumberが継承できるので、コンパイルエラーにならない。

overload.ts

function a(x: string);
function a(x: number);
function a(x: any) {
  alert(x);
}

a("BELTLOGGER");
a(9);

参考

https://www.typescriptlang.org/docs/home.html
ES2015(ECMAScript2015)の文法を覚える - ブログ書くより読むほうがすき

Typescriptの押さえておくべき構文

const

=>

interface

typeof

ジェネリック T

型推論

オーバーロード

参考

ジェネリック `T`