Интерфейс JavaScript / TypeScript Array [], группировка по типу для отправки 1 из множества функций

Question

У меня есть array Вопроса (interface), который мне нужно отправить одной из многих функций в зависимости от типа Вопроса. Я думаю, что моя серия if заявлений очень уродлива, и я надеюсь, что есть способ сделать это, придерживаясь SOLID. Я считаю, что нарушаю O (открыто для расширения, закрыто для изменения).

renderQuestionList(contents: Question[]): HTMLElement {
    return yo`
        <div>${contents.map(q => {
            if (q.type == 'passfailna') { return this.renderQuestionPassfailna(q) };
            if (q.type == 'yesno') { return this.renderQuestionYesno(q) };
            if (q.type == 'numeric') { return this.renderQustionNumeric(q) };
        })}
        </div>`;
}

Тогда

    renderQuestionPassfailna(q: Question): any {
        return yo`<div>Stuff</div>`;
    }
    renderQuestionYesno(q: Question): any {
         return yo`<div>Other Stuff</div>`;
    }
    renderQustionNumeric(q: Question): any {
         return yo`<div>I'm Helping!</div>`;
    }

Answer 1

Если логика внутри шаблона слишком велика, ее можно переместить в функцию, например

renderQuestionList(contents: Question[]): HTMLElement {
    return yo`
        <div>${contents.map(q => renderQuestion(q))}
        </div>`;
}

    renderQuestion(q):HTMLElement {
        if (q.type == 'passfailna') { return this.renderQuestionPassfailna(q) };
        if (q.type == 'yesno') { return this.renderQuestionYesno(q) };
        if (q.type == 'numeric') { return this.renderQustionNumeric(q) };
    }

Однако я бы поставил под сомнение целесообразность создания такого большого дерева одновременно. Когда я использую YO, я предпочитаю создавать небольшие элементы и вставлять их, используя appendChild. Например,

renderQuestionList(contents: Question[]): HTMLElement {
    let div = yo`<div> </div>`;
    contents.forEach(q => {
         div.appendChild(renderQuestion(q));
    });
    return div;
}

Answer 2

это безобразно.Как насчет построения карты функций?Возможно, что-то вроде

constructor() {
   this.questions = {
      passfailna: q => this.renderQuestionPassfailna(q),
      yesno: q => this.renderQuestionYesno(q),
      numeric: q => return this.renderQustionNumeric(q)
   };
}

renderQuestionList(contents: Question[]): HTMLElement {
    return yo`<div>${contents.map(q => this.questions[q.type](q))}</div>`;
}