Nuxt.js に vue-tsx-support を利用して tsx コンポーネントを突っ込む

2020/02/10 01:14:102020/02/10 01:58:28


Next.js でブログを作ろうとした で冒頭に書いた通り、Next.js で vue-tsx-support を用いて Next.js のために作ったコンポーネントを再利用しようと試みたのだが、下らないところで詰まって導入に数時間かかったので、知見として導入方法を書いておきたいと思う。今ももう覚えているか怪しいが…。

Nuxt.js + TypeScript プロジェクトを作ろう
npx create-nuxt-app <projectName> で生やせるのは皆さんご存知なので、これで適当に生やした後
  • yarn add @nuxt/typescript-runtime vue-tsx-support
  • yarn add -D @nuxt/typescript-build
  • nuxt.config.js -> nuxt.config.ts にして import { Configuration } from "@nuxt/types" の型をつける
  • src フォルダを作ってフォルダを全部その下に移動する
  • nuxt.config.ts に srcDir: './src' buildModules: ["@nuxt/typescript-build"]
  • これ重要で buildModules 書き忘れで数時間無駄にしました
  • src/types/shims ディレクトリ生やして shims-vue.d.ts 作ろう
  • Nuxt.js + TypeScript の導入マニュアルにも書いてあったはず
  • 全部書いてあるんだが…
  • 上見てください 何のためにここまで詳しく書いたんだよ
  • buildModules もちゃんと書いてあるじゃんというかなんかの拍子で消えたんだよな
  • build に parallel 設定追加したら一緒に消えた気がする
  • 単純な範囲選択ミスです

vue-tsx-support を追加してみよう
  • src/types/shims に shims-tsx.d.ts jsx.d.ts の2ファイルを追加します
  • components に pages でも作って index.tsx 作る
  • 適当に書いてみよう
index.tsx
import Vue, { CreateElement, VNode } from "vue" 
import * as tsx from "vue-tsx-support" 
 
export const Index = tsx.component({ 
  name: "Index", 
  props: {}, 
  render(): VNode { 
    return <div>This is tsx element</div> 
  }, 
})
  • pages/index.vue から呼んでみよう
index.vue
<template> 
  <div class="container"> 
    <Index /> 
  </div> 
</template> 
 
<script lang="ts"> 
import Vue from "vue" 
import { Index } from "~/components/pages/index" 
 
export default Vue.extend({ 
  components: { Index }, 
}) 
</script>
  • これ lang="ts" 忘れて型補完効かないんだけど :anger: みたいなこともありがちなので
  • 実際あった 感嘆符禁止週間

覚えてました。みんなもレッツ tsx in vue
tsx component のファイル開きながら yarn add したら TypeScript: Restart TS Server するまで型補完ブチ壊れることが多いよね
  • というか百発百中?
  • このメニューは .ts(x) ファイルでしか出ないはずなので .vue ファイルにいたら切り替えが必要になってだるい 感嘆符禁止 


著者の画像

ci7lus

@ci7lus

Caramelize - Made withCaramelizeand / Privacy