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

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

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

andoshin11

December 08, 2020
Tweet

More Decks by andoshin11

Other Decks in Technology

Transcript

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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