2020-11-30 :

nuxt-ts day1:コンポーネントを作る


flutterをやろうと思って環境構築まで行ったのだけども、いまいちnuxtの理解が中途半端な気がしたのとtypescriptを触っておきたかったので、nuxt-tsを改めてちゃんと勉強してみようと思う。

create-nuxt-appでtypescriptを選択すると自動で設定してくれる。便利。

とりあえず基本的なcomponentsを作ってみるかとドキュメントを眺めるが、exampleがめちゃ簡素なので結構苦戦。

https://typescript.nuxtjs.org/ja

pages\index.vue
<template>
  <div class="container min-h-screen justify-center items-center text-center mx-auto p-20">
    <User :user="user_obj"/>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
  setup () {
    const user_obj = ref({firstName: "ai",lastName:  "ueo"})
    return {
      user_obj
    }
  }
})
components\User.vue
<template>
  <div>
    Name: {{ fullName }}
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from '@vue/composition-api'

interface User {
  firstName: string
  lastName: string
}

export default defineComponent({
  props: {
    user: {
      type: Object as () => User,
      required: true
    }
  },

  setup ({ user }) {
    const fullName = computed(() => `${user.firstName} ${user.lastName}`)

    return {
      fullName
    }
  }
})
</script>

なんとか動くコードは書けた。setupで明示的に値を渡す必要があるみたい。

しかし、型ガードが効いていないようでfirstName をint型をしても普通に渡せてしまう。ESlintとかを使わなきゃダメなのかな?そんなことは無い気がするけど、そもそもESlintが何かもいまいち分かってないしそこも勉強せねば。

Nuxtのも合わせて一回ドキュメントを一通り読むのがいいかな。

https://github.com/hukurouo/nuxt-ts-sample