I’m trying to understand this error, but I can’t seem to make sense of it… I’m using some Typescript features that are fairly new to me (conditional types), so I could just be misunderstanding how they work.
Any help would be greatly appreciated! ????
Here’s my code:
type PrimaryCell = "primary" | "header";
type BorderCell = "top" | "bottom";
type AnyCell = PrimaryCell | BorderCell;
type Cell<T extends AnyCell, U extends string | string[]> = {
content: U;
type: T;
};
type TallCell<T extends PrimaryCell> = Cell<T, string[]>;
type ShortCell<T extends AnyCell> = Cell<T, string>;
// This is a conditional type for determining which cell types are allowed given a cell type
type TallOrShort<T extends AnyCell> = T extends PrimaryCell
? TallCell<T>[] | ShortCell<T>[]
: ShortCell<T>[];
class RegularRow<T extends PrimaryCell, U extends TallOrShort<T>> {
cells: U;
type: T;
constructor(cells: U) {
this.cells = cells;
this.type = this.cells[0].type; // <-- ERROR
}
}
Here’s the error:
Type '"primary" | "header"' is not assignable to type 'T'.
'"primary" | "header"' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'PrimaryCell'.
Type '"primary"' is not assignable to type 'T'.
'"primary"' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'PrimaryCell'.ts(2322)
Here’s my temporary fix (not ideal)
this.type = this.cells[0].type as T;
If there’s a better way to implement this then, I am happy to hear suggestions.
My goal is to use Typescript to enforce that the RegularRow
class should have an array of cells that can be either be Tall
or Short
(but not both) and the Cell type "primary",
"header"
, "top"
, or "bottom"
should dictate whether the cells can be Tall
or Short
. That’s where the TallOrShort
conditional type comes into play.
I don’t usually get this deep into Types, but I’m making a library and figured it would be a good opportunity to learn more advanced Typescript features.
Thanks in advance!
Things I’ve Tried
I’ve tried a variety of things to solve it. It seems that this type is causing some problems.
type TallOrShort<T extends AnyCell> = T extends PrimaryCell
? TallCell<T>[] | ShortCell<T>[]
: ShortCell<T>[];
Changing the TallCell<T>[]
to TallCell<T>
or pretty much anything else makes the error go away. Not sure why that is.