TypeScript, можно ли создавать экземпляры класса по имени?

Question

[Wan-Derer]

Всем привет!
У меня есть абстрактный класс Control и его наследники: CheckBox, Select, Date... , пара десятков. В них есть данные и логика. Хочу в рантайме создавать экземпляры этих классов по их названию. Можно так:

if (clazz === 'cbox') return new CheckBox();
// и ещё два десятка IF

Или через длинный switch-case.

А есть ли способ лучше? Например, в MAP поместить пары:

const controlMap = new Map<string, Control>([
  ['cbox',  что-то-такое ],
  ['date',  что-то-такое ],
// 20 строчек
]);

из которых можно получать новые экземпляры.

Или ещё каким способом?

Comments

[historydev]

Зачем?

[Wan-Derer]

Владимир, затем чтобы создавать компоненты из описания. На вход прилетает описание страницы в виде JSON, я его парсю, создаю массив компонентов и отправляю на рендер.

[historydev]

Wan-Derer, используйте паттерн, например фабричный

[Wan-Derer]

Владимир, вопрос не в (не)использовании фабрики, а в более или менее изящной её реализации: через кучу IF или как-то иначе.

[historydev]

Wan-Derer, там есть примеры на сайте который я скинул, на TS

[Модератор]

Обращаю ваше внимание на регулярное нарушение п.3.6 Регламента.

Когда вы регистрировались, вы обещали выполнять Регламент.

Если вы будете продолжать нарушать Регламент, ваши вопросы могут быть удалены, а аккаунт заблокирован модераторами временно или навсегда.
Будьте благоразумны.

[Модератор]

Wan-Derer, не важно, что вам кажется. Надо просто формально выполнять Регламент.

[Wan-Derer]

Модератор, хочу выполнять! Но не понимаю что нарушил. Как мне надо было написать заголовок чтобы он был без нарушений?

[Модератор]

Wan-Derer, именно так, как вы и предположили:

Можно ли в TypeScript создавать экземпляры класса по имени?

или аналогично, соблюдая п.3.6 Регламента - т.е. соблюдая принципы построения вопросительных предложений.
Основную тему указать в тэге, подробности можно осветить в теле вопроса.

[Модератор]

Также следует убрать лирику из вопроса, см.п.3.4 Регламента.

[Wan-Derer]

Модератор, Ok

Answer 1

[Станислав Макаров]

что-то-такое

И что мешает сюда положить конструктор? В expression-контексте имя класса это функция-конструктор

class Thing {}

class Foo extends Thing {
    public readonly f: number;

    public constructor() {
        super();
        this.f = 10;
    }
}

class Bar extends Thing {
    public readonly b: string;

    public constructor() {
        super();
        this.b = "nope";
    }
}

type ThingName = "foo" | "bar"

const things = new Map<ThingName, typeof Thing>([
    ["foo", Foo],
    ["bar", Bar],
]);

const ctor = things.get("foo")!;
const t = new ctor();

Comments

[Wan-Derer]

Я во фронте немного овощ :)
Можно пример: как в мапу положить конструктор и как потом его запустить, получив экземпляр класса?

[Станислав Макаров]

Wan-Derer добавил пример

[Wan-Derer]

Станислав Макаров, Спасибо!
Но в этом примере класс Thing не м.б. абстрактным т.к. при попытке new ctor(); получим "невозможно создать экз абстрактного класса.
Хорошо, сделаем его обычным.
Но как мне снаружи инициализировать поля у потомка? Я пробую через конструктор или сеттер, не получается.
Это если я получаю объект через мапу. Если я обычным способом создаю экземпляр - всё работает.

interface ThingIf {
  key: number;
}

class Thing { }


interface FooIf extends ThingIf {
  fooData: string;
}

class Foo extends Thing {
  private _data: FooIf | undefined;

  constructor() {
    super();
  }

  // constructor(data: FooIf) {   // не работает такой конструктор
  //   super();
  //   this._data = data;
  // }

  public setData(data: FooIf) {
    this._data = data;
  }
}


const things = new Map<string, typeof Thing>([
  ['foo', Foo],
  // ..............
]);

const ctor = things.get('foo')!;
const fooInst = new ctor();
// fooInst.setData({key: 1, fooData: 'data'});   // не видит такого метода

const foo2 = new Foo();
foo2.setData({key: 1, fooData: 'data'});      // так работает!

[Станислав Макаров]

Wan-Derer, конечно он не видит такого метода - тип созданного объекта это Thing, а не Foo. Не всякий Thing это Foo, мало ли какой ещё там подкласс у Thing есть и мало ли какие конструкторы у нас перечислены в things. Сейчас-то у вас там только ['foo', Foo], но если вы добавите Bar, то поймёте в чём суть ошибки.

Вам надо либо сделать общий интерфейс, т.е. вынести setData в базовый класс Thing, либо вы делаете что-то не так, и пытаетесь обобщить код, который обобщать не нужно (если у вас setData только у одного из наследников есть)

[Wan-Derer]

Станислав Макаров, Я написал в Thing метод setData, а в Foo сделал override, мне же надо чтобы в каждом наследнике обрабатывались свои данные. Но это не помогает, всё равно ошибка.
Я пришёл к необходимости использовать дженерики и расширение типов. К сожалению, interface - это сущность TypeScript и при компиляции они исчезают, поэтому расширение типов для них не работает.
Пока что, если интерфейсы заменить на классы, решение выглядит как-то так:

// Интерфейсы, которые стали классами
class BaseData {
  key: number | undefined;
}

class MyData extends BaseData {
  data: string | undefined;
}

// Классы
abstract class BaseClass {
  abstract getData(): BaseData;
}

class MyClass1 extends BaseClass {    // Много наследников: MyClass2, MyClass3...
  myData: MyData;

  constructor(extData: MyData) {
    super();
    this.myData = extData;
  }

  getData(): MyData {
    return this.myData;
  }

}

// Где-то в коде хочу получить экземпляр
const newMyClass1 = getObj('my1', {key: 1, data: 'OLOLO'});


// Фабрика
function getObj<T extends BaseData>(type: string, someData: T): BaseClass | null {

  if (type === 'my1' && someData instanceof MyData) return new MyClass1(someData);
  // Получение других классов

  return null;
}

И использование MAP становится неоптимальным: кода не меньше, а понятность хуже. По крайней мере, на первый взгляд так.