ES6 フレンドリな TypeScript のために

先日書いた JSX と TypeScript の混合 Flux または悪魔合体 の経緯から TypeScript と JSX を併用しているため、コードの記述に大きな差ができないよういくつかのパーツ（主に TypeScript のもの）を避けることにしています。

NGなパーツ

独断と偏見です。

Private/Public modifiers

ジャングル ニ プライベート ナイ！

class Acme {
  private himitsu = '';
  public tellme() {}
}

みたいなのですね。バイオ JS にプライベートなんて必要なかったんや。protected も使えるっぽいけどアンドキュメント？

Modules

ES6 ライクな import/export だけ使うということで内部モジュール禁止です。不便ないですね。

// NG（サンプルから拝借）
module Validation {
  export interface StringValidator {
    isAcceptable(s: string): boolean;
  }
}
// OK
export interface StringValidator {
  isAcceptable(s: string): boolean;
}

もちろん d.ts 系では出番ありますが。

Overloads

こういうのもナシ。オーバーロード欲しかったのですが...

// サンプルから拝借
var suits = ["hearts", "spades", "clubs", "diamonds"];

function pickCard(x: {suit: string; card: number; }[]): number;
function pickCard(x: number): {suit: string; card: number; };
function pickCard(x): any {
  if (typeof x == "object") {
    var pickedCard = Math.floor(Math.random() * x.length);
    return pickedCard;
  }
  else if (typeof x == "number") {
    var pickedSuit = Math.floor(x / 13);
    return { suit: suits[pickedSuit], card: x % 13 };
  }
}

仕方ないけど実装は1つしか持てない辺りが使う気を起こさせてくれないので平気。

Enum

贅沢品。

// サンプルから拝借
enum Color {Red, Green, Blue};
var c: Color = Color.Green;

なくても何とかなりますよね。

Implements

本当は使いたいパーツな気もしますが封印中。

// サンプルから拝借
interface ClockInterface {
  currentTime: Date;
  setTime(d: Date);
}

class Clock implements ClockInterface  {
  currentTime: Date;
  setTime(d: Date) {
    this.currentTime = d;
  }
  constructor(h: number, m: number) { }
}

オブジェクト構造を示すのに interface を使いますが、implements はしません的な。

Babel の NG 勢

• Decorators (es7 proposal stage1)
• async/await (es7 proposal stage1)
• Function bind (es7 proposal stage0)

上記、使いたい気もする stage 1 勢が入ってますが、基本的なシンタックスや実装に影響が大きいので自重中です。Decoratorsのことは狙ってますが...

OK なパーツ

これも独断と偏見で。

Property Initializers

ES7 proposal stage 0 相当ですが無いと不安になるの常用。（個人の感想です）

class MyClass {
  foo = 'bar';
  constructor() {
    console.log(this.foo); // 'bar'
  }
}

これないとプロパティの初期化を constructor の中で頑張ることに･･･。ただし次のようなやつ通るのが不可解です。

class MyClass {
  foo = this.bar();
  bar() {
    return 'bar';
  }
  constructor() {
    console.log(this.foo); // 'bar'
  }
}

Babel や TypeScript などの実装上の固有動作なのか、仕様的にこれで正しいことになりそうな雰囲気なのか詳しいひと教えて欲しいです。:(

static/getter/settter

ふつうにES6の範疇にある勢。static は React だと defaultProps とか propTypes で使います。

でした

異論さまざまと思いますし、これも禁止すべき、あれは禁止すべきでない etc あるかと思われますが、自分の手元は現状こんな方針をドキュメント化しています。