Is it possible to use the inheritance type for a function parameter derived from an object?

Question

Is it possible to use the inheritance type for a function parameter derived from an object?

When working with Angular, I have been using TypeScript for some time now. Previously, I used to set function parameter types in a hardcoded way, as shown below:

login(email: string) {}

However, I recently tried to inherit from another object and changed my approach like this:

import { User } from './user.model';

login(email: User['email']) {}

Everything seems to be functioning properly, but I couldn't find any examples similar to this in the TypeScript cookbook. I am unsure if setting the type like this is the recommended practice. Can anyone provide guidance on whether or not it's appropriate to use the above construction according to TypeScript guidelines?

javascript angular typescript

Answer 1

Answer №1

When utilizing the syntax T[field], it is important to note that this is a type query and not inheritance. The usefulness of type queries really comes down to your specific use case. They are particularly handy when you are unsure of the actual type of an object, or in scenarios involving mapped types:

class Example <T extends { key: any, value : any}>{
    getData(key: T['key']) : T['value'] {
        return null;
    }
}

var e = new Example<{ key: number, value : string}>();
var result = e.getData(0) // only numbers allowed, will result be typed as string

It's worth mentioning that while you can continue using this syntax as usual, modifying the type for User[email] may cause any calls to the function to fail, which could be intentional. If you are confident that the field type will remain consistent, sticking with the current type (string in this instance) may be more readable, although ultimately it boils down to personal preference.

Answer 2

When utilizing the syntax T[field], it is important to note that this is a type query and not inheritance. The usefulness of type queries really comes down to your specific use case. They are particularly handy when you are unsure of the actual type of an object, or in scenarios involving mapped types:

class Example <T extends { key: any, value : any}>{
    getData(key: T['key']) : T['value'] {
        return null;
    }
}

var e = new Example<{ key: number, value : string}>();
var result = e.getData(0) // only numbers allowed, will result be typed as string

It's worth mentioning that while you can continue using this syntax as usual, modifying the type for User[email] may cause any calls to the function to fail, which could be intentional. If you are confident that the field type will remain consistent, sticking with the current type (string in this instance) may be more readable, although ultimately it boils down to personal preference.

Is it possible to use the inheritance type for a function parameter derived from an object?

Answer №1

Similar questions

Looking for repeating values in inputs excluding this one

Notifier - The Best HTML Notification System for Web Applications

Implementing the "module": "ES2020" configuration in a Node.js project instead of using commonJS

Arrange the items in the last row of the flex layout with equal spacing between them

Setting up a Bootstrap tokenfield for usage with a textarea

(Angular 6) To make it function properly, you must click the button twice

Using jQuery to manipulate the image within a specific div element

WebStorm is maxing out the CPU at full capacity

Explore various date formats using the datepicker functionality

Why does TypeScript include a question mark next to the argument when GraphQL specifies it as nullable true?

Incorporating personalized cells within Row Formatter in Tabulator

The outer border of the Angular Material Mat Grid List is beautifully highlighted

What causes the variation in Http Post Response between the Console and Network response tab?

Calculate the mean value of each array, and then determine which average is higher

Changing the color of text in an HTML input field using CSS and JavaScript depending on the input value

Is there a way to retrieve the sub-child menu data from a JSON file?

JavaScript error: "null or not an object" bug

Styling components in React using Styled Components is versatile and can

The utilization of @ViewChildren within a service.ts file can lead to an undefined outcome

Solving the error message: "Objects cannot be used as a React child (found: object with keys {})"