ts vue3 定义props写法参考

写法1

export interface Config {
  arr1: Array<IObject>,
  obj1?: IObject
}

const props = defineProps({
  title: {
    type: String,
	//必须的prop
    required: true,
    default: 'Default Title'
  },
  //数组
  dicts: {
    type: Array,
    required: true,
    default: () => []
  },
  customClass: {
    type: String,
    default: ''
  },
  //对象
  config: {
    type: Object as PropType<Config>,
    default: () => ({
      arr1: [], obj1: {
        arr1: [],
        obj1: {
          id: 1,
          name: "test"
        }
      }
    })
  }
})

withDefaults 方式

<template>
  <div class="box">
    <div><i-ep-edit /></div>
    <div><i-ep-chat-dot-round /></div>
    <div><i-ep-close /></div>
  </div>
</template>
<script lang="ts" setup>
// import { ref, reactive, computed, onMounted, nextTick } from 'vue';

interface Props {
  arr: Array<{ name: string }>;
  arr2: Array<{ name: string }>;
  my: string;
  it: number;
}
const props = withDefaults(defineProps<Props>(), {
  arr: () => [], //object对象得函数方式返回，不能直接给空数组，原因是类型限定就是得函数的方式传回object对象数据
  // type NativeType = null | number | string | boolean | symbol | Function;
  // type InferDefault<P, T> = ((props: P) => T & {}) | (T extends NativeType ? T : never);
  my: "",
});

const { arr, arr2, my, it } = props;

console.log(arr, "arrslfkjslfjslf"); //[], 说明default默认值设置是有效的
console.log(arr2, "arr2slkdfjlskfjlksjfksjd"); //undefined ，没设置默认值就是undefined

console.log(my, "myslkdfjsldfjsldfjsldfjsldf"); // "", 说明default默认值设置是有效的

console.log(it, "itslkdfjsldfjsldfjsldfjsldf"); // undefined, 没设置默认值就是undefined
arr.map((i) => {
  console.log(i.name, "slndvsldjslfkjskf");
});
</script>
<style lang="stylus" scoped></style>