Блог

Я новичок в React / Typescript и столкнулся с проблемой… Я пытаюсь создать клон Google Forms.

Моя идея состоит в том, чтобы иметь interface для каждого типа вопроса, например:

 interface ShortText {
    question: string;
    placeholder: string;
}

interface MultipleChoice {
    question: string;
    placeholder: string;
    choices: string[];
}
 

И так далее для каждого типа. Далее мне нужно сохранить список всех этих вопросов (относящихся ко всем разным интерфейсам) в моем хранилище. Но я не могу этого сделать, потому что все они имеют разные интерфейсы!

Как я мог это сделать?

Типы объединения могут работать здесь: https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#union-types

Например, используя различающие объединения: https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#discriminating-unions

 interface ShortText {
    kind: "shortText";
    question: string;
    placeholder: string;
}

interface MultipleChoice {
    kind: "multipleChoice";
    question: string;
    placeholder: string;
    choices: string[];
}

// Create a type which represents only one of the above types
// but you aren't sure which it is yet.
type Question =
  | ShortText
  | MultipleChoice;

...

let questions: Question[];

...

switch (question.kind) {
    case "shortText":
      ...
    case "multipleChoice":
      ...
}