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

"Error: The update depth has exceeded the limit while trying to use the

Please explain the purpose of the httponly ss-tok bearerToken cookie in ServiceStack Authentication

Modifying the response header in a node.js middleware: A step-by-step guide

Pattern matching to exclude specific characters

How can I prevent the enter key from working with Twitter Typeahead?

Developing React components with Typescript requires careful consideration when defining component props, especially when the component may be

It's possible that the "device.interfaces" variable has not been defined

What are the TypeScript types needed for a React component that accepts an array of objects as a prop?

The test session failed to launch due to an error in initializing the "@wdio/cucumber-framework" module. Error message: [ERR_PACKAGE_PATH_NOT_EXPORTED]

Adding strings in Typescript

What steps should I take to enable users of my library to customize component templates as needed?

Obtain the precise Discriminated conditional unions type in the iterator function with Typescript

Using React-Router-Native to send an image as a parameter

Encountering challenges while transitioning from ngrx version 2 to version 4, specifically related to typing in array de-structuring

Enable the Angular button only when the radio button has been selected

The CSS root variable is failing to have an impact on the HTML element's value

Unable to show the input's value

Encountering a challenge when upgrading to eslint version 9.0.0

Disabling the experimental app directory feature in NextJs

Maintain the spacing of an element when utilizing *ngFor