Блог

Мне нужно загрузить некоторые виджеты из объекта шаблона (возможно, json позже). вот пример:

 type RectangleTemplate = {
  name: 'Rectangle';
  props: {
    width: number;
    height: number;
  }
};

type ButtonTemplate = {
  name: 'Button';
  props: {
    text: string;
  }
};

type Template = ButtonTemplate | RectangleTemplate;

class Button {
  constructor(template: ButtonTemplate) {
    console.log(template.name);
  }
}

class Rectangle {
  constructor(template: RectangleTemplate) {
    console.log(template.name);
  }
}

const widgets = { Button, Rectangle }

const createWidget = (template: Template): void => {
  const ctor = widgets[template.name as keyof typeof widgets];
  const node = new ctor(template as any);
};

const template: Template = {
  name: 'Button',
  props: {
    text: 'button'
  }
}

const widget = createWidget(template);

 

Проблема в этой строке : const node = new ctor(template as any); . Я не могу передать аргумент, подобный template: Template конструктору, и принудительно привести его как любой. не могу понять, как это сделать правильно.
ссылка на игровую площадку ts

Во-первых, учитывая, что вы должны знать типы shape , вы можете добавить их к ShapeNames типу.

 type ShapeNames = 'Rectangle' | 'Button'; // append the rest of the possible shapes
 

Во-вторых, создайте тип TemplateProps для каждой фигуры и добавьте их к родительскому типу ShapeTemplateProps .

 
type RectangleTemplateProps = {
  width: number;
  height: number;
}

type ButtonTemplateProps = {
  text: string;
}

// Append additional templateProps type below
type ShapeTemplateProps = RectangleTemplateProps | ButtonTemplateProps;
 

Затем назначьте ShapeTemplateProps тип props .

 type RectangleTemplate = {
  name: ShapeNames;
  props: ShapeTemplateProps;
};

type ButtonTemplate = {
  name: ShapeNames;
  props: ShapeTemplateProps;
};

 

Наконец, удалите as any приведение типов.