我想定義物件值的子型別別如下SHAPE_PARAMS。
我可以將 type 與 type assertion 設定為<CircleParameter>，但無法對丟失的屬性進行檢查。
如何嚴格定義子型別別？
const Shapes = {
CIRCLE_A: "CIRCLE_A",
CIRCLE_B: "CIRCLE_B",
RECTANGLE_A: "RECTANGLE_A",
} as const;
type Shapes = typeof Shapes[keyof typeof Shapes];
interface ShapeParameter {
color: string;
}
interface CircleParameter extends ShapeParameter {
radius: number;
}
interface RectangleParameter extends ShapeParameter {
width: number;
height: number;
}
const SHAPE_PARAMS: { [key in Shapes]: ShapeParameter } = {
[Shapes.CIRCLE_A]: <CircleParameter>{
color: "red",
radius: 1,
},
[Shapes.CIRCLE_B]: <CircleParameter>{
// color: "blue", <- Missed property cannot be linted.
radius: 2,
},
[Shapes.RECTANGLE_A]: <RectangleParameter>{
color: "green",
width: 3,
// height: 3, <- Missed property cannot be linted.
},
};
uj5u.com熱心網友回復：
這里的問題是<TypeName>語法斷言物件具有該型別，而您希望編譯器檢查該物件是否具有該型別。
最好的解決方案可能是更改型別{ [key in Shapes]: ShapeParameter }，使其更具體：
type ShapeParameterMap = {
[Shapes.CIRCLE_A]: CircleParameter,
[Shapes.CIRCLE_B]: CircleParameter,
[Shapes.RECTANGLE_A]: RectangleParameter,
}
const SHAPE_PARAMS: ShapeParameterMap = {
// ...
};
游樂場鏈接
這樣做的好處是，SHAPE_PARAMS[k]當您使用某些k更具體的型別訪問它時，您可以獲得更具體的型別。
另一方面，也許這看起來代碼重復太多了；在這種情況下，您可以通過撰寫一個不執行任何操作但檢查其引數型別的簡單實用函式來實作您想要的：
function check<T>(arg: T): T {
return arg;
}
const SHAPE_PARAMS: Record<Shapes, ShapeParameter> = {
[Shapes.CIRCLE_A]: check<CircleParameter>({
color: "red",
radius: 1,
}),
[Shapes.CIRCLE_B]: check<CircleParameter>({
radius: 2,
// missing property 'color'
}),
[Shapes.RECTANGLE_A]: check<RectangleParameter>({
color: "green",
width: 3,
// missing property 'height'
}),
};
游樂場鏈接
uj5u.com熱心網友回復：
您可以從鍵前綴推斷出預期的形狀引數型別：
type ShapeParams = {
[K in Shapes]: K extends `CIRCLE_${string}` ? CircleParameter : RectangleParameter
}
/** type ShapeParams is
{
CIRCLE_A: CircleParameter;
CIRCLE_B: CircleParameter;
RECTANGLE_A: RectangleParameter;
}
*/
const SHAPE_PARAMS: ShapeParams = {
[Shapes.CIRCLE_A]: {
color: "red",
radius: 1,
},
[Shapes.CIRCLE_B]: { // <- Property 'color' is missing
// color: "blue",
radius: 2,
},
[Shapes.RECTANGLE_A]: { // <- Property 'height' is missing
color: "green",
width: 3,
// height: 3,
},
};
操場
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/383506.html
標籤：打字稿