スピーカー

Vueトラック06:20〜06:50

Vue SFCのtemplateでTypeScriptの型を活用しよう

Vue SFCのtemplateは一見scriptとは分離されているように見えますが、Vue Language Toolsの力を借りることによってtemplate上で型のnarrowingをしたり、型推論したりすることができます。さらに、Volar Labs https://volarjs.dev/core-concepts/volar-labs/ というVSCode Extensionを使うことでどのように型が解釈されているかを確認することもできます。 そこで、上記の特徴を使って、template上で条件分岐の網羅性をチェックする方法や、defineSlotsマクロを通じてgenericなslotを定義する方法などを共有しつつ、Vue SFCのtemplate上でどのように型が解釈されているかを探ります。
tsukkee

ストックマーク株式会社

チームリード

tsukkee