Typescript - Using generics to extend an interface with a property of union type

Question

I have an interface like this

interface Test {
  values: string[] | number[] | Date[]
  // more properties
}

I would like to create another interface that makes the type specific. What I am trying is:

interface TestWithType<T extends string | number | Date> extends Test {
  values: T[];
}

But this fails with an error saying Type 'string' is not assignable to type 'Date'.

What is the correct syntax for this? If property values was not an array, this would work fine

interface Test {
  values: string | number | Date
}

interface TestWithType<T extends string | number | Date> extends Test {
  values: T;
}

Check this https://stackoverflow.com/questions/29794014/typing-an-array-with-a-union-type-in-typescript — , Sep 14 '18 at 19:45
Now I understand why this is not compiling (the generic constraint would allow me to give the array values of different types). Still not sure how to make it specific — Alberto Rivera, Sep 14 '18 at 20:29

jcalz · Accepted Answer · 2018-09-15T01:09:00.957

@MattMcCutchen's answer gives some ways to deal with this. Here's another way:

If you have a union like string | number | Date and want to programmatically turn it into a union of arrays like string[] | number[] | Date[], you can use distributive conditional types:

type DistributeArray<T> = T extends any ? T[] : never;

Then you can define TestWithType in terms of DistributeArray:

// no error:
interface TestWithType<T extends string | number | Date> extends Test {
  values: DistributeArray<T>;
}

And verify that it behaves as you expect:

declare const testWithString: TestWithType<string>
testWithString.values; // string[]

declare const testWithDate: TestWithType<Date>
testWithDate.values; // Date[]

declare const testWithStringOrNumber: TestWithType<string | number>
testWithStringOrNumber.values; // string[] | number[]

Hope that helps. Good luck!

EDIT:

As a related question, is there any way to forbid passing an union type to the generic? (As in requiring to only specify at most one of string, number or date)

Yeah, that's possible, but it requires abusing the type system in a way that makes me uncomfortable. I'd suggest not doing that if you don't need to. Here it is:

type DistributeArray<T> = T extends any ? T[] : never;
type NotAUnion<T> = [T] extends [infer U] ? U extends any ? 
  T extends U ? unknown : never : never : never
type ErrorMsg = "NO UNIONS ALLOWED, PAL"
interface TestWithType<T extends (
  unknown extends NotAUnion<T> ? string | number | Date : ErrorMsg
)> extends Test {
  values: DistributeArray<T>
}

declare const testWithString: TestWithType<string> // okay

declare const testWithDate: TestWithType<Date> // okay

declare const testWithStringOrNumber: TestWithType<string | number> // error:
// 'string | number' does not satisfy the constraint '"NO UNIONS ALLOWED, PAL"'.

The type NotAUnion<T> evaluates to unknown (a top type) if T is not a union... otherwise it evaluates to never (a bottom type). Then, in TestWithType the type T is constrained to unknown extends NotAUnion<T> ? string | number | Date : ErrorMsg, barely skirting the rules against circular references. If you pass a non-union as T, it becomes T extends string | number | Date as before. If you pass a union, it becomes T extends ErrorMsg, a string literal type. Since a union will never extend a string literal, it will fail... And the error message you get will involve ErrorMsg, so it should hopefully be enough for a developer to realize what's happening. It works, but it's very very sketchy stuff. You asked for it, though.

Good luck again!

Great, this solves my problem. As a related question, is there any way to forbid passing an union type to the generic? (As in requiring to only specify at most one of string, number or date). — Alberto Rivera, Sep 15 '18 at 00:19

score 1 · Answer 2 · answered Sep 14 '18 at 21:09

Two possible solutions, using lookup types or conditional types:

enum TestType { STRING, NUMBER, DATE }
interface TestTypeMapping {
  [TestType.STRING]: string[];
  [TestType.NUMBER]: number[];
  [TestType.DATE]: Date[];
}
interface TestWithType1<T extends TestType> extends Test {
  values: TestTypeMapping[T];
}

type TypeToArrayType<T> =
  T extends string ? string[] :
  T extends number ? number[] :
  T extends Date ? Date[] :
  never[];
interface TestWithType2<T extends string | number | Date> extends Test {
  values: TypeToArrayType<T>;
}

Typescript - Using generics to extend an interface with a property of union type

2 Answers2