Tips for determining the type of an object's property based on the key name

Question

Tips for determining the type of an object's property based on the key name

My goal is to set specific types based on the property name:

If the property name starts with on, it should be of type Function
For all other cases, the type should be boolean

Initially, I attempted this using an interface:

interface Props {
  [key: `on${string}`]: Function; // error: 'on${string}' index type 'Function' is not assignable to 'string' index type 'boolean'.ts(2413)
  [key: string]: boolean;
}

After that, I tried a different approach utilizing a type and interface:

type EventName = `on${string}`;

interface Props {
  [K: EventName | string]: typeof K extends EventName ? Function : boolean;
}

const props: Props = {
  asd: true,
  onClick: () => {}, // error: Type '() => void' is not assignable to type 'boolean'.ts(2322)
};

Is there another way to achieve this without encountering these errors?

typescript conditional-types

Answer 1

Answer №1

It is not completely feasible to ensure the code is error-free due to limited checks. If s holds a string, there is no foolproof way to prevent it from encompassing a string that commences with on. Hence, the index signature for the string needs to align with all designated properties.

let s = "onClick" as string;
let v = props[s] // typed as boolean, but actually onClick

To address this issue (not without risks), one can employ an intersection instead of an interface. While this approach enables property access as desired, creating such objects necessitates a type assertion due to lingering incompatibility.

type Props = {
  [key: `on${string}`]: Function; 
} & {
  [key: string]: boolean;
}

const props: Props = {
  asd: true,
  onClick: () => {}, 
} as any as Props;

props.onClick // Function
props.ssss // boolean

Playground Link

For object creation and to eliminate the need for the any type assertion, a validation function can be utilized to ensure keys without the prefix on are indeed of type boolean:

function makeProps<T extends Record<`on${string}`, Function>>(o: T & Record<Exclude<keyof T, `on${string}`>, boolean>) {
    return o as Props;
}
const props: Props = makeProps({
  asd: true,
  onClick: () => {}, 
})

Playground Link

A safer alternative would involve making the keys for boolean and Function mutually exclusive by introducing a prefix for the boolean properties too.

type Props = {
  [key: `on${string}`]: (...a: any[]) => any; 
  [key: `flag${string}`]: boolean;
}

const props: Props = {
  onClick: () => {}, 
  flagRaiseClick: true
}

props.onClick // Function
props.flagRaiseClick // boolean

Answer 2

It is not completely feasible to ensure the code is error-free due to limited checks. If s holds a string, there is no foolproof way to prevent it from encompassing a string that commences with on. Hence, the index signature for the string needs to align with all designated properties.

let s = "onClick" as string;
let v = props[s] // typed as boolean, but actually onClick

To address this issue (not without risks), one can employ an intersection instead of an interface. While this approach enables property access as desired, creating such objects necessitates a type assertion due to lingering incompatibility.

type Props = {
  [key: `on${string}`]: Function; 
} & {
  [key: string]: boolean;
}

const props: Props = {
  asd: true,
  onClick: () => {}, 
} as any as Props;

props.onClick // Function
props.ssss // boolean

Playground Link

For object creation and to eliminate the need for the any type assertion, a validation function can be utilized to ensure keys without the prefix on are indeed of type boolean:

function makeProps<T extends Record<`on${string}`, Function>>(o: T & Record<Exclude<keyof T, `on${string}`>, boolean>) {
    return o as Props;
}
const props: Props = makeProps({
  asd: true,
  onClick: () => {}, 
})

Playground Link

A safer alternative would involve making the keys for boolean and Function mutually exclusive by introducing a prefix for the boolean properties too.

type Props = {
  [key: `on${string}`]: (...a: any[]) => any; 
  [key: `flag${string}`]: boolean;
}

const props: Props = {
  onClick: () => {}, 
  flagRaiseClick: true
}

props.onClick // Function
props.flagRaiseClick // boolean

Tips for determining the type of an object's property based on the key name

Answer №1

Similar questions

The module 'json-stringify-safe' could not be located

I'm looking to retrieve a specific file from my Angular Firestore database

Using Ionic 2 pipe to filter a dynamically changing list based on the name property

Improving Performance: Addressing Charset Definition Issue in NextJS Lighthouse Best Practices

What's the best way to include various type dependencies in a TypeScript project?

Enhancing Angular Material forms with custom background colors

Seamless database migrations using sequelize and typescript

Understanding React and TypeScript Higher Order Components: How to Resolve the Type '{}' is not assignable to Type P Error

Implement pagination in Angular for the table

Why are the queries undefined when making HTTP requests with Express?

How can you use console.log() effectively in an Angular application?

What is the most efficient way to retrieve all documents from Firestore at once?

Converting typescript path aliases into local file paths

What is the process for integrating Typescript into a Quasar 2 project that is utilizing Vite as its build tool?

Dealing with mouseover and mouseout events for ul li elements in Angular 9: An easy guide

Exploring the TypeScript Type System: Challenges with Arrays Generated and Constant Assertions

Communication between main thread and Web Worker is unreliable in React application with TypeScript and Webpack

Tips for retrieving keys of a specific type from an object

Merging an unspecified number of observables in Rxjs

Encountering a script error when upgrading to rc4 in Angular 2