Vue3+TypeScript 基本の書き方

コンポーネント

基本の機能をつかうときの書き方

<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>