Vue3 ts环境下的PropType

 简介

      在Typscript中，我们可以使用PropType进行类型的推断与验证。在日常的开发中我们常常会遇到下面这样的场景：

        我们通过request请求从服务端获取了一条数据，数据是个Array的格式，Array中的每个元素又是一个对象，像下面这样的数据

const intro = [
  {
    title: "标题一",
    description: "描述一",
    totalNum: 1
  },
  {
    title: "标题二",
    description: "描述二",
    totalNum: 2
  },
  {
    title: "标题三",
    description: "描述三",
    totalNum: 3
  },
]

        此时我们如果封装几个方法在ts文件中，用于处理这样的服务端数据，在传参的过程中，我们可能用一个Array类型去接这个intro数组，但可能项目多人开发，别人在使用这个数组时就不了解这个Array中具体每个元素是什么类型，此时我们使用PropType。

使用

        一个小栗子，在非setup语法糖的环境中使用PropType

export interface CompProps {
  title: string;
  description: string;
  totalNum: number;
}

<template>
  <div class="backbox">
    <div class="introbox">
      <div v-for="item in intro">
        <div class="intro">title = {{ item.title }}</div>
        <div class="intro">description = {{ item.description }}</div>
        <div class="intro">totalNum = {{ item.totalNum }}</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { PropType, defineComponent } from "vue";
import { CompProps } from './prop';

export default defineComponent({
  name: "Comp",
  props: {
    intro: {
      type: Array as PropType<CompProps[]>,
      required: true
    },
  }
})
</script>
<style lang="less" scoped>
.introbox {
  background-color: antiquewhite;
  padding: 20px;
  .intro {
    display: inline-block;
    padding: 20px;
    margin: 10px;
    background-color: silver;
  }
}
</style>

<template>
  <div>
    <h2>PropType属性的类型验证</h2>
    <div>
      <Comp :intro="intro"></Comp>
    </div>
  </div>
</template>
<script setup lang="ts">
import Comp from './component/index.vue';

const intro = [
  {
    title: "标题一",
    description: "描述一",
    totalNum: 1
  },
  {
    title: "标题二",
    description: "描述二",
    totalNum: 2
  },
  {
    title: "标题三",
    description: "描述三",
    totalNum: 3
  },
]
</script>
<style></style>

        当我们在上边这段代码的文件中，使用鼠标停在Comp元素上时，此时vscode给出的提示是下面这张图里的样子 ：

        可以看到intro不是个Array类型，而是PropType<CompProps[]>类型。 

一个小栗子，在setup语法糖中使用PropType

export interface CompNum {
  num: number;
  id: number;
}

<template>
  <div class="backbox">
    <div class="btnbox" v-for="num in numbs">
      <div class="btn" :id="String(num.id)" @click="buttonEvent($event)">{{ num.num }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { PropType, ref } from 'vue';
import { CompNum } from './prop';

const props = defineProps({
  nums: {
    type: Array as PropType<CompNum[]>,
    default: []
  }
});
const emits = defineEmits(['update:nums']);
const numbs = ref(props.nums);
const buttonEvent = (event: any) => {
  let index = event.target.id;
  let arr = numbs.value;
  arr[index].num++;
  numbs.value = arr;
  emits('update:nums', numbs);
}
</script>
<style scoped lang="less">
.btnbox {
  display: flex;
  flex-direction: row;
  background-color: cadetblue;
}
.btn{
  display: inline-block;
  padding: 25px 40px 25px 40px;
  margin: 10px 40px 10px 20px;
  background-color: aquamarine;
  text-align: center;
}

</style>

<template>
  <div>
    <h2>PropType属性的类型验证</h2>
    <div>
      <Btns v-model:nums="numsRef"></Btns>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import Btns from './component/button.vue';

const intro = [
  {
    title: "标题一",
    description: "描述一",
    totalNum: 1
  },
  {
    title: "标题二",
    description: "描述二",
    totalNum: 2
  },
  {
    title: "标题三",
    description: "描述三",
    totalNum: 3
  },
]
let one = { num: intro[0].totalNum, id: 0 };
let two = { num: intro[1].totalNum, id: 1 };
let three = { num: intro[2].totalNum, id: 2};
const nums = [one, two, three];
const numsRef = ref(nums);

watch(() => numsRef.value,
 (value) => {
  console.log("newValue = ", value);
  },
  {deep: true}
);

</script>
<style></style>