コンポーネント
基本の機能をつかうときの書き方
<template> <div> </div> </template> <script lang="ts"> // lang="ts"を忘れない…!! import { defineComponent, computed, PropType, ref} from "vue" import { useStore } from 'vuex' // storeを使うときは必要 import { useRoute, useRouter} from "vue-router" // router を使うとき import { ChildComponent } from "@/components/ChildComponent.vue" import { HogeList, HogeObj } from "@/types" type Color = "red" | "blue"; export default defineComponent({ name:'ComponentName', props:{ props1: { type: Object as PropType<HogeObj>, // こういう書き方 required: true }, props2:{ type: Array as PropType<HogeList[]>, // こういう書き方 required:true }, props3:{ type: String // ただのプリミティブ値ならこの指定でOK }, props4:{ type: String as PropType<Color> // レテラル型のtypeは指定する意味あり }, props5:{ type: [String, () => Object as PropType<HogeObj>] } }, components:{ ChildComponent }, setup(props, context){ // store にアクセスするために必要 const store = useStore(); // pushなどのメソッドを使うときに router が必要 const router = useRouter(); // 現在のroute情報 const route = useRoute(); const data_val = ref('abc'); const computed_val = computed( ()=>{ return props.props2.filter( hoge => hoge.type) ) // props をテンプレ内でそのまま使う場合はsetupから返す必要はなし。 return {data_val, computed_val }; } }); </script>