背景

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

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

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

gts とは

Google TypeScript Style

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

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

npm install gts

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

npx gts init

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

npx gtx check src/*.ts

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


[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 が実際には動いてるらしい。

npx gtx fix src/*.ts

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

~/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 にしとくか、ってやったけど手抜き過ぎたと反省）


[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
- Google Style フォーマットの存在をここで知る
- https://github.com/google/ts-style にリンクされているが、これが https://github.com/google/gts にリダイレクトされて気づく
2019 年版：脱 Babel!フロント/JS 開発を TypeScript に移行するための環境整備マニュアル - Qiita
- 今後やりたいことの方針に近そうな感じ、ゆっくり読みつつ試していきたい
tslint for in でのエラーについて - 万年素人から Hacker への道
- 1 個エラーメッセージを読んでも解決できなかったので、参考にした