Ensuring Proper Typing for Conditional Arrays in Typescript: A Guide

Question

Ensuring Proper Typing for Conditional Arrays in Typescript: A Guide

I struggled to find a satisfactory way to define arrays with conditional elements, despite the various methods discussed here. As a result, I decided to simplify the declaration process by creating a helper function. While the helper function itself is straightforward in vanilla JavaScript, I encountered challenges when trying to incorporate generics.

JavaScript version

const nin = Symbol('nin')

const includeIf = (condition, item) =>
    (typeof condition === "function" ? condition(item) : condition) ? item : nin

const conditionalArray = (init) =>
    init(includeIf).filter(item => item !== nin)

/* USAGE */

const cond = false

// should equal ['foo', 'bar', 'qux'] and have type string[]
const arr1 = conditionalArray(addIf => [
    'foo',
    'bar',
    addIf(cond, 'baz'),
    addIf(word => word.length < 10, 'qux')
])

// should equal [{ name: 'Alice', age: 23 }] and have type { name: string, age: number }[]
const arr2 = conditionalArray(addIf => [
    { name: 'Alice', age: 23 },
    addIf(false, { name: 'Bob', age: 34 }),
    addIf(person => person.age > 18, { name: 'Charlie', age: 5 })
])

Updated TypeScript Version with assistance from jcalz

type Narrowable = string | number | boolean | undefined | null | void | {};

const nin = Symbol('nin')

type AddIf = <T, U>(condition: ((x: T) => boolean) | boolean, itemIfTrue: T, itemIfFalse?: U | typeof nin) => T | U | typeof nin
const addIf: AddIf = (condition, itemIfTrue, itemIfFalse = nin) => {
    return (typeof condition === "function" ? condition(itemIfTrue) : condition) ? itemIfTrue : itemIfFalse
}

const conditionalArray = <T extends Narrowable>(init: (addIf: AddIf) => Array<T | typeof nin>) =>
    init(addIf).filter((item): item is T => item !== nin)

typescript

Answer 1

Answer №1

Here is the current solution I've come up with:

const nin = Symbol('nin')

// Function to include an item in array based on condition
const includeIf = <T>(condition: boolean | ((x: T) => boolean), item: T) =>
    (typeof condition === "function" ? condition(item) : condition) ? item : nin

// Define the function signature for initialization
type Init<T> = (cb:
    (condition: boolean | ((x: T) => boolean), item: T) => T | typeof nin
) => (T | typeof nin)[]

// Accepts an Init<T>, returns a filtered array of type T[]
export const conditionalArray = <T>(init: Init<T>) =>
    init(includeIf).filter((item: T | typeof nin): item is T => item !== nin)


const cond = true    
declare function generateWord(): string

// Manually specify <string> because inference doesn't work as expected
const arr = conditionalArray<string>(addIf => [
    "foo",
    "bar",
    addIf(cond, "baz"),
    addIf(word => word.length < 10, generateWord())
]);

The typings are correct, but the compiler struggles to infer T from Init<T>. It seems that the nested types are causing confusion. Instead of just calling

conditionalArray(addIf => ...)

, you have to call

conditionalArray<string>(addIf => ...)

to avoid errors and incorrect output types.

I hope this explanation helps resolve any issues you may encounter.

Update: By making the type of init only generic in its return value type, the compiler can now infer properly. Here is the revised code:

const nin = Symbol('nin')

type IncludeIf = typeof includeIf
const includeIf = <T>(condition: ((x: T) => boolean) | boolean, item: T): T | typeof nin => {
    return (typeof condition === "function" ? condition(item) : condition) ? item : nin
}

const conditionalArray = <T>(init: (includeIf: IncludeIf) => Array<T | typeof nin>) =>
    init(includeIf).filter((item): item is T => item !== nin)

If you have any more concerns or questions, please let me know.

Your next issue:

const arr2 = conditionalArray((addIf) => [
  1, 2, 3, addIf(true, 4), addIf(false, '5'), addIf(false, { foo: true })
]); // Array<number | "5" | {foo: boolean}>

Consider whether it's necessary for the compiler to recognize literal values like false in conditions. Real-world scenarios may not require this level of specificity. If needed, utilizing conditional types can address such situations.

UPDATE 2:

To maintain narrow element types in all cases, consider using a Narrowable type constraint:

type Narrowable = string | number | boolean | undefined | null | void | {};

const conditionalArray = <T extends Narrowable>(
    init: (includeIf: IncludeIf) => Array<T | typeof nin>
) => init(includeIf).filter((item): item is T => item !== nin)

const arr1 = conditionalArray(addIf => [1, "a"]);

This approach provides clarity and precision in defining array types with minimal complexity.

Good luck with your implementation! Feel free to reach out if you need further assistance.

Answer 2

Here is the current solution I've come up with:

const nin = Symbol('nin')

// Function to include an item in array based on condition
const includeIf = <T>(condition: boolean | ((x: T) => boolean), item: T) =>
    (typeof condition === "function" ? condition(item) : condition) ? item : nin

// Define the function signature for initialization
type Init<T> = (cb:
    (condition: boolean | ((x: T) => boolean), item: T) => T | typeof nin
) => (T | typeof nin)[]

// Accepts an Init<T>, returns a filtered array of type T[]
export const conditionalArray = <T>(init: Init<T>) =>
    init(includeIf).filter((item: T | typeof nin): item is T => item !== nin)


const cond = true    
declare function generateWord(): string

