Find a way to add some typing to the $refs in the AbstractTransitionComponent

[ReneDrie]

Since we use typescript for the $refs there is a lot of typing involved when using arrays, components, htmlElements next to each other. Especially if you have larger transitions this can be a hassle.

In a project I've solved it like this, but I don't think this is a nice way:

const { title } = parent.$refs as RefElement;
const { listItems } = parent.$refs as RefElement[];
const { icon } = parent.$refs as RefComponent;

Where I've typed the RefElement and RefComponent as:

type RefElement = { [name: string]: HTMLElement | SVGElement };
type RefElements = { [name: string]: HTMLElement[] | SVGElement[] };

type RefComponent = { [name: string]: IAbstractTransitionComponent };
type RefComponents = { [name: string]: IAbstractTransitionComponent[] };

But it might be a better Idea to pass all the refs you want to be used as typed example in the extends AbstractTransitionController. Not sure if this is possible, but something like:

export default class GameEndPageTransitionController extends AbstractTransitionController<{
  title: HTMLElement,
  listItems: HTMLElement[],
  icon: IAbstractTransitionController,
}> {}

[ThaNarie]

The first solution could be a bit more reusable:

// base
type VueRef<T> = Record<string, T>;
type VueRefs<T> = Record<string, T[]>;

// reusable shorthand to not always type the union
type RefElement = VueRef<HTMLElement | SVGElement>;
type RefElements = VueRefs<HTMLElement | SVGElement>;

// but still requires
const { icon } = parent.$refs as VueRef<Component>;

But that's not what you're asking for, will come back later for the second thing :)