为什么TypeScript不接受这个任务？

Question

I am trying to define a type that could be A, B, or an object with a key that can contains as value an array or 2 or more items that themselves can be A, or B or such list object (so that the definition is recursive).

This is what I came up with:

type A = {
    prop1: string;
}

type B = {
    prop2: number;
}

type Array = {
    list: [AorB, AorB, ...AorB[]]
}

type AorB = A | B | Array;

type AorBorArray = AorB;

If I use it for something that is just A or B, it works fine:

const obj1 = { prop1: 'test' };
const a: A = obj1; // OK

const obj2 = { prop2: 123 };
const b: B = obj2;    // OK

However, if I attempt to assign a list to a variable of type AorBorArray , or fails:

const list = {
    list: [
        {prop1: 'test'},
        {prop2: 123}
    ]
};

const assignTest: AorBorArray = list; // Error

It only works if I cast that list variable to AorBorArray explicitly:

const list = {
    list: [
        {prop1: 'test'},
        {prop2: 123}
    ]
} as AorBorArray;

const assignTest: AorBorArray = list; // OK

If I change the Array type to:

type Array = {
    list: AorB[]
}

it also works. But I'd like to require 2 or more items in that array.

Why is this? Users will provide this object, so I don't want them to have to cast every time. How can I fix the typings so that the assignment just works?

Thanks!

Answer 1

When you assign to a new const without a type annotation, then typescript does its best to assume the type.

In this case:

const list = {
    list: [
        {prop1: 'test'},
        {prop2: 123}
    ]
};

The type becomes:

const list: {
    list: ({
        prop1: string;
        prop2?: undefined;
    } | {
        prop2: number;
        prop1?: undefined;
    })[];
}

That means that the array can have any number items that either have a prop1 or a prop2 .

At this point it has no way of knowing that you actually want a tuple type like [AorB, AorB, ...AorB[]] .

Then you try to assign this to AorBorArray and it the array doesn't match the tuple.

This is typically solved in two ways.

---

1. Annotate the variable with the right type when it's created.

const list: AorBorArray = {
    list: [
        {prop1: 'test'},
        {prop2: 123}
    ]
};

const assignTest: AorBorArray = list; // fine

Now typescript knows how the interpret the array literal, and validates as a tuple type.

---

2. Use as const to force a non mutable interpretation of the array, which yields a tuple type since the length in known.

But first you have to make sure your type accept an immutable value, which may or may not be right for your use case.

type MyArray = {
    list: readonly [AorB, AorB, ...AorB[]]
}

And now:

const list = {
    list: [
        {prop1: 'test'},
        {prop2: 123}
    ]
} as const;

const assignTest: AorBorArray = list; // fine

---

Most Typescript developers will know to be careful with arrays when a tuple type is expected. But this is usually a non issue, since if you pass an array literal directly to a function that requires a tuple, it will be interpreted as a tuple and there's no problem.

The only problem comes when you try to create the value separately first, without a type annotation, and then pass it a function later. And in those cases you quickly learn to look up what type is expected, import it, and annotate your value with it as in option 1.

So I wouldn't worry about too much.