How to create union of tuples?

I'm working on a library Pure Terminal which is rewriting of jQuery Terminal in TypeScript.

I have this code:

type Effect = 'g' | 'b' | 'i' | 'u' | 's' | 'o';
type NotEffect = `-${Effect}`;
type Item = '!' | '@';
type Effects = Array<Effect | NotEffect | Item>;
type Stack = Array<string>;

type Style = {[key: string]: string};
type Attrs = {[key: string]: string} & {style?: Style};

type Formating = [
    Effects,
    string,
    string,
    Array<string> | undefined,
    string | undefined,
    Attrs | undefined
];

const output: Formating = [[], '', '', undefined, undefined, undefined];

Adding undefined to formatting was a workaround to fix the issue with Union types with different length of the elements, that was causing the issue:

type Formating = [Effects, string, string]
  | [Effects, string, string, Array<string>]
  | [Effects, string, string, Array<string>, string]
  | [Effects, string, string, Array<string>, string, Attrs]

Adding this type gives errors when I want to set 4th and next elements of the formatting. Adding undefined solved the issue with TypeScript, but it change the behavior of JavaScript code. I need to add hacks to fix the issue that formatting has undefined values.

Is there a way to make Formating a tuple with a variable number of elements?

EDIT

This is my real code:

const class_i = 3; // index of the class in formatting
const attrs_i = 5; // index of attributes in formattings

function get_inherit_style(stack: Stack) {
    const output: Formating = [[], '', ''];
    function update_attrs(value: string) {
        if (!output[attrs_i]) {
            output[attrs_i] = {};
        }
        try {
            const new_attrs = JSON.parse(value);
            if (new_attrs.style) {
                const new_style = new_attrs.style;
                const old_style = output[attrs_i].style;
                output[attrs_i] = {
                    ...new_attrs,
                    ...output[attrs_i],
                    ...{
                        style: update_style(new_style, old_style)
                    }
                };
            } else {
                output[attrs_i] = {
                    ...new_attrs,
                    ...output[attrs_i]
                };
            }
        } catch (e) {
            warn('Invalid JSON ' + value);
        }
    }

    if (!stack.length) {
        return output;
    }
    for (let i = stack.length; i--;) {
        let formatting = parse_formatting(stack[i]);
        if (formatting.length > 5) {
            const last = formatting.slice(5).join(';');
            formatting = formatting.slice(0, 5).concat(last);
        }
        const style = formatting[0].split(/(-?[@!gbiuso])/g).filter(Boolean);
        style.forEach(function(s) {
            if (is_valid_effect(s) && output[0].indexOf(s) === -1) {
                output[0].push(s);
            }
        });
        for (let j = 1; j < formatting.length; ++j) {
            const value = formatting[j].trim();
            if (value) {
                if (j === class_i) {
                    if (!output[class_i]) {
                        output[class_i] = [];
                    }
                    const classes = value.split(/\s+/);
                    output[class_i] = output[class_i].concat(classes);
                } else if (j === attrs_i) {
                    update_attrs(value);
                } else if (!output[j]) {
                    output[j] = value;
                }
            }
        }
    }
    return stringify_formatting(output);
}

I've got an error:

> Tuple type '[Effects, string, string]' of length '3' has no element at index '3'

When Accessing output[class_i]

TypeScript supports optional elements in tuple types which are written by adding ? to either the end of the type if using unlabeled tuple elements:

type Formatting = 
[Effects, string, string, Array<string>?, string?, Attrs?];

or to the end of the label if using labeled tuple elements:

type Formatting = 
[a: Effects, b: string, c: string, d?: Array<string>, e?: string, f?: Attrs];

Either way will have the effect of allowing the corresponding elements to be present or missing:

const output: Formatting = [[], '', '']; // okay
const output2: Formatting = [[], '', '', ["a"], "abc"]; // okay

Playground link to code