先日開催された[Vue Fes](https://vuefes.jp/)および[VueConf TO](https://vuetoronto.com/)にて、Evanから正式にVue 3.0のいくつかの機能が[アナウンス](https://youtu.be/8Hgt9HYaCDA?t=1637)されました。その中で特に興味を引いたのは公式なTSXのサポートアナウンスです。 Literal Templateを標準スタイルとしているが故に「Vueで型安全なアプリケーションは書けない」と長らく叫ばれていましたが、ようやくその汚名(?)も晴らせそうそうですね。今回は[@wonderful-panda](https://github.com/wonderful-panda)氏の提供している[vue-tsx-support](https://github.com/wonderful-panda/vue-tsx-support)を利用して、一足先に型安全なVueアプリケーションの世界を体験してみたいと思います。 Embedded content: https://github.com/wonderful-panda/vue-tsx-support # vue create app 今回はGitHubのレポジトリ情報をGraphQLで取得するサンプルアプリケーションをVue CLIで作成しました。レポジトリはこちら↓ Embedded content: https://github.com/andoshin11/vue-tsx-apollo-example # tsx環境の設定 [vue-tsx-support](https://github.com/wonderful-panda/vue-tsx-support)を導入するためにはwebpackの設定を書き換えてbabel-loaderにJSX用のloaderを設定したりするなどいくつかの準備が必要なのですが、幸いなことに[@chanlito](https://github.com/chanlito)氏がVue CLI用の[プラグイン](https://github.com/chanlito/vue-cli-plugin-tsx-support)を作ってくれました。 Embedded content: https://github.com/chanlito/vue-cli-plugin-tsx-support そのため、アプリケーションルートに移動して下記のコマンドを実行するだけで簡単に導入は終了。 ```shell $ vue add tsx-support ``` ちなみにNuxtで使いたい方はWebpackの設定をこんな感じに書けば動くんじゃないでしょうか。知らんけど ```js config.resolve.extensions.push('.tsx') config.module.rules.push({ test: /\.tsx$/, use: [ { loader: 'babel-loader', options: { presets: [['@babel/env', { modules: 'commonjs' }]], plugins: [ 'babel-plugin-vue-jsx-modifier', 'babel-plugin-transform-vue-jsx', '@babel/plugin-syntax-dynamic-import', [ '@babel/plugin-transform-runtime', { regenerator: true } ] ] } }, { loader: 'ts-loader', options: { appendTsSuffixTo: [/\.vue$/], transpileOnly: process.env.NODE_ENV === 'development' ? true : false } } ] }) ``` `tsconfig.json`にも `"jsx": preserve`の設定を追記するのをお忘れなく。 Nuxt 2.4からはTSXがデフォルトサポートされているのでBabelの設定だけで十分かもです。 # tsxでコンポーネントを記述する詳しいAPIについては[ドキュメント](https://github.com/wonderful-panda/vue-tsx-support#readme)を読むのが一番ですが、基本的には下記のようにRender Function内にTSXを記述するだけ。その他のAPIについては通常のVue with TSアプリケーションと同様です ```js // components/Title.tsx import * as tsx from 'vue-tsx-support' export default tsx.component({ name: 'Title', props: { label: { type: String, required: true as true } }, render() { return (

{this.label}

) } }) ``` RequiredなPropsについては `true as true`としている点に注意してください。Boolean型ではなくTrue型を明示的に指定することで、このコンポーネントを親コンポーネントから呼び出すときに当該PropsがOptionalではないことに気がつけます。 ![スクリーンショット 2019-01-24 11.01.24](//images.ctfassets.net/2p1otbbee5vt/4V26HV8uyTTwFElbtKxKGF/90a315933c9b95d4533c3f99a8acf416/____________________________2019-01-24_11.01.24.png) プロパティの補完もバッチリです！ ![スクリーンショット 2019-01-24 11.01.43](//images.ctfassets.net/2p1otbbee5vt/GzDqkwnydAWWAUuIHRSdr/28f030351e91425e51ac226fabcfd657/____________________________2019-01-24_11.01.43.png) ### イベントハンドラ `v-on:click`, `@click`などで指定していたイベントハンドラは、JSX記法では `on${Event Name}`となります。 ```js // components/Buttons.tsx import * as tsx from 'vue-tsx-support' export default tsx.component({ name: 'Button', methods: { sayHi() { alert('Hi!') } }, render() { return } }) ``` ### Event Type Emitするイベントを親コンポーネント側で指定したいときには、 `componentFactoryOf`関数を利用して対象のイベント型を指定します。 ```js // components/Button.tsx import * as tsx from 'vue-tsx-support' interface Events { onSuccess: (msg: string) => void } export default tsx.componentFactoryOf().create({ name: 'Button', render() { return } }) // container.tsx ... return (