我想知道如何處理這個例子。有宣告的物件，我想有條件地向物件添加屬性。有什么辦法嗎？
let condition = true;
const config = {
...otherProps,
type: "date",
variant: "outlined",
fullWidth: true,
InputLabelProps: {
shrink: true,
},
};
if (condition) {
config.error = true;
config.helperText = 'error';
}
我有錯誤：
Property 'error' does not exist on type
Property 'helperText' does not exist on type
uj5u.com熱心網友回復：
如果您沒有使用初始分配分配型別，那么 Typescript 會從該點的值推斷型別。Typescript 不會向前看，也不會讓其他作業成為該型別的一部分。這意味著 的型別config在分配給一個值后被鎖定，然后您嘗試撰寫不屬于該型別的未知屬性并得到錯誤。
快速修復是使初始分配的條件部分。
let condition = true;
const config = {
type: "date",
variant: "outlined",
fullWidth: true,
InputLabelProps: {
shrink: true,
},
...(condition ? { error: true, helperText: 'error' } : {})
}
config.error // (property) error?: boolean | undefined
現在打字稿可以正確推斷error并helperText存在并且是可選的。
見游樂場
但更好的解決方案是為這個物件創建一個合適的型別。這似乎需要更多的作業，但從長遠來看，健壯的型別會為您節省大量時間和頭痛。
interface Config {
type: 'date' | 'text' | 'whatever'
variant?: 'outlined' | 'filled' | 'default'
fullWidth?: boolean
InputLabelProps: { shrink: boolean },
error?: boolean
helperText?: string
} // or something
let condition = true;
const config: Config = {
type: "date",
variant: "outlined",
fullWidth: true,
InputLabelProps: {
shrink: true,
},
}
if (condition) {
config.error = true;
config.helperText = 'error';
}
看游樂場
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/516211.html
標籤：打字稿