// Manually specify <string> because inference doesn't work as expected
const arr = conditionalArray<string>(addIf => [
    "foo",
    "bar",
    addIf(cond, "baz"),
    addIf(word => word.length < 10, generateWord())
]);

The typings are correct, but the compiler struggles to infer T from Init<T>. It seems that the nested types are causing confusion. Instead of just calling

conditionalArray(addIf => ...)

, you have to call

conditionalArray<string>(addIf => ...)

to avoid errors and incorrect output types.

I hope this explanation helps resolve any issues you may encounter.

Update: By making the type of init only generic in its return value type, the compiler can now infer properly. Here is the revised code:

const nin = Symbol('nin')

type IncludeIf = typeof includeIf
const includeIf = <T>(condition: ((x: T) => boolean) | boolean, item: T): T | typeof nin => {
    return (typeof condition === "function" ? condition(item) : condition) ? item : nin
}

const conditionalArray = <T>(init: (includeIf: IncludeIf) => Array<T | typeof nin>) =>
    init(includeIf).filter((item): item is T => item !== nin)

If you have any more concerns or questions, please let me know.

Your next issue:

const arr2 = conditionalArray((addIf) => [
  1, 2, 3, addIf(true, 4), addIf(false, '5'), addIf(false, { foo: true })
]); // Array<number | "5" | {foo: boolean}>

Consider whether it's necessary for the compiler to recognize literal values like false in conditions. Real-world scenarios may not require this level of specificity. If needed, utilizing conditional types can address such situations.

UPDATE 2:

To maintain narrow element types in all cases, consider using a Narrowable type constraint:

type Narrowable = string | number | boolean | undefined | null | void | {};

const conditionalArray = <T extends Narrowable>(
    init: (includeIf: IncludeIf) => Array<T | typeof nin>
) => init(includeIf).filter((item): item is T => item !== nin)

const arr1 = conditionalArray(addIf => [1, "a"]);

This approach provides clarity and precision in defining array types with minimal complexity.

Good luck with your implementation! Feel free to reach out if you need further assistance.

Answer 3

Answer №2

A potential TypeScript solution without export/import modules

const placeholder = Symbol('placeholder')

type determineIfIncludeFunc = (criteria: boolean | ((item: string) => boolean), item: string) => Symbol | string;
type addIfCriteriaFunc = (addIfCriteriaFunc: determineIfIncludeFunc) => (Symbol | string)[];
type conditionalArrayFunction = (init: addIfCriteriaFunc) => (Symbol | string)[];

const determineIfInclude: determineIfIncludeFunc = (criteria: boolean | ((item: string) => boolean), item: string): Symbol | string =>
    (typeof criteria === "function" ? criteria(item) : criteria) ? item : placeholder

const conditionalArray: conditionalArrayFunction = (init: addIfCriteriaFunc) =>
    init(determineIfInclude).filter(item => item !== placeholder)

const condition = true

const arrayResult = conditionalArray(addIf =>
    [
        "foo",
        "bar",
        addIf(condition, "baz"),
        addIf(word => word.length < 10, "generateWord")
    ]
)

Answer 4

A potential TypeScript solution without export/import modules

const placeholder = Symbol('placeholder')

type determineIfIncludeFunc = (criteria: boolean | ((item: string) => boolean), item: string) => Symbol | string;
type addIfCriteriaFunc = (addIfCriteriaFunc: determineIfIncludeFunc) => (Symbol | string)[];
type conditionalArrayFunction = (init: addIfCriteriaFunc) => (Symbol | string)[];

const determineIfInclude: determineIfIncludeFunc = (criteria: boolean | ((item: string) => boolean), item: string): Symbol | string =>
    (typeof criteria === "function" ? criteria(item) : criteria) ? item : placeholder

const conditionalArray: conditionalArrayFunction = (init: addIfCriteriaFunc) =>
    init(determineIfInclude).filter(item => item !== placeholder)

const condition = true

const arrayResult = conditionalArray(addIf =>
    [
        "foo",
        "bar",
        addIf(condition, "baz"),
        addIf(word => word.length < 10, "generateWord")
    ]
)

Ensuring Proper Typing for Conditional Arrays in Typescript: A Guide

Answer №1

Answer №2

Similar questions

What is the best way to include multiple targets/executables within a single Node.js repository?

Mastering Interpolation in React with TypeScript is essential for creating dynamic and interactive UI components. By leveraging the

What is preventing Apollo from achieving full transformation?

What is the best way to utilize v-model with an array of strings in a Vuex store when using v-for

What is the recommended data type for Material UI Icons when being passed as props?

Issue with binding nested ViewModels/components in Knockoutjs using TypeScript does not resolve

Is it possible to update the text within a button when hovering over it in Angular?

tRPC asynchronous mutation does not have a return value

Tips for distinguishing a mapped type using Pick from the original type when every property is optional

Is it possible to set up TypeScript npm packages to be installed in their original TypeScript format rather than JavaScript for the purpose of examining the source code?

What sets typescript apart when using a getter versus a regular function?

Retrieving data from a JSON using Typescript and Angular 2

Can the type of a prop be specified in the parent component before it is passed down to the children components that utilize the same prop?

Sundays and last days are excluding React-big-calendar and dayjs longer events from being displayed

Can you explain the distinction between any[] and [] in TypeScript?

What method is most effective for combining two JSON files in Angular?

Build problems are occurring in the EC2 build box, but they do not arise when building locally

The Rxjs `of` operator fails to emit a value when utilizing proxies

Unable to loop through the "dataList" retrieved from a service call to the java backend within an Angular 9 application

Efficiently Measuring the Visibility Area of DetailsList in Fluent UI