現時点で基本的にはVueをTSXで書けるようになっていると思いますが、まだまだ苦労を伴うと思います。#3でもリモートながら喋らせていただいてます。#3https://webneko.dev/posts/enter-the-final-v-okinawa-in-2019そして今日はそのTSXを使ってVueを書くためのスタートアップについて書きました。VueをTSで書くとは、これまでVueをTSで書くためには素で書くかAPIを新たに入れるかという、大きく分けると二択存在。細かく分けると以下3種類存在するかと思います。API採用によって、第一に書きやすいこと、より迅速にスタートアップできること、そしてTSXによる厳密な型管理を実現できます。あとはReactとVueの双方でTSXを書けるようになることは、相互乗り入れ(?)ではないですが、互いに往き来しやすいというメリットも生まれそうです。WebpackとVue、そしてTSXまず基本から、Webpackをモジュールバンドラにした場合どんな感じで書けるのか。}}こんな感じで各種ローダを読み込むと最低限VueをTSで書けるようになると思います。ここまではさくっと流した上で、TSXで書くための準備としてBabelの設定を行う必要があります。['transform-vue-jsx]ルートコンポーネントであるApp.vueをApp.tsxに置き換えます。}})これでVueをTSXで書くための準備が整いますね。jiyuujin/vue-tsx-boilerplate詳しくはこちらのリポジトリを参照ください。CLIでTSXを使う構築できたとはいえ実際のプロジェクト導入にあたって、Webpackを直接メンテすることは極力避けたいですね。CLIの中でTSXを使いましょう。これでTSXを書いて動くのか、残念ながら動きません。🤷‍♀️その理由はcreateComponentをhにマッピングできていないから。"preserve",}React以外でもTSXを使えるようになります。あとは型定義を拡張すること。}}ルートコンポーネントであるApp.vueをApp.tsxに置き換えます。CLIでもTSXを使って書けるようになります。jiyuujin/vue-cli-tsx-boilerplate詳しくはこちらのリポジトリを参照ください。スタイルの適用ここまで来ると次はスタイルですね。mm以下のようにスタイルをテンプレートに直接書く方法もあります。}})</script>無理に拡張子をTSXにする必要はなく、Vueならではの書き方を踏襲することがとりあえず良さそうです。