Form a combination of distinct elements from an array of unique types in typescript

Question

Form a combination of distinct elements from an array of unique types in typescript

I am wondering if it is possible to define an array of unique types based on a union of those types.

Let's say I have the following type Value:

type Value = string | number

Then, I attempted to create a type called Values like this:

type Values = Value[]

However, this results in a type:

type Values = (string|number)[]

Is there a way for me to achieve something like this, based on the Value type?

type Values = string[] | number[]

This is because I need to render checkboxes for table filters in my function. These checkboxes will always have either a string or a number as their value.

When you click on a checkbox, it adds that value to an array. For instance, if you are filtering by the column firstName and add two names to the filter, it would result in an array of strings or an array of numbers, represented by the type Values: string[] | number[].

So, is there a way to derive the Values type from the Value type?

I have set up a sample sandbox for comparing these types. Any insights would be greatly appreciated!

arrays typescript types

Answer 1

Answer №1

These solutions are not meeting my expectations. In the first scenario, I have to be specific about the type of element I anticipate in the array. In the second case, I find myself listing all array types I'm interested in (which defeats the purpose of avoiding it in the first place! Moreover, I require the array types, not just a matter of personal preference)

However, after experimenting a bit, I came up with a solution that works for me. Upon revisiting the documentation, I noticed they actually use this exact issue as an illustration...

type ValueTypes = string | number
type ToArray<Type> = Type extends any ? Type[] : never;

const a1: ToArray<ValueTypes> = ['a','b'] // okay
const a2: ToArray<ValueTypes> = [1, 2]    // okay
const a3: ToArray<ValueTypes> = ['a', 2]  // error (i.e. success)

Answer 2

These solutions are not meeting my expectations. In the first scenario, I have to be specific about the type of element I anticipate in the array. In the second case, I find myself listing all array types I'm interested in (which defeats the purpose of avoiding it in the first place! Moreover, I require the array types, not just a matter of personal preference)

However, after experimenting a bit, I came up with a solution that works for me. Upon revisiting the documentation, I noticed they actually use this exact issue as an illustration...

type ValueTypes = string | number
type ToArray<Type> = Type extends any ? Type[] : never;

const a1: ToArray<ValueTypes> = ['a','b'] // okay
const a2: ToArray<ValueTypes> = [1, 2]    // okay
const a3: ToArray<ValueTypes> = ['a', 2]  // error (i.e. success)

Answer 3

Answer №2

If I had to make a choice, I would opt for using restricted templating.

type Values<T extends string | number> = T[];

const myArr: Values<string> = [
    'foo',
    'bar',
];

const myArr2: Values<number> = [
    1,
    2,
];

Alternatively, one could utilize overloaded types (let TypeScript determine the type based on the array content)

type ValueTypeA = string[];
type ValueTypeB = number[];

type Values = ValueTypeA | ValueTypeB;

const myArr: Values = [
    'foo',
    'bar',
];

const myArr2: Values = [
    1,
    2,
];

Answer 4

If I had to make a choice, I would opt for using restricted templating.

type Values<T extends string | number> = T[];

const myArr: Values<string> = [
    'foo',
    'bar',
];

const myArr2: Values<number> = [
    1,
    2,
];

Alternatively, one could utilize overloaded types (let TypeScript determine the type based on the array content)

type ValueTypeA = string[];
type ValueTypeB = number[];

type Values = ValueTypeA | ValueTypeB;

const myArr: Values = [
    'foo',
    'bar',
];

const myArr2: Values = [
    1,
    2,
];

Form a combination of distinct elements from an array of unique types in typescript

Answer №1

Answer №2

Similar questions

How to retrieve a randomly selected subset from a MongoDB database using Express

What is the function of the Angular dependency injection mechanism?

Ensure that the JSON file containing translations is fully loaded prior to proceeding with the loading of the Angular application

"Utilizing an exported constant from a TypeScript file in a JavaScript file: A step-by-step guide

Learn how to retrieve the return data from two combined objects using Angular's TypeScript syntax

Is it true that loading "undefined" into an array can use up a significant amount of memory?

Ways to resolve the issue of npm being unable to globally install typescript

Vitek - Uncaught ReferenceError: Document Is Not Defined

Obtaining the time taken for code execution in Typescript by capturing console.timeEnd() as

Finding the percentage scores for five different subjects among a class

Utilizing ES6 Map Reduce to flatten an array with mapping and padding, sourced from the Redux state

Tips for sending multiple post parameters to a web API in Angular using TypeScript

Get an angular xml file by utilizing the response from a C# web API download

Search through an array of objects and assign a new value

"Failure encountered when attempting to update a dictionary using a specific key, despite the key

Removing characters from a string in the C programming language

An error is thrown when attempting to call an Array

What exactly does the question mark represent in the code structure as indicated in VSCode?

Elements are failing to update properly due to unforeseen issues

What is the best way to search for a specific item in Express.js?