composition api 勉強メモ

export interfaceで子コンポーネントで型情報を定義してエクスポートする
定義した型をpropsに付与する

Item.vue

<template>
  <div>{{ todo.title }}</div>
</template>

<script lang="ts">
import { createComponent,PropType } from'@vue/composition-api'

export interface Todo {
  id: number
  title: string
}
export default createComponent({
  props: {
    todo: Object as PropType<Todo>
  },
  setup() {}
})
</script>

親コンポーネントで型情報をインポートして定義
setup内でstateに定義したData型を付与
stateにはプロパティ名todosしか入れることができなくなり、todos配列には{ id: number, title: string}　の型しか入れることができなくなる

List.vue

<template>
  <ul>
    <li v-for="item in state.todos" :key="item.id">
      <Item :todo="item" />
    </li>
  </ul>
</template>

<script lang="ts">
import { createComponent, reactive } from'@vue/composition-api'
import Item, { Todo } from '~/components/Item.vue'

export type Data = {
  todos: Todo[]
}
export default createComponent({
  components: {
    Item
  },
  setup() {
    const state: Data = reactive({
      todos: []
    })
    state.todos = [
      {
        id: 1,
        title: 'タイトル１'
      },
      {
        id: 1,
        title: 'タイトル2'
      }
    ]
    return {
      state
    }
  }
})
</script>

型定義を一箇所で定義しているため、管理がしやすくなる