Converting Typescript Object Types to Array Types with Tuple Structures

Question

Converting Typescript Object Types to Array Types with Tuple Structures

Presently, I have the following:

interface Obj {
    foo: string,
    bar: number,
    baz: boolean
}

The desired outcome is to convert this interface into the tuple format below:

[string, number, boolean]

Is there a way to achieve this conversion?

Update:

I am encountering an issue with my current project: I am developing a library that follows a declarative approach, where users need to specify function parameters in an object literal. For example:

let paramsDeclaration = {
  param1: {
    value: REQUIRED<string>(),
    shape: (v) => typeof v === 'string' && v.length < 10
  },
  param2: {
    value: OPTIONAL<number>(),
    ...
  },
}

Subsequently, the library takes this object and generates a function with parameters based on it:

   (param1: string, param2?: number) => ...

Hence, creating such a function is not the main concern; rather, accurately typing it so that users can benefit from effective code completion (IntelliSense).

P.S. While I understand this may not be fully solvable, I am curious to explore potential workarounds or hacks.

typescript tuples

Answer 1

Answer №1

Most of the time when you encounter a problem that seems impossible in Typescript, it's actually doable but not recommended.

I found a solution using TuplifyUnion mentioned in this post. This function converts a union type into a tuple type by starting with a union of the keys of an object, rather than its values, as values could also be unions like true | false.

If you want users to specify parameters for a function generated by your API, it's better to accept those specifications in an array from the beginning. Check out the linked answer for more insights on the // oh boy don't do this comment.

type ObjValueTuple<T, KS extends any[] = TuplifyUnion<keyof T>, R extends any[] = []> =
  KS extends [infer K, ...infer KT]
  ? ObjValueTuple<T, KT, [...R, T[K & keyof T]]>
  : R

// type Test = [string, number, boolean]
type Test = ObjValueTuple<Obj>

Check out the Playground Link

Answer 2

Most of the time when you encounter a problem that seems impossible in Typescript, it's actually doable but not recommended.

I found a solution using TuplifyUnion mentioned in this post. This function converts a union type into a tuple type by starting with a union of the keys of an object, rather than its values, as values could also be unions like true | false.

If you want users to specify parameters for a function generated by your API, it's better to accept those specifications in an array from the beginning. Check out the linked answer for more insights on the // oh boy don't do this comment.

type ObjValueTuple<T, KS extends any[] = TuplifyUnion<keyof T>, R extends any[] = []> =
  KS extends [infer K, ...infer KT]
  ? ObjValueTuple<T, KT, [...R, T[K & keyof T]]>
  : R

// type Test = [string, number, boolean]
type Test = ObjValueTuple<Obj>

Check out the Playground Link

Answer 3

Answer №2

Although this may not directly address the original question, I want to offer some insights that could potentially be useful:

function MANDATORY<T>(): T {
    //...
}
function OPTIONAL<T>(): T {
    //...
}

interface ParametersDefinition {
    readonly [paramName: string]: {
        readonly value: any;
        readonly shape?: Function;
    };
}

type CustomFunction<T> = T extends {
    readonly [paramName: string]: {
        readonly value: infer U;
    };
} ? (...params: Array<U>) => void
    : never;

function generateFunction<T extends ParametersDefinition>(paramsDefinition: T): CustomFunction<T> {

    // ...
}

const definitionsOfParams = {
    parameter1: {
        value: MANDATORY<string>(),
        shape: (v: any) => typeof v === 'string' && v.length < 10
    },
    parameter2: {
        value: OPTIONAL<number>(),
        //...
    },
};
// The type is '(...params: (string | number)[]) => void'
const customFunc = generateFunction(definitionsOfParams);
customFunc('1', 2); // Okay
customFunc(2, '1'); // Also okay, but probably not intended
customFunc(Symbol()); // TypeScript error

Answer 4

Although this may not directly address the original question, I want to offer some insights that could potentially be useful:

function MANDATORY<T>(): T {
    //...
}
function OPTIONAL<T>(): T {
    //...
}

interface ParametersDefinition {
    readonly [paramName: string]: {
        readonly value: any;
        readonly shape?: Function;
    };
}

type CustomFunction<T> = T extends {
    readonly [paramName: string]: {
        readonly value: infer U;
    };
} ? (...params: Array<U>) => void
    : never;

function generateFunction<T extends ParametersDefinition>(paramsDefinition: T): CustomFunction<T> {

    // ...
}

const definitionsOfParams = {
    parameter1: {
        value: MANDATORY<string>(),
        shape: (v: any) => typeof v === 'string' && v.length < 10
    },
    parameter2: {
        value: OPTIONAL<number>(),
        //...
    },
};
// The type is '(...params: (string | number)[]) => void'
const customFunc = generateFunction(definitionsOfParams);
customFunc('1', 2); // Okay
customFunc(2, '1'); // Also okay, but probably not intended
customFunc(Symbol()); // TypeScript error

Answer 5

Answer №3

Here are some different suggestions,
The parameters need to be ordered in a specific way.

interface Param {
    readonly value: any;
    readonly shape?: Function;
}
type OrderedFunction<T extends Record<string, Param>, orders extends (keyof T)[]> = (...args:{
    [key in keyof orders]:orders[key] extends keyof T ? T[orders[key]]['value']: orders[key];
})=>void;

function generateFunction<T extends Record<string, Param>, ORDERS extends (keyof T)[]>(params: T, ...orders:ORDERS): OrderedFunction<T, ORDERS> {
    return 0 as any;
}

