JavaScript / TypeScript Array interface []，按类型分组以发送多种功能中的一种

Question

I have an array of Question ( interface ) that I need to send to 1 of many functions based on Question type. I think my series of if statements is very ugly and am hoping there is a way of doing this that adheres to SOLID. I believe I am violating O (Open for extension, closed for modification).

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>`;
}

Then,

    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

it is ugly. How about building a map of functions? Perhaps something like

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>`;
}

Answer 2

If the logic inside the template is too large, then it can be moved to a function, such as

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) };
    }

However, I would question the wisdom of generating such a large tree all at once. When I use YO I prefer to generate small items, and insert them using appendChild . For example,

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