The generic does not validate the types of two properties

Question

The generic does not validate the types of two properties

type ComponentType = (...args: any) => any;

type PlatformNotificationProps<TIcon extends ComponentType = ComponentType> = {
  component: TIcon;
  arg: Parameters<TIcon>[0];
};

const PlatformNotification = (props: PlatformNotificationProps) => {};

const Icon = (name: string) => '';

const result = PlatformNotification({
  component: Icon,
  arg: 100,
});

For this specific scenario, either the 'arg' value should be a string instead of a number, or the component should accept a number as an argument instead of a string. I was anticipating to receive an error in the console due to this discrepancy, but surprisingly everything is functioning fine.

What would be the proper way to define types for this particular situation?

typescript

Answer 1

Answer №1

When you define PlatformNotification as a non-generic function, it won't check types for you.

const PlatformNotification = (props: PlatformNotificationProps) => {};
//    ^?
// const PlatformNotification: (props: PlatformNotificationProps</*default*/ComponentType>) => void

const result = PlatformNotification({
  component: Icon,
// ^?
// (property) component: ComponentType
  arg: 100,
// ^?
// (property) arg: any
});

To get it to work correctly, simply make it generic

const PlatformNotification = <TIcon extends ComponentType>(props: PlatformNotificationProps<TIcon>) => {};

Answer 2

When you define PlatformNotification as a non-generic function, it won't check types for you.

const PlatformNotification = (props: PlatformNotificationProps) => {};
//    ^?
// const PlatformNotification: (props: PlatformNotificationProps</*default*/ComponentType>) => void

const result = PlatformNotification({
  component: Icon,
// ^?
// (property) component: ComponentType
  arg: 100,
// ^?
// (property) arg: any
});

To get it to work correctly, simply make it generic

const PlatformNotification = <TIcon extends ComponentType>(props: PlatformNotificationProps<TIcon>) => {};

Answer 3

Answer №2

When working with generics, it's important for all types in the chain to pass through the generic arguments.

If you set default values for the arguments in PlatformNotificationProps and then use that type without properly configuring it, TypeScript won't be able to match the arguments from your function with the generic parameters.

One approach to solving this issue is to ensure that every element in your chain is configurable.

type Function<Args extends any[] = any[]> = (...args: Args) => any;

type PlatformNotificationProperties<Arguments extends any[], IconType extends Function<Arguments>> = {
  component: IconType;
  argument: Parameters<IconType>[0];
};

const PlatformNotificationComponent = <Args extends any[] = any[], Cmp extends Function<Args> = Function<Args> >(props: PlatformNotificationProperties<Args, Cmp>) => {};

const CustomIcon = (name: string) => '';

const output = PlatformNotificationComponent({
  component: CustomIcon,
  argument: 100,
});

Answer 4

When working with generics, it's important for all types in the chain to pass through the generic arguments.

If you set default values for the arguments in PlatformNotificationProps and then use that type without properly configuring it, TypeScript won't be able to match the arguments from your function with the generic parameters.

One approach to solving this issue is to ensure that every element in your chain is configurable.

type Function<Args extends any[] = any[]> = (...args: Args) => any;

type PlatformNotificationProperties<Arguments extends any[], IconType extends Function<Arguments>> = {
  component: IconType;
  argument: Parameters<IconType>[0];
};

const PlatformNotificationComponent = <Args extends any[] = any[], Cmp extends Function<Args> = Function<Args> >(props: PlatformNotificationProperties<Args, Cmp>) => {};

const CustomIcon = (name: string) => '';

const output = PlatformNotificationComponent({
  component: CustomIcon,
  argument: 100,
});

Answer 5

Answer №3

The main issue here lies in assigning a default generic to PlatformNotificationProps:

type PlatformNotificationProps<TIcon extends ComponentType = ComponentType> = {
...

When you use this type without specifying a specific generic type, TypeScript defaults it to be ComponentType. This is why the variable arg can accept numbers, as it is essentially typed as any:

const result = PlatformNotification({
  component: Icon,
  arg: 100,
// ^? (property) arg: any
});

The same applies to the component:

const result = PlatformNotification({
  component: () => null, // no errors
  arg: 100,
});

To resolve this issue, specify a type when calling PlatformNotificationProps:

const PlatformNotification = (props: PlatformNotificationProps<typeof Icon>) => {};

Now:

const result = PlatformNotification({
  component: Icon,
  arg: 100, // error: type `number` is not assignable to `string`
});

Answer 6

The main issue here lies in assigning a default generic to PlatformNotificationProps:

type PlatformNotificationProps<TIcon extends ComponentType = ComponentType> = {
...

When you use this type without specifying a specific generic type, TypeScript defaults it to be ComponentType. This is why the variable arg can accept numbers, as it is essentially typed as any:

const result = PlatformNotification({
  component: Icon,
  arg: 100,
// ^? (property) arg: any
});

The same applies to the component:

const result = PlatformNotification({
  component: () => null, // no errors
  arg: 100,
});

To resolve this issue, specify a type when calling PlatformNotificationProps:

const PlatformNotification = (props: PlatformNotificationProps<typeof Icon>) => {};

Now:

const result = PlatformNotification({
  component: Icon,
  arg: 100, // error: type `number` is not assignable to `string`
});

The generic does not validate the types of two properties

Answer №1

Answer №2

Answer №3

Similar questions

Incorrect date generated by Moment.js from Unix timestamp

Creating XML templates in Angular 7: A comprehensive guide

How can we exclude fields from JSON.stringify in type-graphql entities?

Focusing on the specific properties of a type that serve as index signatures

Can you identify the type of component that is returned from the withStyles() function?

How do I resolve validation function error messages in Vuetify?

Unpacking Objects in JavaScript and TypeScript: The Power of Destructuring

What is the best way to adjust the layout of these two elements using CSS in order to display them on

Guide on importing a markdown file (.md) into a TypeScript project

Bringing in TypeScript declarations for the compiled JavaScript librarybundle

Uncovering redundant fields in TypeScript and detecting errors through type inference

Using TypeScript with Visual Studio Code to reference a renamed file

What is a creative way to design a mat-radio-group without traditional radio buttons?

insert information into a fixed-size array using JavaScript

Acquire request data prior to exiting function in React

Creating personalized breakpoints in Material UI using TypeScript

Struggling to launch on Vercel and encountering the error message, """is not allowed by Access-Control-Allow-Origin. Status code: 204""

Attempting to grasp the concept of implementing FormArray

The ngx-material-timepicker lacks proper design when the minutesGap is set to 1

Which Index Type is the best fit for my assignment?