Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TS CompilerがVueを喋れても良いじゃないか

5c97d6b5611feeebc345c3e4742a05a8?s=47 andoshin11
December 08, 2020

TS CompilerがVueを喋れても良いじゃないか

Event: Vue.js v-tokyo オンライン Meetup#12 (https://vuejs-meetup.connpass.com/event/195236/)
Date: 2020/12/07

DEMO:
- vue-type-audit: https://youtu.be/XEEBIhLKI2g
- vue-ts-plugin: https://youtu.be/7yvyvo7SDRQ

Repository:
- vue-type-audit: https://github.com/andoshin11/vue-type-audit
- vue-ts-plugin: https://github.com/andoshin11/vue-ts-plugin

5c97d6b5611feeebc345c3e4742a05a8?s=128

andoshin11

December 08, 2020
Tweet

Transcript

  1. TS CompilerがVueを
 喋れても良いじゃないか
 @andoshin11
 2020/12/07
 #v-tokyo


  2. Andy (Shin Ando)
 @andoshin11
 • 最近Open Stackの会社に就職した 
 • BizDev・PM

    (@managed k8s team) ≠ Software Developer
 • 何でもやる人

  3. Vue.js x TypeScript
 • 長い戦いの歴史
 • thisの推論が改善されたり、Vue.extendの表現力が向上したり 
 • どれも

    <script/> ブロックの中の話 
 • <template/> の中やComponentを跨いだ型検査は夢の話 
 → 本質的な解決には至らず...

  4. Vue.js x TypeScript
 veturのブレイクスルー
 (Thanks to Pine & Katashin)


  5. Vue.js x TypeScript
 veturのブレイクスルー
 (Thanks to Pine & Katashin)
 詳しくはこちら

    → Web猫 - Vue テンプレート内の式の型チェックと解析ができるまで
  6. After vetur:
 • 基本的なInline Template検査が可能に 
 • 実装はかなり力技...
 ◦ Sourcemap

    generator/consumerの内部開発 
 ◦ 独自のSFC -> AST変換(ほぼeslint vue parser?) 
 • 型検査機構とVSCode拡張の密結合も、応用技術の発展を難しくさせてい た
 • 以降、Vueコミュニティ全体で凪の時代が続く 

  7. None
  8. Vue 3.0


  9. New API


  10. New API
 SFCのコンパイル時に
 誰でもSourcemapを
 扱えるように!!


  11. SFC meets Sourcemap
 Render Function上のエラーを誰でもVue SFC上にマッピングできるようになった 
 → ECMAScript/TypeScriptをparse・transpile・analyzeするツールで遊 び放題になった


  12. Time to work...


  13. Step 1
 - Static Analysis -


  14. Step 1: Static Analysis


  15. Step 1: Static Analysis
 • TypeScript Compiler API
 • TS

    Program(本体)に解析対象のファイルを登録したり、エラーメッセージを 取得するAPI群
 • tsc はこのラッパー
 • Language Service HostをinjectしてTS ProgramのOSに対するFile I/Oに介 入できるのが特徴

  16. Step 1: Static Analysis


  17. None
  18. None
  19. DEMO
 https://youtu.be/XEEBIhLKI2g


  20. Step 2
 - Editor Experience -


  21. Step 2: Editor Experience
 • CLIツールによる型解析は行えるようになった 
 • エディタ上でリアルタイムに型検査を行いたい!補完を行いたい! 


    → Language Serverにポーティングしよう!

  22. Step 2: Editor Experience


  23. Step 2: Editor Experience
 • TypeScript Language Service Plugin 


    • Language Serviceの各Hooksの処理に介入できる 
 ◦ getSemanticDiagnostics
 ◦ getCompletionsAtPosition
 ◦ getQuickInfoAtPosition
 ◦ etc...
 

  24. Step 2: Editor Experience


  25. Step 2: Editor Experience


  26. 作った


  27. None
  28. Architecture
 TS ServerとLSH
 の処理にひたすらpatch


  29. DEMO
 https://youtu.be/7yvyvo7SDRQ


  30. What’s good?
 • Portable
 ◦ エディタ拡張ではなくLanguage Service Pluginなので, vim, Atom,

    Sublimeといった他のエディタへの応用が容易 
 • Minimal
 ◦ 仮想ドキュメントレジストリの実装含めてVSCode周辺ライブラリにゼ ロ依存
 ◦ Core(transformer, analyzer, report)機能がvue-type-auditに良い感じ に切り出されてる

  31. Future Plans
 • 正直、開発を継続するモチベはあまりない...
 • 仕事でフロントエンドを書く機会が無くなってしまった 
 ◦ というかそもそも本業がエンジニアリング ->

    Bizになった 
 • Vue界隈のプラクティスが多様化しすぎた 
 ◦ Pug
 ◦ Custom Block
 ◦ Setup block
 ◦ Class Component

  32. Future Plans
 • 正直、開発を継続するモチベはあまりない...
 • 仕事でフロントエンドを書く機会が無くなってしまった 
 ◦ というかそもそも本業がエンジニアリング ->

    Bizになった 
 • Vue界隈のプラクティスが多様化しすぎた 
 ◦ Pug
 ◦ Custom Block
 ◦ Setup block
 ◦ Class Component
 メンテナ募集中です!

  33. Related Works
 Rahul(@znck)が似たものをつくってる 


  34. Related Works
 veturがよりTS Nativeに寄ってくるかも 


  35. Thanks!!