Prettier の TypeScript 3.7 対応について

2019年10月29日の nihonbashi.js での登壇です。
10月上旬に公開された TypeScript 3.7 のベータ版の Prettier のサポート状況についてお話しました。

Transcript

1. Prettier の TypeScript 3.7 対応について nihonbashi.js 2019/10/29
2. 自己紹介 - 鈴木颯介(Suzuki Sosuke) - GitHub(@sosukesuzuki) - Twitter(@__sosukesuzuki) - Prettier メンテナ - 筑波大学情報科学類
4. Prettier とは
5. Prettier - JavaScriptで書かれたコードフォーマッター - JS / TS / HTML / CSS / YAML / GraphQL などに 対応
6. フォーマット
7. TypeScript 3.7 とは
8. TypeScript 3.7 - 10月に入ってベータ版が公開されたまだ正式リリースされてない最新版の TypeScript - 4つの新構文が追加される - (このLTではこれらの機能自体には詳しく触れません) - https://devblogs.microsoft.com/typescript/announcing-typescript-3-7-beta/
9. TypeScript 3.7 - Optional Chaining - 現在 ECMAScript Stage 3 のプロポーザル - Babel にはすでに入っている
10. TypeScript 3.7 - Nullish Coalescing Operator - 現在 ECMAScript Stage 3 のプロポーザル - Babel にはすでに入っている
11. TypeScript 3.7 - Assertion Functions - 型に関する機能なので ECMAScript のプロポーザルとかではない - 返り値に `asserts hoge is string` みたいなのを書いて型のアサートができる
12. TypeScript 3.7 - Class field “declare” keyword - ベータ版のアナウンスには含まれていなかった - class field の declare キーワードをつけられる
13. これらに対して Prettier 側が すべき対応は大きく分けて2つ
14. ①依存しているパーサーの更新
15. Prettier のしくみ(めっちゃ簡潔に) もとのテキスト AST(抽象構文木) フォーマットされたテ キスト パース プリント
16. Prettier は外部のパーサーを使っている - TS: typescript-eslint/typescript-estree - JS: babel/parser - まずパーサー側が対応するのを待つ必要がある
17. パーサー側の TS 3.7 対応が終わったら 依存しているバージョンをあげる
18. ②プリントの処理を書く
19. ASTから実際にコードを フォーマットする処理を書く (このLTではここの詳細には触れません)
20. 雑に一部抜粋(do 式と break のフォーマット)
21. プリントの処理を書くのは(比較的)簡単 - もともと Babel の Optional Chaining と Nullish Coalescing には対応していた - Assertion Functions も class フィールドの declare キーワードも似たような構文が あったのでそんなに考えることはなさそうだった
22. 今回困難だったのは 「①依存しているパーサーの更新」
23. Node バージョン問題
24. Prettier のサポートしている Node のバージョン - GitHub からの直接インストール - package.json に “prettier/prettier” を指定することでインストールできる - これは 1.18.2 では Node 6 までサポートしている - バージョン指定してインストール(トランスパイル済み) - 1.18.2 現在で Node 4 までサポートしている
25. typescript-estree の対応 Node バージョン - "^8.10.0 || ^10.13.0 || >=11.10.1"
26. Node 6 はサポートされてない (個人的にはそろそろ Prettier が Node 6 のサポートを切るべきだと思いますが)
27. 普通に更新してみたら Node 6 で テストコケた！
28. 切りたいけどメジャーバージョンを あげないと Node 6 のサポートを切れない！
29. 大きく分けて２つの対策が考えられる
30. ① babel-ts パーサーの導入
31. babel-ts パーサー - Babel の TypeScript パーサーを使おうという話 - TS 3.7 が公開される前から babel-ts パーサーを入れる PR は出ていた - Babel にはもともと Optional Chaining と Nullish Coalescing は入っているのでい けるのでは？ - (1.19には入らなさそう) - Assertion Functions と class フィールドの declare キーワードはまだ babel/parser が対応してないので使えない - なのであくまで回避策
32. ② typescript-estree をなんとかする
33. 案1: フォークしてNode6をサポートする - typescript-estree を Prettier 側でフォークして Node 6 をサポートできるように修 正して使おうという案 - 「メンテコストがしんどそう...」「もしやるなら 2.0 のリリースを急がないと...」
34. 案2: GitHub インストールの Node 6 をドロップする - GitHub からの直接インストールの Node 6 をドロップする - バージョン指定インストールの場合トランスパイルして Node 6 をサポートし続けら れる - 「メジャーバージョンあげずに Node 6 を切っていいの？Semver は？」
35. 案2について 「よく考えたら GitHub から直接 インストールするものに対しては我々は Semver を約束してない」
36. バージョン指定してインストールする ものに関してはトランスパイルして Node 6 をサポートするので Semver は守れる
37. 投票の結果...
38. レビューを経て...
39. Merged!!
40. 1.19.0 に入ります (今も多分 prettier/prettier でインストールすれば使えます)