Ensure that the data type of a child object property matches the data type of the corresponding parent key

Question

Ensure that the data type of a child object property matches the data type of the corresponding parent key

Can the following structure be enforced with an index signature in TypeScript?

{
    a: { name: 'a' }, // Valid
    b: { name: 'b' }, // Valid
    c: { name: 'd' } // Error: Type '"d"' is not assignable to type '"c"'.
}

This object allows any number of properties with string keys, but it requires that each property's value is an object with an optional 'name' property. The value of this 'name' property must match the key to which it is assigned in the parent object.

A similar outcome can be achieved using a string union type as shown below. However, extending this approach to accept keys as any string may pose a challenge.

type MethodNameVariant = 'GET' | 'PATCH' | 'POST' | 'DELETE';
type Methods =
{
    [MethodName in MethodNameVariant]?: Method <MethodName>
};
interface Method
{
    name?: MethodName;
}

Any assistance on this matter would be greatly appreciated!

typescript

Answer 1

Answer №1

An index signature cannot achieve this functionality, as the domain of string is infinite and cannot be represented easily as a union of literal types like boolean can. TypeScript does not attempt to iterate over string in the same way it does over unions of string literals in mapped types; trying to do so results in the overly broad type {[k: string]: {name: string}.

To approximate this desired behavior, a generic helper function can be created to inspect the keys of any object type provided and then map over those keys. Here's an example:

const asMyType = <T extends { [K in keyof T]: { name: K } }>(t: T) => t;

Therefore, asMyType() simply returns its input, but only accepts arguments that match the specified constraint.

const okay = asMyType({
  a: { name: "a" },
  b: { name: "b" },
  c: { name: "c" }
})

const notOkay = asMyType({
  a: { name: 'a' }, // Valid
  b: { name: 'b' }, // Valid
  c: { name: 'd' } // Error: Type '"d"' is not assignable to type '"c"'.
})

This error demonstrates the intended outcome! The downside here is that the T extends {[K in keyof T]: ... construct is not as straightforward as a regular type, as it relies on generic type parameter inference. However, depending on your requirements, it may suffice.

I hope this explanation proves helpful. Best of luck!

Answer 2

An index signature cannot achieve this functionality, as the domain of string is infinite and cannot be represented easily as a union of literal types like boolean can. TypeScript does not attempt to iterate over string in the same way it does over unions of string literals in mapped types; trying to do so results in the overly broad type {[k: string]: {name: string}.

To approximate this desired behavior, a generic helper function can be created to inspect the keys of any object type provided and then map over those keys. Here's an example:

const asMyType = <T extends { [K in keyof T]: { name: K } }>(t: T) => t;

Therefore, asMyType() simply returns its input, but only accepts arguments that match the specified constraint.

const okay = asMyType({
  a: { name: "a" },
  b: { name: "b" },
  c: { name: "c" }
})

const notOkay = asMyType({
  a: { name: 'a' }, // Valid
  b: { name: 'b' }, // Valid
  c: { name: 'd' } // Error: Type '"d"' is not assignable to type '"c"'.
})

This error demonstrates the intended outcome! The downside here is that the T extends {[K in keyof T]: ... construct is not as straightforward as a regular type, as it relies on generic type parameter inference. However, depending on your requirements, it may suffice.

I hope this explanation proves helpful. Best of luck!

Ensure that the data type of a child object property matches the data type of the corresponding parent key

Answer №1

Similar questions

Utilize TypeScript's TupleIndexed type to strictly enforce read-only properties for arrays when they are used as function arguments

VS code shines a spotlight on Jasmine functions within Angular 6

A guide to confirm if an object includes an HTML element without compromising safety

Utilize the useTheme type from Emotion Js within ReactJs using Typescript

Youngster listens for guardian's occurrence in Angular 2

In TypeScript/Angular, what is the best way to share model variables between a Service class and a controller class?

vite-node: Execute code within the server folder

I'd like to know how to retrieve a total count of all the documents within a Firebase collection using Angular

Please ensure that the function chain has appropriate parameter and return types by specifying the tuple type

What is the method to prevent the label from closing in the MUI 5 datepicker?

The issue arises in ts-jest nestjs where there is an attempt to access properties of an undefined

Best practices for making API calls with axios in React

Bundle with no crucial dependencies

Encountering difficulty in removing a record from the database utilizing Prisma with Next.js API routes

The 'string' Type in Typescript cannot be assigned to the specified type

Issue with React not displaying JSX when onClick Button is triggered

Updating text inputs in Angular can be done more efficiently using Angular Update

Error encountered when attempting to assign a value of the original data type within the Array.reduce function

Monitoring the current scroll position and updating other components on changes

Tips for configuring the global API baseUrl for useFetch in Nuxt 3