---

前言

提示：

---

一、綁定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也不會報錯，提供了極大的靈活性）==