---

前言

提示：

---

一、绑定props 默认值的方式：withDefaults

1.vue2 的props设置默认值

 props: {// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)propA: Number,// 多个可能的类型propB: [String, Number],// 必填的字符串propC: {type: String,required: true},// 带有默认值的数字propD: {type: Number,default: 100},// 带有默认值的对象propE: {type: Object,// 对象或数组默认值必须从一个工厂函数获取default: function () {return { message: 'hello' }}},// 自定义验证函数propF: {validator: function (value) {// 这个值必须匹配下列字符串中的一个return ['success', 'warning', 'danger'].indexOf(value) !== -1}}}

2.vue3 的props设置默认值

(1) 不设置默认值的写法

interface Props {name: string,age: number,address: string,
}
const props = defineProps<Props>()

(2) 设置默认值的写法（分离模式）

interface Props {name: string,age: number,address: string,
}
const props =  withDefaults(defineProps<Props>(),{name: '张三',age: 18,address: '中国义务',
})

(3) 设置默认值的写法（组合模式）

const props = withDefaults(defineProps<{ name: string, age?: number address?: string }>(),{name:'张三',age: 18,address:'中国义务',}
);

二、定义一个二维数组的数据类型

比如：级联里面的的[[1],[2],[3]]这种 也就是数组里面嵌套number类型的数组

type numberArray = Array<number>
// ts中定义参数
export function get<T>(params: {levelIds?: Array<numberArray>
}) {}
let levelIds: numberArray[] = ref([[1]]). // vue 中

三、一个普通的form表单可能碰到的多层嵌套数据定义类型

type formType = {value1: string // 定义基本数据类型value2: { key1: string; key2: string }[] // 定义数组里面对象的属性// 数组里面的对象，对象里面是对象的value3: {examTopicRecordId: number // 对象里面的基本数据errorReasonList: [] // 对象里面的数组answers: string[] // 对象里面的字符串数组// 对象里面的对象scoringRecordMap: { // [prop: string]  定义对象的key是string类型的，后面的是对象的属性名[prop: string]: {scoring: string, // 评分errorReason: string[], // 错误原因remark: string, //备注}}}[][key: string]: any // 这是一个索引签名}
const formForm: formType =reactive({...})

重点：

重点1： 属性对象里面的 [prop: string]: {}是索引签名的一种表示方式，用户描述一个对象的索引类型和索引值的类型。
重点2： == [key: string]: any 是索引签名的一中表示方式，它表示这个对象可以有任意名称的属性，这些属性的值可以是任何类型（比如你在formForm中定义了value1，value2，value3以外使用了value4也不会报错，提供了极大的灵活性）==