[英]infer type From another Propertyin Typescript?
I have been bumping my head here and there and I couldn't gain any more progress than this我一直在这里和那里撞到我的头,我无法获得比这更多的进步
for example, I want TObject.props to accept 'href'
or 'download'
only if I pass TObject.name = 'a'
and not If passed TObject.name = 'p'
例如,我希望 TObject.props 仅在我传递TObject.name = 'a'
时才接受'href'
或'download'
而不是 If passed TObject.name = 'p'
and also how can I make reduxStoreType.objects accept an array of TObjects but not necessarily all of them should be one type like Tobjects<'a'>以及如何让 reduxStoreType.objects 接受一个 TObjects 数组,但不一定所有的 TObjects 都应该是一种类型,如 Tobjects<'a'>
for example I want the possibility to have the following例如我希望有以下可能性
reduxStoreType.objects = [TObject<'a'>,TObject<'p'>,TObject<'div'>...]
here are my interfaces这是我的界面
interface TagsTypes {
// HTML
p: React.HTMLAttributes<HTMLParagraphElement>;
a: React.AnchorHTMLAttributes<HTMLAnchorElement>;
form: React.FormHTMLAttributes<HTMLFormElement>;
head: React.HTMLAttributes<HTMLHeadElement>;
img: React.ImgHTMLAttributes<HTMLImageElement>;
input: React.InputHTMLAttributes<HTMLInputElement>;
span: React.HTMLAttributes<HTMLSpanElement>;
button: React.ButtonHTMLAttributes<HTMLButtonElement>;
div: React.HTMLAttributes<HTMLDivElement>;
}
interface TObject<T extends keyof TagsTypes> {
width: number;
height: number;
name: T;
props: TagsTypes[T];
innerText: string;
}
interface CanvasType extends HTMLDivElement {}
interface reduxStoreType {
canvas: CanvasType;
objects: TObject<'a'>;
}
Let's reduce your problem to something simpler, solve the simpler version, and then hopefully you can apply it to your real-world scenario.让我们将您的问题简化为更简单的问题,解决更简单的版本,然后希望您可以将其应用到您的真实场景中。
We have some shapes:我们有一些形状:
type ShapeTypes = "circle" | "square" | "rectangle" | "triangle";
And we could express the objects like this (similar to your current TObject definition):我们可以这样表达对象(类似于您当前的 TObject 定义):
interface Shape<Type extends ShapeTypes> {
type: Type;
area: number;
}
But then here's the problem.但这就是问题所在。 What if we want a circle to have a radius or diameter?如果我们想要一个圆有半径或直径怎么办? A square to have a side length?正方形有边长? A triangle's classification?三角形的分类?
Here's where we use a discriminated union:这是我们使用可区分联合的地方:
type Shape =
{
type: "circle";
area: number;
radius: number;
} | {
type: "square";
area: number;
side: number;
} | { ... }; // more
As you can see now, each type of shape has properties specific to them.正如您现在看到的,每种类型的形状都具有特定于它们的属性。 Although this is a lot more typing it's what you want.虽然这需要输入更多内容,但这正是您想要的。 You'll see when we use them like this:你会看到我们何时像这样使用它们:
if (shape.type === "circle") {
shape.radius // number, no errors
shape.side // error!
} else if (shape.type === "square") {
shape.radius // error!
shape.side // number, no errors
} else if (...) { ... } // more if you want
And also using these in an array is as simple as Shape[]
, while still retaining all this type information.而且在数组中使用它们就像Shape[]
一样简单,同时仍然保留所有这些类型信息。
If it's too long to type all the redundant shared properties, make a new base type and intersect it for each member in the union:如果键入所有冗余共享属性太长,请创建一个新的基本类型并将其与联合中的每个成员相交:
type Base = {
area: number;
// more properties if needed
};
type Shape =
{
type: "circle";
radius: number;
} & Base | {
// ...
} | { ... }; // others
So now how do you apply this to your case?那么现在你如何将它应用到你的案例中呢?
Here's some code to get started:下面是一些入门代码:
type TBaseObject = {
// ...
};
type TObject = {
// ...
} | {
// ...
}; // ...
interface reduxStoreType {
canvas: CanvasType;
objects: TObject[];
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.