今天寫 demo 的時候 寫到 computed 我的想法是 modalFormRules 的 key 值都必須來源于 UserModalForm
如下圖所示：
type FormRule<T> = {
[key in keyof T]: FormItemRule | Array<FormItemRule> | FormRules
}
interface UserModalForm {
id?: number
username: string
sex?: number
nick_name?: string
phone?: string
status: number
email?: string
roles?: number[]
}
const modalFormRules = computed<FormRule<UserModalForm>>(() => ({
username: {
required: true,
message: 'Please enter a username',
trigger: ['input'],
},
status: {
required: true,
message: 'Please select a status',
trigger: ['blur', 'change'],
},
aaa: {
required: true,
message: 'Please enter aaaa',
trigger: ['input'],
},
}));
這時候是 TS 是不會報錯的 ,一直在想為啥不能報錯呢
換個寫法試試：
const modalFormRules = computed(() => {
const rules:FormRule<UserModalForm> = {
username: {
required: true,
message: 'Please enter a username',
trigger: ['input'],
},
status: {
required: true,
message: 'Please select a status',
trigger: ['blur', 'change'],
},
aaa: {
required: true,
message: 'Please enter aaaa',
trigger: ['input'],
}}
return rules
}))
這樣寫 雖然 ts 報錯 aaa 不存在于 UserModalForm 中 感覺不夠優(yōu)雅
查閱了很久的資料都沒有說這個問題
最后
再次找了找網(wǎng)上的別人說的大致的內容如下：
computed<FormRule<UserModalForm>> 中添加 aaa 字段時，
TypeScript 可能不會直接在 computed 函數(shù)內部強制執(zhí)行嚴格的類型檢查脉课。
這是因為 TypeScript 在處理 computed 函數(shù)時，可能沒有深入推斷對象的類型煮仇。
結局方案如下：
const modalFormRules = computed((): Readonly<FormRule<UserModalForm>> => ({
username: {
required: true,
message: '請輸入用戶名',
trigger: ['input'],
},
status: {
required: true,
message: '請選擇狀態(tài)',
trigger: ['blur', 'change'],
},
// 下面這一行會因為 'aaa' 不是 UserModalForm 的一部分而報錯
// aaa: {
// required: true,
// message: '請輸入aaa',
// trigger: ['input'],
// },
}));
