Vue3.0 使用 ts 给 props 传入泛型

在 vue 中使用 ts 的泛型来规范父组件传入的 props 属性，就需要使用 vue 提供的 PropType 属性，具体用法如下

<!--
 * @Author: mtrun
 * @Date: 2020-11-10 21:21:00
 * @LastEditTime: 2020-11-10 21:37:39
 * @LastEditors: Please set LastEditors
 * @Description: 使用泛型约束 props 的值
-->
<template>
  <div>
    <h1>测试界面</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';

export interface ColumnProps {
  id: number;
  title: string;
  avatar: string;
  description: string;
}

export default defineComponent({
  name: 'ColumnList',
  props: {
    list: {
      type: Array as PropType<ColumnProps[]>,
      required: true,
    },
  },
  setup() {
    return {};
  },
});
</script>

<style lang="less" scoped>
</style>