3.0のいくつかの機能がアナウンスされました。その中で特に興味を引いたのは公式なTSXのサポートアナウンスです。Templateを標準スタイルとしているが故に「Vueで型安全なアプリケーションは書けない」と長らく叫ばれていましたが、ようやくその汚名(?)も晴らせそうそうですね。今回は@wonderful-panda氏の提供しているvue-tsx-supportを利用して、一足先に型安全なVueアプリケーションの世界を体験してみたいと思います。CLIで作成しました。CLI用のプラグインを作ってくれました。https://github.com/chanlito/vue-cli-plugin-tsx-supportそのため、アプリケーションルートに移動して下記のコマンドを実行するだけで簡単に導入は終了。tsx-supportちなみにNuxtで使いたい方はWebpackの設定をこんな感じに書けば動くんじゃないでしょうか。preserveの設定を追記するのをお忘れなく。2.4からはTSXがデフォルトサポートされているのでBabelの設定だけで十分かもです。Function内にTSXを記述するだけ。trueとしている点に注意してください。Boolean型ではなくTrue型を明示的に指定することで、このコンポーネントを親コンポーネントから呼び出すときに当該PropsがOptionalではないことに気がつけます。Name}となります。componentFactoryOf関数を利用して対象のイベント型を指定します。/>)...シンタックスの留意点JSXでは基本的にJavaScriptのパダライムでDOMを構築していきます。Array#mapや三項演算子を利用する点に注意してください。気をつけるべきは下記の項目でしょうか。Treeへの変換にはbabel-plugin-transform-vue-jsxが使われているので細かい仕様が知りたい方はそちらを参考にどうぞ。Objectが呼ばれるなど、ReactのJSXとは微妙に違う部分もあるので、一度こちらに目を通しておくと良いでしょう。コンポーネントのスタイリング現代のフロントエンドにおいて、GlobalなCSSを愚直にBEMで定義する人は少ないかと思います。CSSを活用している人が殆どでしょう。残念ながらvue-loaderを通さないTSXではその機能も利用できません。Modulesを利用することにしました。ComponentsやEmotionを利用することも検討しましたが、既存のVueコンポーネントから資産を使いまわせることやLint周りの利点を考慮してピュアなCSSを書く方式に落ち着きました。vue.config.jsを作成して下記の内容を記述してください。}}設定が完了したらスタイリングを行いたいコンポーネントディレクトリを以下のように設定します。styles.css.d.ts今回はTitleコンポーネントを例にとりました。Compilerからmoduleとして認識されないだけでなく、CSSファイル内にどのようなセレクタが定義されているのかもTSからは知るすべがありません。Modulesを利用することが可能になります。毎度すべてのセレクタを定義するのは骨が折れるので、開発時には@Quramyさんの作成したtyped-css-modulesを利用しています。fileを生成してくれる神ツールなのでオススメです。Modulesを利用する際は、SSR時のCSSのインライン化がデフォルトでは行われない点に注意してください。Headへのスタイル埋め込みが実行されるので、初回レンダリング時にサイトが「ガタッ」となります。build.loaders.vueStyle.manualInjectオプションをtrueに設定した上で、各コンポーネント内に下記の処理を追加します。},...全コンポーネントに上記を記述するのは流石に面倒なので、そのうち何かしらのloaderを書きたいです。今回調査するまで知らなかったのですが、普段はvue-loaderが同様の処理をしてくれるため、あまり意識することはありませんでした。Requestをいくつか作っています。3.0が待ちきれない方は上のPRにコメントいただくか、ブランチをローカルビルドしてご利用していただければと思います。最後に今回は全編をTypeScriptでお届けしました。ここまでくるともうReactとそんなに書き味は変わんねぇなーという気持ちです。Compoennts?)にextractする際は、やはり旧来のVueのdirectiveでDOMを組み立てる方が楽な気もしました。v-forとかv-ifで制御する事に対して「キモっ」と思う人たちの気持ちも分かるのでこの辺りのトレードオフはプロジェクトごとに見極める必要がありそうです。Vueのエラーレポート機能は非常に優秀なのでPropsの指定漏れ程度なら開発時にほぼほぼ潰せるのですが、やはり静的解析の恩恵も捨てがたく...もうしばらくプライベートで検証してみるつもりなので、興味ある人はその辺のトピックについて語り(飲み)ましょう。