Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Prettier の TypeScript 3.7 対応について
Search
sosukesuzuki
October 29, 2019
Programming
0
390
Prettier の TypeScript 3.7 対応について
2019年10月29日の nihonbashi.js での登壇です。
10月上旬に公開された TypeScript 3.7 のベータ版の Prettier のサポート状況についてお話しました。
sosukesuzuki
October 29, 2019
Tweet
Share
More Decks by sosukesuzuki
See All by sosukesuzuki
イテレータとイテラブルの概要と課題、未来
sosukesuzuki
5
3.1k
JavaScriptCoreのObject.groupBy/Map.groupByのバグを自分で報告して自分で直す
sosukesuzuki
1
470
「書いたJavaScriptがそのままブラウザで動く未来へ」スピーカーノート
sosukesuzuki
8
11k
Prettier 3.0 の VSCode 拡張対応における技術的な意思決定~VSCode 拡張で dynamic import が動かない~
sosukesuzuki
1
1.9k
ESM移行は無理だけどおれもSindreのライブラリが使いたい!
sosukesuzuki
2
1.2k
JavaScript エコシステムを維持する OSS の努力と課題
sosukesuzuki
14
9.3k
Prettierに従わなくてもいい場合
sosukesuzuki
7
3.1k
Prettier 2.0
sosukesuzuki
2
1.6k
Prettier のしくみ
sosukesuzuki
4
2.5k
Other Decks in Programming
See All in Programming
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
140
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
2
430
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
11
4k
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
チームリードになって変わったこと
isaka1022
0
200
Grafana Cloudとソラカメ
devoc
0
170
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
750
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
170
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
150
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
定理証明プラットフォーム lapisla.net
abap34
1
1.8k
PHP ステートレス VS ステートフル 状態管理と並行性 / php-stateless-stateful
ytake
0
100
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
38k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Rails Girls Zürich Keynote
gr2m
94
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
330
Transcript
Prettier の TypeScript 3.7 対応について nihonbashi.js 2019/10/29
自己紹介 - 鈴木颯介(Suzuki Sosuke) - GitHub(@sosukesuzuki) - Twitter(@__sosukesuzuki) - Prettier
メンテナ - 筑波大学情報科学類
None
Prettier とは
Prettier - JavaScriptで書かれたコードフォーマッター - JS / TS / HTML /
CSS / YAML / GraphQL などに 対応
フォーマット
TypeScript 3.7 とは
TypeScript 3.7 - 10月に入ってベータ版が公開されたまだ正式リリースされてない最新版の TypeScript - 4つの新構文が追加される - (このLTではこれらの機能自体には詳しく触れません) -
https://devblogs.microsoft.com/typescript/announcing-typescript-3-7-beta/
TypeScript 3.7 - Optional Chaining - 現在 ECMAScript Stage 3
のプロポーザル - Babel にはすでに入っている
TypeScript 3.7 - Nullish Coalescing Operator - 現在 ECMAScript Stage
3 のプロポーザル - Babel にはすでに入っている
TypeScript 3.7 - Assertion Functions - 型に関する機能なので ECMAScript のプロポーザルとかではない -
返り値に `asserts hoge is string` みたいなのを書いて型のアサートができる
TypeScript 3.7 - Class field “declare” keyword - ベータ版のアナウンスには含まれていなかった -
class field の declare キーワードをつけられる
これらに対して Prettier 側が すべき対応は大きく分けて2つ
①依存しているパーサーの更新
Prettier のしくみ(めっちゃ簡潔に) もとのテキスト AST(抽象構文木) フォーマットされたテ キスト パース プリント
Prettier は外部のパーサーを使っている - TS: typescript-eslint/typescript-estree - JS: babel/parser - まずパーサー側が対応するのを待つ必要がある
パーサー側の TS 3.7 対応が終わったら 依存しているバージョンをあげる
②プリントの処理を書く
ASTから実際にコードを フォーマットする処理を書く (このLTではここの詳細には触れません)
雑に一部抜粋(do 式と break のフォーマット)
プリントの処理を書くのは(比較的)簡単 - もともと Babel の Optional Chaining と Nullish Coalescing
には対応していた - Assertion Functions も class フィールドの declare キーワードも似たような構文が あったのでそんなに考えることはなさそうだった
今回困難だったのは 「①依存しているパーサーの更新」
Node バージョン問題
Prettier のサポートしている Node のバージョン - GitHub からの直接インストール - package.json に
“prettier/prettier” を指定することでインストールできる - これは 1.18.2 では Node 6 までサポートしている - バージョン指定してインストール(トランスパイル済み) - 1.18.2 現在で Node 4 までサポートしている
typescript-estree の対応 Node バージョン - "^8.10.0 || ^10.13.0 || >=11.10.1"
Node 6 はサポートされてない (個人的にはそろそろ Prettier が Node 6 のサポートを切るべきだと思いますが)
普通に更新してみたら Node 6 で テストコケた!
切りたいけどメジャーバージョンを あげないと Node 6 のサポートを切れない!
大きく分けて2つの対策が考えられる
① babel-ts パーサーの導入
babel-ts パーサー - Babel の TypeScript パーサーを使おうという話 - TS 3.7
が公開される前から babel-ts パーサーを入れる PR は出ていた - Babel にはもともと Optional Chaining と Nullish Coalescing は入っているのでい けるのでは? - (1.19には入らなさそう) - Assertion Functions と class フィールドの declare キーワードはまだ babel/parser が対応してないので使えない - なのであくまで回避策
② typescript-estree をなんとかする
案1: フォークしてNode6をサポートする - typescript-estree を Prettier 側でフォークして Node 6 をサポートできるように修
正して使おうという案 - 「メンテコストがしんどそう...」「もしやるなら 2.0 のリリースを急がないと...」
案2: GitHub インストールの Node 6 をドロップする - GitHub からの直接インストールの Node
6 をドロップする - バージョン指定インストールの場合トランスパイルして Node 6 をサポートし続けら れる - 「メジャーバージョンあげずに Node 6 を切っていいの?Semver は?」
案2について 「よく考えたら GitHub から直接 インストールするものに対しては我々は Semver を約束してない」
バージョン指定してインストールする ものに関してはトランスパイルして Node 6 をサポートするので Semver は守れる
投票の結果...
レビューを経て...
Merged!!
1.19.0 に入ります (今も多分 prettier/prettier でインストールすれば使えます)