Utilizing the value of a parent type in a different type in TypeScript: A guide

Question

Utilizing the value of a parent type in a different type in TypeScript: A guide

Currently, I am in the process of experimenting with creating my own basic ORM system. Below is the snippet of code that I have been working on:

type Models = {
   User: {
      name: string
   },
   Template: {
      text: string
   }
}

type ExtractKeysFrom<T> = keyof T

type ModelsKeys = ExtractKeysFrom<Models, Object>
// The expected output here is: 'User' | 'Template'

type ORM = {
   model: (modelName: ModelsKeys) => {
      create(props: Models[typeof modelName]): Promise<boolean>
   }
}

As for the implementation:

declare const orm: () => ORM;
orm().model('User').create({
  name: 'Adam'
})

I want the props parameter in the create() function to be valid and point only to properties of the User object. However, currently it shows:

create(props: User | Template): Promise<boolean>

I understand that using typeof modelName is incorrect in this scenario and it seems like I need to do some type checking with extends. Could you provide any advice on how to handle this situation properly?

typescript

Answer 1

Answer №1

It is my understanding that simply making the model function generic should solve your issue:

type ORM = {
   model: <T extends ModelsKeys>(modelName: T) => {
      create(props: Models[T]): Promise<boolean>
   }
}

In this case, the model name is defined as the type T and the return object containing the create function can utilize this to specify its parameter.

When testing this approach, it appears to meet your requirements:

declare const orm: ORM

orm.model('User').create({ name: 'Foo' }) // successful
orm.model('User').create({ text: 'Foo' }) // error

orm.model('Template').create({ text: 'Foo' }) // successful
orm.model('Template').create({ name: 'Foo' }) // error

Explore Typescript playground

Answer 2

It is my understanding that simply making the model function generic should solve your issue:

type ORM = {
   model: <T extends ModelsKeys>(modelName: T) => {
      create(props: Models[T]): Promise<boolean>
   }
}

In this case, the model name is defined as the type T and the return object containing the create function can utilize this to specify its parameter.

When testing this approach, it appears to meet your requirements:

declare const orm: ORM

orm.model('User').create({ name: 'Foo' }) // successful
orm.model('User').create({ text: 'Foo' }) // error

orm.model('Template').create({ text: 'Foo' }) // successful
orm.model('Template').create({ name: 'Foo' }) // error

Explore Typescript playground

Answer 3

Answer №2

It is important to define the model function as a generic function that automatically determines its type based on the parameter:

type Models = {
   User: {
      name: string
   },
   Template: {
      text: string
   }
}

type ExtractKeysFrom<T> = keyof T

type ModelsKeys = ExtractKeysFrom<Models>

type ORM = {
   model: <T extends ModelsKeys>(modelName: T) => {
      create(props: Models[T]): Promise<boolean>
   }
}

declare const orm: () => ORM;

orm().model('User').create({ name: 'name' }); // OK
orm().model('User').create({ wrong: 'name' }); // KO

Check it out in TypeScript playground

Answer 4

It is important to define the model function as a generic function that automatically determines its type based on the parameter:

type Models = {
   User: {
      name: string
   },
   Template: {
      text: string
   }
}

type ExtractKeysFrom<T> = keyof T

type ModelsKeys = ExtractKeysFrom<Models>

type ORM = {
   model: <T extends ModelsKeys>(modelName: T) => {
      create(props: Models[T]): Promise<boolean>
   }
}

declare const orm: () => ORM;

orm().model('User').create({ name: 'name' }); // OK
orm().model('User').create({ wrong: 'name' }); // KO

Check it out in TypeScript playground

Answer 5

Answer №3

Is this what you were looking for? I've simplified things by focusing on the model function.

interface Models {
    User: {
        name: string;
    };
    Template: {
        text: string;
    };
}

function model<
    ModelName extends keyof Models,
    ModelArgs extends Models[ModelName]
>(model: ModelName) {
    // implementation

    return {
        create(props: ModelArgs): any {
            // implementation
        },
    };
}

model("User").create({ name: "Alice" });
// success

model("User").create({ text: "foobar" });
// error, 'text' property does not exist for User

Answer 6

Is this what you were looking for? I've simplified things by focusing on the model function.

interface Models {
    User: {
        name: string;
    };
    Template: {
        text: string;
    };
}

function model<
    ModelName extends keyof Models,
    ModelArgs extends Models[ModelName]
>(model: ModelName) {
    // implementation

    return {
        create(props: ModelArgs): any {
            // implementation
        },
    };
}

model("User").create({ name: "Alice" });
// success

model("User").create({ text: "foobar" });
// error, 'text' property does not exist for User

Utilizing the value of a parent type in a different type in TypeScript: A guide

Answer №1

Answer №2

Answer №3

Similar questions

Synchronizing Angular icons with HTML text

Reconstructing the complete pathway using object identifiers

Nativescript encountered an issue while attempting to generate the application. The module failed to load: app/main.js

What is the method for utilizing a function's input type specified as "typeof A" to output the type "A"?

Converting an array of arrays into an object with an index signature: A step-by-step guide

What could be causing the issue of CSS Styles not being applied to an Angular 2 component with Vaadin elements?

Steps for TS to infer types on interfaces

Creating a Typescript version of the mongodb project aggregation functionality

Leveraging non-React entities to seamlessly integrate components within a component hierarchy in React utilizing TypeScript

When utilizing a 'Token' in the provider() aliasing within Angular 2, the Typescript compiler may display an error message stating 'Unresolved variable or type'. This issue can arise when defining

bespoke arguments for the super function in a subclass of Angular

Angular - Enabling the next screen button only after completing multiple selections

Sharing data between components in Angular 4: Passing objects between different parts of your

Exploring JSON data in real-time

Unlocking $refs with the Composition API in Vue3 - A step-by-step guide

Error in Angular: Http Provider Not Found

Resolving Incompatibility Problems Between Devices

Transferring Cookies through FETCH API using a GET method from the client-side to the server-side

Tips for stopping webpack from creating compiled files in the source directory

Backend images are failing to load