TypeScript 寺のためのメモ

create-react-app を使う(yarn create react-app my-app --typescript)
tslint が強すぎるので弱くする必要あり(後述)
タイプチェックは WebStorm でも何もせずにしてくれるし、npm start でも走る

tslint.json の設定

create-react-app の tslint 初期設定が強すぎて全然コンパイルできないので弱くする。

console.log させて〜

とりあえず確認したい時に全然使えなくて困るので許可する。

tslint.json

{
  "rules": {
    "no-console": false
  }
}

alias

正式名称が alias という機能なのかわからないが tsconfig.json の compilerOptions.baseUrl にかかれたパスがそのまま使えるようだ。

以下のように初期設定ではなっているので、

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

以下のように書いて import できる。

読み込む

import User from 'src/User'

interface を使う

interface は I から始めないと tslint error

引数のオブジェクトを固定したい場合

とりあえず

interface IUser {
  name: string;
  age: number;
}

const makeUser = (userInfo: IUser): IUser => ({
  age: userInfo.age,
  name: userInfo.name
});

makeUser({ name: "nakanishi", age: 35});

class のプロパティを絶対確定させたい場合

クリーンアーキテクチャ等で出てくるインターフェイスを実装するなら以下のようのに interface を implements した class を作る。これで name, start がない場合にはエラーになるので、がダックアイピングが確実に動くことが保証される。依存性逆転とかをさせるために必要不可欠。（TS なしでも注意して実装することもできるが、保証はない。）

依存性逆転風コード

とりあえず書いてみた

interface IUser {
  name: string;
  start(): string;
}

class User implements IUser {
  public name: string;

  constructor(name: string) {
    this.name = name;
  }

  public start() {
    return this.name;
  }
}

const nakanishi = new User('nakanishi');

console.log(nakanishi.start());

port を指定する

3000 port が被ることがあるので、暫定以下を npm script に追加すれば被りを防げる。

"start:4000": "PORT=4000 npm start",

Single Responsibility Principle

1 アクターに対して 1 モジュールであるべき。アクターが異なれば、別モジューに分割すべき。例えばクリーンアーキテクチャーでは、会社の給与計算、労働時間計算、それらのデータを保存するという三つの役割=メソッドを持った Employee クラスは、それぞれアクターが違うのだから別モジュールにすべきとある。例えばこの問題が顕著になるのは、給与計算と労働時間計算が同じ労働時間計算メソッドを共有し、給与計算の労働時間計算の仕組みだけが変わった場合である。誤って共有しているメソッドを変更してしまうと、どちらも変わってしまう。変わっては困る。なぜならアクターが異なっていたからだ、ということらしい。

webpack + typescript

install

yarn add webpack webpack-cli webpack-dev-server ts-loader @types/react @types/react-dom -D

yarn add react react-dom typescript

Uncle JavaScript.com