const customFunc1 = generateFunction({a:{value:0}, b:{value:''}, c:{value:true}}, 'a', 'b', 'c');
customFunc1(0, '1', true); // works
customFunc1(true, 0, '1'); // gives an error

or
Parameter Declarations with array

type ArrayFunction<T extends Param[]> = (...args:{
    [key in keyof T]:T[key] extends Param ? T[key]['value'] : T[key]
})=>void;

function generateArrayFunction<T extends Param[], ORDERS extends (keyof T)[]>(...params: T): ArrayFunction<T> {
    return 0 as any;
}

const customFunc2 = generateArrayFunction({value:0}, {value:''}, {value:true});
customFunc2(0, '1', true); // works
customFunc2(true, 0, '1'); // gives an error

Answer 6

Here are some different suggestions,
The parameters need to be ordered in a specific way.

interface Param {
    readonly value: any;
    readonly shape?: Function;
}
type OrderedFunction<T extends Record<string, Param>, orders extends (keyof T)[]> = (...args:{
    [key in keyof orders]:orders[key] extends keyof T ? T[orders[key]]['value']: orders[key];
})=>void;

function generateFunction<T extends Record<string, Param>, ORDERS extends (keyof T)[]>(params: T, ...orders:ORDERS): OrderedFunction<T, ORDERS> {
    return 0 as any;
}

const customFunc1 = generateFunction({a:{value:0}, b:{value:''}, c:{value:true}}, 'a', 'b', 'c');
customFunc1(0, '1', true); // works
customFunc1(true, 0, '1'); // gives an error

or
Parameter Declarations with array

type ArrayFunction<T extends Param[]> = (...args:{
    [key in keyof T]:T[key] extends Param ? T[key]['value'] : T[key]
})=>void;

function generateArrayFunction<T extends Param[], ORDERS extends (keyof T)[]>(...params: T): ArrayFunction<T> {
    return 0 as any;
}

const customFunc2 = generateArrayFunction({value:0}, {value:''}, {value:true});
customFunc2(0, '1', true); // works
customFunc2(true, 0, '1'); // gives an error

Answer 7

Answer №4

It appears that the general agreement is that it is currently not possible, but I wanted to give it a shot anyway. Because objects do not preserve key order, ordering cannot be guaranteed.

solution

export type Partition<T> = UnionToTuple<
  { [K in keyof T]: { [k in K]: T[K] } }[keyof T]
>

helpers

type Pack<T> = T extends any ? (arg: T) => void : never
type Unpack<T> = [T] extends [(arg: infer I) => void] ? I : never
type Into<T> = Unpack<Unpack<Pack<Pack<T>>>>

type UnionToTuple<T> = Into<T> extends infer U
  ? Exclude<T, U> extends never
    ? [T]
    : [...UnionToTuple<Exclude<T, U>>, U]
  : never

example

type Data = { a0: 'foo'; b0: { b1: 'bar' } }

type Mock = Partition<Data>

[
  { a0: 'foo'; },
  { b0: { b1: 'bar'; }; }
]

Answer 8

It appears that the general agreement is that it is currently not possible, but I wanted to give it a shot anyway. Because objects do not preserve key order, ordering cannot be guaranteed.

solution

export type Partition<T> = UnionToTuple<
  { [K in keyof T]: { [k in K]: T[K] } }[keyof T]
>

helpers

type Pack<T> = T extends any ? (arg: T) => void : never
type Unpack<T> = [T] extends [(arg: infer I) => void] ? I : never
type Into<T> = Unpack<Unpack<Pack<Pack<T>>>>

type UnionToTuple<T> = Into<T> extends infer U
  ? Exclude<T, U> extends never
    ? [T]
    : [...UnionToTuple<Exclude<T, U>>, U]
  : never

example

type Data = { a0: 'foo'; b0: { b1: 'bar' } }

type Mock = Partition<Data>

[
  { a0: 'foo'; },
  { b0: { b1: 'bar'; }; }
]

Converting Typescript Object Types to Array Types with Tuple Structures

Answer №1

Answer №2

Answer №3

Answer №4

solution

helpers

example

Similar questions

Navigating the world of TypeScript and SystemJS without the confines of Angular

CreatePortalLink directs users to a payment URL instead of a dashboard

What are the best ways to troubleshoot my Angular 2 project?

Show dynamic JSON data in a nested format on the user interface with Aurelia's Treeview component

Solving the problem of cookieParser implementation in NestJS

Translate Typescript into Javascript for use in React applications

What is the proper way to type the SubmitEvent so that the event.target.children property can be accessed

What is the best way to update this payload object?

Angular log out function to automatically close pop-up windows

Angular2 and ReactiveX: Innovative Pagination Strategies

Angular 2 event emitter falling behind schedule

Is there a way to effectively eliminate an array of objects in JavaScript or TypeScript and alter the object structure simultaneously?

The useAutocomplete function in Material-UI fails to consider the disabled

How can I display the top 5 data results after subscribing in Nativescript?

JavaScript's Blob to Base64 conversion using FileReader is failing to produce any output

Embracing Interfaces Over 'any' Types in TypeScript

typescript persist zustand: typing your store

Utilizing React Typescript to Efficiently Manage Multiple Checkboxes within a List

Display a single unique value in the dropdown menu when there are duplicate options

Create a class with additional attributes to support different types of options