JavaScript
TypeScript
es6

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

More than 1 year has passed since last update.

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);

オーバーロード

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

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)の文法を覚える - ブログ書くより読むほうがすき