gtsを使ってGoogleスタイルでのTypeScriptのフォーマットチェック・自動修正を行う

# 背景

最近 Lint にハマっている。そして TypeScript をちょっと書いてみたりしている。

しかし、そもそもほとんど書いたことがない言語である、という背景があるので tslint の設定ファイルを自力で書くことが難しい状況である。

そこで調べていったところ、TypeScript を Google スタイルで簡単にフォーマットできる node module が存在することを発見した。

# gts とは

https://github.com/google/gts

> Google TypeScript Style

と記載がある通り、Google スタイルの TypeScript フォーマットのチェック・フォーマットを自動的に行なってくれる。

使い方は簡単。インストールは下記ですむ。

```shell
npm install gts
```

初回は init する。package.json とかがアップデートされる。

```shell
npx gts init
```

チェックするときは check コマンドを使う。 src ディレクトリ配下のコードについて、チェックに引っかかる項目があればズラっと出てくる。

```shell
npx gtx check src/*.ts
```

実行結果の一部を貼るとこうなる。（このプロジェクトでは `pritty-series-calender/` 配下にコードを置いている ）

```shell

[06/09 15:46:26] $ npx gts check pritty-series-calender/*.ts                                          (git)-[master]
Warning: The 'deprecation' rule requires type information.
pritty-series-calender/calendar.ts
Unnecessary trailing comma (trailing-comma)
   9 | function main() {
  10 |   const calander: GoogleAppsScript.CalendarApp.Calendar = CalendarUtil.getCalendar(
> 11 |     envProperty(CALENDER_KEY),
     |                             ^
  12 |   );
  13 |   const sheet: GoogleAppsScript.Spreadsheet.Sheet = SpreadsheetApp.getActiveSheet();
  14 |

Unnecessary trailing comma (trailing-comma)
  26 | function writeDate(
  27 |   calender: GoogleAppsScript.CalendarApp.Calendar,
> 28 |   sheet: GoogleAppsScript.Spreadsheet.Sheet,
     |                                           ^
  29 | ): void {
  30 |   if (!sheet) {
  31 |     Logger.log("sheet is null, please check user Sheet");
（後略）
```

簡単に修正できるものの場合は、下記のように fix を打ちこめば OK。prettier が実際には動いてるらしい。

```shell
npx gtx fix src/*.ts
```

fix した結果の一部はこんな感じに。（このプロジェクトでは `pritty-series-calender/` 配下にコードを置いている ）

```shell
~/mydata/mygit/GithubRepository/pretty-series-calendar
[06/09 15:47:30] $ git diff                                                                           (git)-[master]
diff --git a/pritty-series-calender/calendar.ts b/pritty-series-calender/calendar.ts
index bc75ae1..baf288a 100644
--- a/pritty-series-calender/calendar.ts
+++ b/pritty-series-calender/calendar.ts
@@ -8,7 +8,7 @@ const CALENDER_KEY = "PRITTY_CALENDER_NAME";
  */
 function main() {
   const calander: GoogleAppsScript.CalendarApp.Calendar = CalendarUtil.getCalendar(
-    envProperty(CALENDER_KEY),
+    envProperty(CALENDER_KEY)
   );
   const sheet: GoogleAppsScript.Spreadsheet.Sheet = SpreadsheetApp.getActiveSheet();

@@ -25,7 +25,7 @@ function main() {
  */
 function writeDate(
   calender: GoogleAppsScript.CalendarApp.Calendar,
-  sheet: GoogleAppsScript.Spreadsheet.Sheet,
+  sheet: GoogleAppsScript.Spreadsheet.Sheet
 ): void {
   if (!sheet) {
     Logger.log("sheet is null, please check user Sheet");
（後略）
```

それでもまだ一部は修正しきれていないので、これ以上は手動での修正が必要。（ここはたしかめんどくさくなって Object にしとくか、ってやったけど手抜き過ぎたと反省）

```shell

[06/09 15:49:17] $ npx gts check pritty-series-calender/*.ts                                          (git)-[master]
Warning: The 'deprecation' rule requires type information.
pritty-series-calender/calendar.ts
Don't use 'Object' as a type. Use {} instead. (ban-types)
  57 |   };
  58 |
> 59 |   const data: Object[][] = sheet.getDataRange().getValues();
     |              ^
  60 |   for (let i = 1; i < data.length; i++) {
  61 |     const row: Object[] = data[i];
  62 |     if (row[eventKeyMap.EventID] === "") {

Don't use 'Object' as a type. Use {} instead. (ban-types)
  59 |   const data: Object[][] = sheet.getDataRange().getValues();
  60 |   for (let i = 1; i < data.length; i++) {
> 61 |     const row: Object[] = data[i];
     |               ^
  62 |     if (row[eventKeyMap.EventID] === "") {
  63 |       const startDatetime = new Date(row[eventKeyMap.StartDateTime] as string);
  64 |       let endDateTime;
```

# まとめ

まだ使い始めたばかりなので、他のコマンドについては抑えていないが、TypeScript 生活を始めたばかりの人間にとっては、非常に楽に Lint かけれてる感覚があり、とても良い気持ち。

pre-commit のタイミングで走るようにしたいので、そのたぐいのツールが使えると良さそう。husky が有力候補？ lint-stage も組み合わせる必要がある？ とまだまだ全然わかりませんが、継続的に試していきたいところ。

# 参考にしたサイト

- [TypeScript Style Guide まとめ - Qiita](https://qiita.com/kajihata/items/0eb53f8a73a139650533)
  - Google Style フォーマットの存在をここで知る
  - https://github.com/google/ts-style にリンクされているが、これが https://github.com/google/gts にリダイレクトされて気づく
- [2019 年版： 脱 Babel!フロント/JS 開発を TypeScript に移行するための環境整備マニュアル - Qiita](https://qiita.com/shibukawa/items/0a1aaf689d5183c6e0f1)
  - 今後やりたいことの方針に近そうな感じ、ゆっくり読みつつ試していきたい
- [tslint for in でのエラーについて - 万年素人から Hacker への道](http://shinriyo.hateblo.jp/entry/2018/02/15/tslint_for_in%E3%81%A7%E3%81%AE%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)
  - 1 個エラーメッセージを読んでも解決できなかったので、参考にした