宮本さんjest導入 ~Typescript導入~

Typescript導入

前回の記事 宮本さん ~jest導入~
今回はテストをTS化するのでGAS依存のTS化の話はしないです。
ていうか対応してない。

環境構築

特にしていないです。
とういのもローカルで使用しない + GASではpushした時点でTSをコンパイルしてくれるから
VScode入れたらTSが同時にインストールされるのでダイジョブ
TSのバージョン固定しないと行けない場合はnpmでバージョンしてからインスコ
tsc --init すればtsconfigを生成してくれのですが特に指定したいルールがなければ
tsconfigは必要ないです。tsconfigがなくともデフォルトのルールが有るようなので

下調べ

TS書くとなっても全然わかってないのでとりあえず型定義の仕方からググりました。

Type Annotation

sample.ts

const x: number = 1;

解説.ts

const 変数名:型 = 値

値に初期値が存在する場合は型推論が働き、
上記のような宣言でもxの型がnumber型であることをコンパイラが推定してくれます。

interface

interface

interface MyInterface{
    name:string
}

class MyClass implements MyInterface{
    name:string;
}

変数の値を指定せずにメンバーや型の定義だけ持つ。

最初に調べたのはこの２つぐらいです。

npmをTS化

ここからは勢いで書きました。

date_utils_test.ts

import { contains, isNaN } from "underscore";

import { contains, isNaN } from "underscore";
まずモジュールをtsしようと思い@types/underscoreをインストールしたのですが、
TS化ならずググったところ
underscore、@types/underscore２つとも必要だった。

npm i underscore @types/underscore
↑で解決読み込むのは元のモジュールの方
import { contains, isNaN } from "underscore";

classをTS化(簡単に説明)

date_utils_test.ts

import { contains, isNaN } from "underscore";
export class DateUtils {
  now: Number;
  setTime(now: any) {
    return (this.now = now);
  }
  dateUtilsNow(datetime: Date) {
    let _now = new Date();
    if (typeof datetime !== "undefined") {
      _now = datetime;
    }
    return this.setTime(_now);
  }

1. まずType Annotationでnow: Number;型指定
2. 関数の引数を型指定 functionでもType Annotationのように引数に型を指定できます。

dateUtilsNow(datetime: Date) {
    let _now = new Date();
    if (typeof datetime !== "undefined") {
      _now = datetime;
    }
    return this.setTime(_now);
  }

快適さ

既存ソースをコピペしてもある程度型定義してくれるので楽
他のプロジェクトをでも使ってみたがTSでエラー吐いてコンパイルしてくれないのが
最初は辛いがなれるとエラー文とバグが紐づくイメージになってきてありがたみを感じはじめる。

辛さ

宮本さんは文字列と時間がデフォルトで混ざっているので型定義が辛い。
この辺は書き直し等で改善はできそう
ただ、宮本さんに限らず既存コードをTS化するのは辛いという印象を持った。