Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
TS CompilerがVueを 喋れても良いじゃないか @andoshin11 2020/12/07 #v-tokyo
Slide 2
Slide 2 text
Andy (Shin Ando) @andoshin11 ● 最近Open Stackの会社に就職した ● BizDev・PM (@managed k8s team) ≠ Software Developer ● 何でもやる人
Slide 3
Slide 3 text
Vue.js x TypeScript ● 長い戦いの歴史 ● thisの推論が改善されたり、Vue.extendの表現力が向上したり ● どれも ブロックの中の話 ● の中やComponentを跨いだ型検査は夢の話 → 本質的な解決には至らず...
Slide 4
Slide 4 text
Vue.js x TypeScript veturのブレイクスルー (Thanks to Pine & Katashin)
Slide 5
Slide 5 text
Vue.js x TypeScript veturのブレイクスルー (Thanks to Pine & Katashin) 詳しくはこちら → Web猫 - Vue テンプレート内の式の型チェックと解析ができるまで
Slide 6
Slide 6 text
After vetur: ● 基本的なInline Template検査が可能に ● 実装はかなり力技... ○ Sourcemap generator/consumerの内部開発 ○ 独自のSFC -> AST変換(ほぼeslint vue parser?) ● 型検査機構とVSCode拡張の密結合も、応用技術の発展を難しくさせてい た ● 以降、Vueコミュニティ全体で凪の時代が続く
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Vue 3.0
Slide 9
Slide 9 text
New API
Slide 10
Slide 10 text
New API SFCのコンパイル時に 誰でもSourcemapを 扱えるように!!
Slide 11
Slide 11 text
SFC meets Sourcemap Render Function上のエラーを誰でもVue SFC上にマッピングできるようになった → ECMAScript/TypeScriptをparse・transpile・analyzeするツールで遊 び放題になった
Slide 12
Slide 12 text
Time to work...
Slide 13
Slide 13 text
Step 1 - Static Analysis -
Slide 14
Slide 14 text
Step 1: Static Analysis
Slide 15
Slide 15 text
Step 1: Static Analysis ● TypeScript Compiler API ● TS Program(本体)に解析対象のファイルを登録したり、エラーメッセージを 取得するAPI群 ● tsc はこのラッパー ● Language Service HostをinjectしてTS ProgramのOSに対するFile I/Oに介 入できるのが特徴
Slide 16
Slide 16 text
Step 1: Static Analysis
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
DEMO https://youtu.be/XEEBIhLKI2g
Slide 20
Slide 20 text
Step 2 - Editor Experience -
Slide 21
Slide 21 text
Step 2: Editor Experience ● CLIツールによる型解析は行えるようになった ● エディタ上でリアルタイムに型検査を行いたい!補完を行いたい! → Language Serverにポーティングしよう!
Slide 22
Slide 22 text
Step 2: Editor Experience
Slide 23
Slide 23 text
Step 2: Editor Experience ● TypeScript Language Service Plugin ● Language Serviceの各Hooksの処理に介入できる ○ getSemanticDiagnostics ○ getCompletionsAtPosition ○ getQuickInfoAtPosition ○ etc...
Slide 24
Slide 24 text
Step 2: Editor Experience
Slide 25
Slide 25 text
Step 2: Editor Experience
Slide 26
Slide 26 text
作った
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Architecture TS ServerとLSH の処理にひたすらpatch
Slide 29
Slide 29 text
DEMO https://youtu.be/7yvyvo7SDRQ
Slide 30
Slide 30 text
What’s good? ● Portable ○ エディタ拡張ではなくLanguage Service Pluginなので, vim, Atom, Sublimeといった他のエディタへの応用が容易 ● Minimal ○ 仮想ドキュメントレジストリの実装含めてVSCode周辺ライブラリにゼ ロ依存 ○ Core(transformer, analyzer, report)機能がvue-type-auditに良い感じ に切り出されてる
Slide 31
Slide 31 text
Future Plans ● 正直、開発を継続するモチベはあまりない... ● 仕事でフロントエンドを書く機会が無くなってしまった ○ というかそもそも本業がエンジニアリング -> Bizになった ● Vue界隈のプラクティスが多様化しすぎた ○ Pug ○ Custom Block ○ Setup block ○ Class Component
Slide 32
Slide 32 text
Future Plans ● 正直、開発を継続するモチベはあまりない... ● 仕事でフロントエンドを書く機会が無くなってしまった ○ というかそもそも本業がエンジニアリング -> Bizになった ● Vue界隈のプラクティスが多様化しすぎた ○ Pug ○ Custom Block ○ Setup block ○ Class Component メンテナ募集中です!
Slide 33
Slide 33 text
Related Works Rahul(@znck)が似たものをつくってる
Slide 34
Slide 34 text
Related Works veturがよりTS Nativeに寄ってくるかも
Slide 35
Slide 35 text
Thanks!!