Typescript - Identifying child type based on the specified property in keyof

Question

Typescript - Identifying child type based on the specified property in keyof

I'm exploring the possibility of enhancing an interface by adding extra options to it. For example:

interface IRole {
  id: number;
  name: string;
}

interface IAddress {
  line1: string;
  line2: string;
  city: string;
  state: string;
  zip: string;
}

interface IUser {
  email: string;
  password: string;

  role?: IRole;
  addresses: IAddress[];
}

const options: FieldOptions<IUser> = {
  name: 'role',
  description: 'This is a role',
  children: [
    {
      name: 'name', // The child element declaration should be the type that is specified by the name
                    // In this case it should be FieldOptions<IRole>[]
                    // But right now it is FieldOptions<IRole | IAddress[] | string>[]
                    // I just need a way to narrow down to what it should be
      description: 'This is the name on the role'
    }
  ]
}

Currently, my FieldOptions interface looks like this, which I know is incorrect.

interface FieldOptions<T, K extends keyof T> {
  name: K;
  description?: string;
  children?: FieldOptions<T[K], keyof T[K]>[];
}

I've been searching for examples similar to mine, but most involve known keys and conditional properties. My scenario is different as it relies on unknowns until input from the user provides a type. Any insights or assistance would be greatly appreciated. Thank you!

typescript typescript-typings typescript-generics

Answer 1

Answer №1

I believe a type alias would suit your needs better than an interface in this case. The FieldOptions<IUser> should be represented as a union of structures corresponding to each choice for the name field, which interfaces cannot achieve.

Below is a recursive conditional mapped type that aims to express what you're trying to achieve:

type FieldOptions<T> = T extends object ? { [K in keyof T]-?: {
  name: K;
  description?: string;
  children?: FieldOptions<T[K]>[];
} }[keyof T] : never;

This code iterates over the property keys of an object type T and outputs a structure similar to the one you described earlier. This approach should work for subproperties as well due to the recursive nature of FieldOptions<T>.

If T is not an object type, it returns never, ensuring that children will not have any entries. You may need to make adjustments if T is an array or primitive type.

You can test it with some examples like the ones provided below:

const options: FieldOptions<IUser> = {
  name: 'role',
  description: 'This is a role',
  children: [
    {
      name: 'name',
      description: 'This is the name on the role',
      children: []
    }
  ]
}; // should be valid

const badOptions: FieldOptions<IUser> = {
  name: "role",
  children: [{
    name: "oops" // error!
  //~~~~ <-- incorrect name
  }]
}

The concept works best for plain object types but might require adjustments for arrays or primitives. Consider scenarios like FieldOptions<IAddresses[]> where you may need to handle properties differently (e.g., what should the name property be for numbers?).

Playground link to review code

Answer 2

I believe a type alias would suit your needs better than an interface in this case. The FieldOptions<IUser> should be represented as a union of structures corresponding to each choice for the name field, which interfaces cannot achieve.

Below is a recursive conditional mapped type that aims to express what you're trying to achieve:

type FieldOptions<T> = T extends object ? { [K in keyof T]-?: {
  name: K;
  description?: string;
  children?: FieldOptions<T[K]>[];
} }[keyof T] : never;

This code iterates over the property keys of an object type T and outputs a structure similar to the one you described earlier. This approach should work for subproperties as well due to the recursive nature of FieldOptions<T>.

If T is not an object type, it returns never, ensuring that children will not have any entries. You may need to make adjustments if T is an array or primitive type.

You can test it with some examples like the ones provided below:

const options: FieldOptions<IUser> = {
  name: 'role',
  description: 'This is a role',
  children: [
    {
      name: 'name',
      description: 'This is the name on the role',
      children: []
    }
  ]
}; // should be valid

const badOptions: FieldOptions<IUser> = {
  name: "role",
  children: [{
    name: "oops" // error!
  //~~~~ <-- incorrect name
  }]
}

The concept works best for plain object types but might require adjustments for arrays or primitives. Consider scenarios like FieldOptions<IAddresses[]> where you may need to handle properties differently (e.g., what should the name property be for numbers?).

Playground link to review code

Answer 3

Answer №2

@jcalz beat me to the post, but I have come up with something very similar.

type FieldOptions<T> = {
  [K in keyof T]: {
    name: K;
    description: string;
    children?: Required<T>[K] extends object ? FieldOptions<Required<T>[K]> : never;
  }
}[keyof T][]

The challenging aspect is using Required<T>[K] instead of just T[K]. The reason for this is because IUser['role'] results in IRole | undefined due to the property being optional. However, we aim to obtain the options for IRole while excluding the interference of undefined.

type UserOptions = FieldOptions<IUser>

This leads to:

type UserOptions = ({
    name: "email";
    description: string;
    children?: undefined;
} | {
    name: "password";
    description: string;
    children?: undefined;
} | {
    name: "role";
    description: string;
    children?: FieldOptions<IRole> | undefined;
} | {
    ...;
} | undefined)[]

I assume that your options were intended to be an array containing that object, as it wouldn't make much sense otherwise. This setup successfully validates in TypeScript using my type FieldOptions<IUser>.

Answer 4

@jcalz beat me to the post, but I have come up with something very similar.

type FieldOptions<T> = {
  [K in keyof T]: {
    name: K;
    description: string;
    children?: Required<T>[K] extends object ? FieldOptions<Required<T>[K]> : never;
  }
}[keyof T][]

The challenging aspect is using Required<T>[K] instead of just T[K]. The reason for this is because IUser['role'] results in IRole | undefined due to the property being optional. However, we aim to obtain the options for IRole while excluding the interference of undefined.

type UserOptions = FieldOptions<IUser>

This leads to:

type UserOptions = ({
    name: "email";
    description: string;
    children?: undefined;
} | {
    name: "password";
    description: string;
    children?: undefined;
} | {
    name: "role";
    description: string;
    children?: FieldOptions<IRole> | undefined;
} | {
    ...;
} | undefined)[]

I assume that your options were intended to be an array containing that object, as it wouldn't make much sense otherwise. This setup successfully validates in TypeScript using my type FieldOptions<IUser>.

Typescript - Identifying child type based on the specified property in keyof

Answer №1

Answer №2

Similar questions

The Ionic Image breaks upon publication and installation of the apk

Inform the Angular2 Directive about any modifications

What is the process for extracting Excel .xlsx information from a POST request body in an Express API?

What is the method to incorporate type hints for my unique global Vue directives?

What is the best approach to implement custom JSX alongside React framework?

Error in Angular 4: Undefined property 'replace' causing trouble

When defining a GraphQL Object type in NestJS, an error was encountered: "The schema must have unique type names, but there are multiple types named 'Address'."

Looking for a button that can be toggled on and off depending on the input fields

A solution to the error message "Type 'unknown' is not assignable to type 'Country[]' in React TypeScript" is to explicitly define the type of the

Tips for creating an API URL request with two search terms using Angular and TypeScript

Organized modules within an NPM package

List the attributes of combined interface declaration

Guide to setting up form data with asynchronous data

Combining union types with partial types in TypeScript: A guide

Building classes in TypeScript

How Can I Build a Dynamic Field Form Builder in Angular 4?

Implementing dynamic image insertion on click using a knockout observable

Retrieve the implementation of an interface method directly from the constructor of the class that implements it

Creating formGroups dynamically for each object in an array and then updating the values with the object data

Metronome in TypeScript