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のも合わせて一回ドキュメントを一通り読むのがいいかな。