【TypeScript】Github に Push する前に自動で typecheck したい場合はhuskyが便利

背景

こんにちは，mayukorinです．普段チーム開発をしているのですが，開発をよりスムーズに行うために typecheck でエラーが起きていたらマージできないようにすることにしました．大人の事情で Github Actions が使えずどうしようか悩んでいたところ、チームのメンバーが「husky を使えば，同じことができるかもしれないよ」と教えてくれました．試してみると結構簡単にできたので紹介したいと思います．

huskyとは

huskyとは，commit や push を行う前に，指定したコマンドを実行できるJavaScriptパッケージです（説明が雑ですみません）．Githubはこちらから，ドキュメントはこちらからアクセスできます．

huskyでpushする前にtypecheckする方法

早速，huskyでpushする前にtypecheckする方法を紹介していきます．なお，今回はパッケージマネージャーとして yarn（バージョン1）を使っています．

1. husky のinstall

まず，husky を install します．

yarn add --dev husky

2. huskyでGit hooks を利用できるようにする．

次に，husky で Git hooks を利用できるようにします．

yarn -s run husky install

Git hooks については， gitのドキュメントに以下のように書かれています．

Hooks are programs you can place in a hooks directory to trigger actions at certain points in git’s execution. Hooks that don’t have the executable bit set are ignored.

和訳すると，「Git hooks とは，hooksディレクトリに置くことで、gitの実行中のある時点で動作を開始させることができるプログラム」らしいです上のコマンドを実行すると，.huskyディレクトリが作成されます．

3. push する前に自動でtypecheckするように huskyを設定する．

最後に，push する前に自動でtypecheckするように huskyを設定します．今回私は typecheckをyarn run tscで行っているので、以下コマンドを実行しました．

 yarn -s run husky add .husky/pre-push "yarn run tsc"

husky add .husky/pre-push "push時に実行したいコマンド" でコマンドを実行すれば大丈夫そうです．他にもcommit前に実行したい場合は，.husky/pre-push のところを.husky/pre-commit にすればよいです．

動作確認

試しに，typecheck error がある状態でpushしようとすると，pushできなくなります．

$ git push origin auto-typecheck-enable:auto-typecheck-enable
yarn run v1.22.10
$ .....node_modules/.bin/tsc
...
Found 16 errors in 8 files.

Errors  Files
...
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
husky - pre-push hook exited with code 2 (error)
error: failed to push some refs to '....git'

typecheck error がない場合は，このように push できます．

mayukorinrin@DESKTOP-Mayuko:~/STECH$ git push origin auto-typecheck-enable:auto-typecheck-enable
yarn run v1.22.10
$ ....node_modules/.bin/tsc
Done in 11.29s.
Counting objects: 15, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (15/15), done.
Writing objects: 100% (15/15), 1.66 KiB | 850.00 KiB/s, done.
Total 15 (delta 10), reused 0 (delta 0)
remote: Resolving deltas: 100% (10/10), completed with 6 local objects.
remote: 
remote: Create a pull request for 'auto-typecheck-enable' on GitHub by visiting:
remote:      ..../pull/new/auto-typecheck-enable
remote: 
To .....git
 * [new branch]      auto-typecheck-enable -> auto-typecheck-enable

おわりに

husky ぜひ使ってみてください！

番外編

ちなみに yarn -s run husky add .husky/pre-push "yarn run tsc"を実行すると以下のようなファイルが作られます．
先頭の#!で始まる#!/usr/bin/env sh は，shebang (シェバン）と呼ばれるもので，「実行時にそのプログラムで実行するよ」ということを示しているらしいです．今回は，シェルで実行するよということを示しているみたいです．

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

yarn run tsc