When utilizing TS Union Types from an Array, the resulting type will consistently be a

Question

When utilizing TS Union Types from an Array, the resulting type will consistently be a

After reading this response, I decided to create some union types from a string[] in order to return a list of valid type values. However, instead of that, the type ends up accepting any string value.

const arrayDays = Array.from(Array(32).keys(), (num) =>
  num.toString().padStart(2, '0'),
)
const listDays = [...arrayDays.splice(1)] as const
type Day = (typeof listDays)[number]

I initially expected that the type Day would be something like

type Days = '01' | '02' .... | '30' | '31'

, but its actual type is string

https://i.stack.imgur.com/iNrPl.png

As a result, when using the Day type in a variable, it accepts any string value.

const day1: Day = '' //does not show an error
const day2: Dat = 'y' //does not show an error

typescript union-types

Answer 1

Answer №1

There is a common misunderstanding that types only exist at compile time, leading to the inference of string[] for arrayDays. The compiler cannot determine the type based on runtime values.

To generate a union from your array, you must preserve the information at compile time. Taking inspiration from @jcalz's answer (), I created a Day type that dynamically creates a union similar to your array assigned to arrayDays.

type LessThan<
  N extends number,
  A extends any[] = []
> = N extends A["length"]
  ? A[number]
  : LessThan<N, [...A, A["length"]]>;

type Day<
  F extends number = 0,
  T extends number = 31,
  R extends number = Exclude<T | LessThan<T>, LessThan<F>>
> = R extends LessThan<10> ? `0${R}` : `${R}`;

const day1: Day = "-1"; // invalid
const day2: Day = "3"; // invalid
const day3: Day = "03"; // valid
const day4: Day = "32"; // invalid

Check it out on TypeScript Playground

Answer 2

There is a common misunderstanding that types only exist at compile time, leading to the inference of string[] for arrayDays. The compiler cannot determine the type based on runtime values.

To generate a union from your array, you must preserve the information at compile time. Taking inspiration from @jcalz's answer (), I created a Day type that dynamically creates a union similar to your array assigned to arrayDays.

type LessThan<
  N extends number,
  A extends any[] = []
> = N extends A["length"]
  ? A[number]
  : LessThan<N, [...A, A["length"]]>;

type Day<
  F extends number = 0,
  T extends number = 31,
  R extends number = Exclude<T | LessThan<T>, LessThan<F>>
> = R extends LessThan<10> ? `0${R}` : `${R}`;

const day1: Day = "-1"; // invalid
const day2: Day = "3"; // invalid
const day3: Day = "03"; // valid
const day4: Day = "32"; // invalid

Check it out on TypeScript Playground

When utilizing TS Union Types from an Array, the resulting type will consistently be a

Answer №1

Similar questions

To run multiple environments with react-native-dotenv in a React Native project using Typescript, only the local environment is activated

Having trouble retrieving cookie in route.ts with NextJS

Showing json information in input area using Angular 10

Embedding images using a blob or base64 format does not function properly on iOS devices

Is there a way to access and troubleshoot the complete source code within .vue files?

Discovering the bottom scroll position in an Angular application

Transforming button click from EventEmitter to RXJS observable

What is the method for defining functions that accept two different object types in Typescript?

What is the best way to populate an Angular variable in Ionic following a subscription?

Assign a dynamic class to an element within an ngFor iteration

Using MatTableDataSource in a different Angular component

Guide to inheriting functions from a parent component in Angular 2

Just change "this.array[0]..." in the TypeScript code

Error: Bootstrap CSS missing from app created with create-react-app-ts

Encountering difficulty in retrieving the outcome of the initial HTTP request while utilizing the switchMap function in RxJS

The specified type does not meet the constraint as it lacks the required index signature

Why am I unable to retrieve the property from the JSON file?

Using React Native to dynamically change color based on API response

does not have any exported directive named 'MD_XXX_DIRECTIVES'

Encountering an issue while trying to integrate custom commands using the addCommand function in WebDriverIO