Tips for incorporating conditional types into function parameters based on existing input

Question

Tips for incorporating conditional types into function parameters based on existing input

The title might be confusing, so allow me to clarify.

My Objective
I am referring to the code snippet below. I aim to specify the route property based on the types property as either a string or a function that returns a string.

The Code
Let's begin with a functional example.

// Utilizing TypeScript to define types without actual values provided
const defineArgTypes = <
  T extends {
    args?: ArgumentsBase | null;
  }
>() => null as any as T;

interface ArgumentsBase {
  queryParams?: Record<string | number | symbol, any>;
}

type BaseActionMap = Record<
  string,
  {
    types?: { args?: ArgumentsBase };
  }
>;

type ActionMapItem<Item extends BaseActionMap[string]> = {
  types?: Item['types'];
};

type ActionMap<BaseConfig extends BaseActionMap> = {
  [Property in keyof BaseConfig]: ActionMapItem<BaseConfig[Property]>;
};

type ConfigMapItem<Item extends BaseActionMap> = {
  route: Item['types'] extends { args: ArgumentsBase }
    ? (args: Item['types']['args']['queryParams']) => string
    : string;
};

type ConfigMap<AMap extends ActionMap<any>> = {
  [Property in keyof AMap]: ConfigMapItem<AMap[Property]>;
};

const defineActions = <Data extends BaseActionMap>(
  actions: Data,
  config: ConfigMap<Data>
) => {
  // irrelevant code nested here
};

const config = defineActions(
  {
    getTodos: {},
    getTodo: {
      types: defineArgTypes<{ args: { queryParams: { id: string } } }>(),
    },
  },
  {
    getTodo: {
      route: (d) => `todos/${d.id}`,
    },
    getTodos: {
      route: 'todos',
    },
  }
);

In the above code, it is necessary to define "actions (getTodos, getTodo)" twice.

Is there a way to streamline this to the following while maintaining conditional types for the route properties?

const config = defineActions(
  {
    getTodos: {
      route: 'todos',
    },
    getTodo: {
      types: defineArgTypes<{ args: { queryParams: { id: string } } }>(),
      route: (d) => `todos/${d.id}`,
    },
  }
);

typescript typescript-generics

Answer 1

Answer №1

If you're searching for a solution, consider implementing a discriminated union in Typescript. This type is essentially a combination of two types that share a common property known as the "discriminant." This allows Typescript to narrow down the union based on this property. For instance, here's a simplified example of how you can define a discriminated union:

type Config = {
  types?: undefined
  route: string
} | 
{
  types: {id:string}
  route: (args:{id:string})=>string
}

In this case, the types property acts as the discriminant. If it's undefined, Typescript will infer the first member of the union. If it's {id:string}, Typescript will narrow it down to the second member. You can extend this concept to include more options as needed.

To leverage the typing from types in the route function, you can use generics like so:

type Config<T extends {id: string}> = {
  types?: undefined
  route: string
} | 
{
  types: T
  route: (args:T)=>string
}

After defining your discriminated union, you can use it within your defineActions function by specifying appropriate type parameters. Here's an example:

function defineActions<T extends {id:string}, U extends Record<string,Config<T>>>(configs:U){}

const config = defineActions(
  {
    getTodos: {
      route: 'todos',
    },
    getTodo: {
      types: { id: "myId" },
      route: (d) => `todos/${d.id}`,
    },
  }
);

You can also test this implementation in a playground.

One thing to note: The way TS determines the discriminant may not always be explicit. To ensure proper discrimination based on your intended property (in this case, types), you may need to differentiate other parts of the type definition as well. However, it might not be necessary depending on your specific requirements.

I've provided a simplified explanation tailored to your query. Feel free to ask if you need further clarification or adjustments.

Answer 2

If you're searching for a solution, consider implementing a discriminated union in Typescript. This type is essentially a combination of two types that share a common property known as the "discriminant." This allows Typescript to narrow down the union based on this property. For instance, here's a simplified example of how you can define a discriminated union:

type Config = {
  types?: undefined
  route: string
} | 
{
  types: {id:string}
  route: (args:{id:string})=>string
}

In this case, the types property acts as the discriminant. If it's undefined, Typescript will infer the first member of the union. If it's {id:string}, Typescript will narrow it down to the second member. You can extend this concept to include more options as needed.

To leverage the typing from types in the route function, you can use generics like so:

type Config<T extends {id: string}> = {
  types?: undefined
  route: string
} | 
{
  types: T
  route: (args:T)=>string
}

After defining your discriminated union, you can use it within your defineActions function by specifying appropriate type parameters. Here's an example:

function defineActions<T extends {id:string}, U extends Record<string,Config<T>>>(configs:U){}

const config = defineActions(
  {
    getTodos: {
      route: 'todos',
    },
    getTodo: {
      types: { id: "myId" },
      route: (d) => `todos/${d.id}`,
    },
  }
);

You can also test this implementation in a playground.

One thing to note: The way TS determines the discriminant may not always be explicit. To ensure proper discrimination based on your intended property (in this case, types), you may need to differentiate other parts of the type definition as well. However, it might not be necessary depending on your specific requirements.

I've provided a simplified explanation tailored to your query. Feel free to ask if you need further clarification or adjustments.

Tips for incorporating conditional types into function parameters based on existing input

Answer №1

Similar questions

Is there a way to retrieve the timezone based on a province or state in TypeScript on the frontend?

What is the best way to set a value for a variable that is asynchronous by design?

PhpStorm is unable to resolve the @ionic/angular module

Creating React components with TypeScript: Defining components such as Foo and Foo.Bar

Obtain the selected type from a tuple after filtering

The assignment of Type Program[] to a string[] is not valid

Exporting a Typescript class from one module and importing it into another module

Converting JSON to TypeScript in an Angular project

I possess a table that showcases MatIcon buttons. Upon clicking on a button, two additional buttons should appear at the bottom of the table

Using TypeScript, you can pass an object property name as a function argument while ensuring the type is

Issue with Angular custom tag displaying and running a function

What steps should I take to create a React component in Typescript that mimics the functionality of a traditional "if" statement?

Adding FormControl dynamically to FormGroup can be achieved by simply using the appropriate method

Using 'cy.get' to locate elements in Cypress tutorial

Setting up NestJs with TypeORM by utilizing environment files

Assembly of these elements

Difficulty fetching data on the frontend with Typescript, React, Vite, and Express

Using TypeScript's conditional types for assigning types in React

When calling UIComponent.getRouterFor, a TypeScript error is displayed indicating the unsafe return of a value typed as 'any'

Encountering compilation errors while using ng serve in NGCC