Can one utilize generic parameter value within a conditional type result field in Typescript?

Question

Can one utilize generic parameter value within a conditional type result field in Typescript?

Trying to create a versatile function type for data transformation can be a bit tricky. When dealing with a single object, it's straightforward:

export type SingleObjFunction<InputDataType, OutputDataType> =
  (object: InputDataType) => OutputDataType;

However, when working with an array of objects, I want the function to return either an object with a field: OutputDataType[] property inside, or just a plain array. Is it possible to achieve this flexibility by using another generic parameter like so:

export type MultipleObjFunction<
  InputDataType, 
  OutputDataType, 
  InnerField extends (string | undefined), 
  FunctionResult = InnerField extends string
    ? { [Key in InnerField]: OutputDataType[] }
    : OutputDataType[]
> = (objs: InputDataType[]) => FunctionResult

I am aware that there is no direct equivalent to valueof, but perhaps there is an alternative approach?

typescript generics

Answer 1

Answer №1

To create the type parameter FunctionResult for your function, you can leverage a mix of default type parameters and conditional types. This approach allows the compiler to determine the return type based on the resolved type of the InnerField parameter.

If the resolved type of InnerField is assignable to string, the function will return an object type

Record<InnerField, OutputDataType[]>

. Otherwise, it will return an array type OutputDataType[].

For further exploration and testing, check out this TS Playground link.

type MultipleObjFunction<
  InputDataType, 
  OutputDataType, 
  InnerField extends (string | undefined) = undefined,
  FunctionResult = InnerField extends string
    ? Record<InnerField, OutputDataType[]>
    : OutputDataType[]
> = (objs: InputDataType[]) => FunctionResult;

type In = {
  str: string;
  num: number;
};

type Out = { result: string };

declare const arg: In;

declare const f1: MultipleObjFunction<In, Out>;
const r1 = f1([arg]);
    //^? const r1: Out[]

declare const f2: MultipleObjFunction<In, Out, 'myPropertyName'>;
const r2 = f2([arg]);
    //^? const r2: Record<"myPropertyName", Out[]>
type R2Key = keyof typeof r2;
   //^? type R2Key = "myPropertyName"
r2.myPropertyName
 //^? (property) myPropertyName: Out[]

Answer 2

To create the type parameter FunctionResult for your function, you can leverage a mix of default type parameters and conditional types. This approach allows the compiler to determine the return type based on the resolved type of the InnerField parameter.

If the resolved type of InnerField is assignable to string, the function will return an object type

Record<InnerField, OutputDataType[]>

. Otherwise, it will return an array type OutputDataType[].

For further exploration and testing, check out this TS Playground link.

type MultipleObjFunction<
  InputDataType, 
  OutputDataType, 
  InnerField extends (string | undefined) = undefined,
  FunctionResult = InnerField extends string
    ? Record<InnerField, OutputDataType[]>
    : OutputDataType[]
> = (objs: InputDataType[]) => FunctionResult;

type In = {
  str: string;
  num: number;
};

type Out = { result: string };

declare const arg: In;

declare const f1: MultipleObjFunction<In, Out>;
const r1 = f1([arg]);
    //^? const r1: Out[]

declare const f2: MultipleObjFunction<In, Out, 'myPropertyName'>;
const r2 = f2([arg]);
    //^? const r2: Record<"myPropertyName", Out[]>
type R2Key = keyof typeof r2;
   //^? type R2Key = "myPropertyName"
r2.myPropertyName
 //^? (property) myPropertyName: Out[]

Can one utilize generic parameter value within a conditional type result field in Typescript?

Answer №1

Similar questions

Creating a React Typescript interface with nested interfaces for props

How to define a TypeScript recursive object with a defined endpoint?

Issue with TranslateModule Configuration malfunctioning

Validating mixed types and generics within an array using Typescript's type checking

"Implementing a unique constraint in Drizzle-orm PostgreSQL with the additional condition of deleted_at being

How can we efficiently load paginated data from a database while still implementing pagination using Angular Material?

Get the download URL from Firebase Storage and save it into an array within Firestore

Encountering issues with Proxy functionality in the latest versions of Angular 13 and Spring Boot

Incorporating Google Pay functionality within Angular applications

TypeScript interface with an optional parameter that is treated as a required parameter

Exploring the functionality of Material components within a nested child component

ESLint and Prettier are butting heads when trying to run their commands consecutively

Using Node.js and Typescript to implement a chain of logical AND operations with an array of any length

Encountering a 404 error when importing http/server in deno

What improvements can I implement in this React Component to enhance its efficiency?

There is a delay in updating ng-if/ng-hide in real time on the HTML page

Can a single data type be utilized in a function that has multiple parameters?

Enable automatic suggestion in Monaco Editor by utilizing .d.ts files created from jsdoc

What method can be used to specify a function of any signature that returns a particular type in programming?

The module 'PublicModule' was declared unexpectedly within the 'AppModule' in the Angular 4 component structure