Determine the generic type of the parent class based on the constructor of the child class

Below is a code snippet illustrating the issue at hand:


class Parent<T = unknown> {
    constructor(private prop: T) {}

    getProp(): T {
        return this.prop;
    }
}

class Child extends Parent {
    constructor() {
        super({
            baba: 10,
            bobo: 20
        });
    }
}

const instance = new Child();
const prop = instance.getProp();
//    |
//    '-> prop is of type `unknown`

I am seeking a way for TypeScript to infer the type of the parent class based on the object value, without explicitly specifying the type.

In this scenario, the desired result would be

Parent<{baba: number, bobo: number}>

Is such automatic inference achievable?

Answer №1

Unfortunately, TypeScript does not currently support automatic type inference in the scenario described. When you extend a parent class with a child class in TypeScript, the default type argument is assigned as 'unknown' unless explicitly specified. This means that omitting the type argument does not trigger the compiler to infer the type automatically.

Unlike generic functions or constructors, there is no mechanism in TypeScript to request the compiler to infer the type argument for generic types, interfaces, or classes. Even in cases where one might expect type inference, such as using the `super()` function call, TypeScript does not support it.

There has been a feature request for this functionality on GitHub, but it has received limited support. Until such a feature is implemented, the workaround is to manually specify the type argument when extending a parent class in TypeScript. It may seem redundant, but it is currently the only way to ensure type safety in your code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The parameter type cannot be assigned an undefined argument

I am new to TypeScript and trying to check if an item already exists. However, when I define the previous variable, I'm encountering an error: "Argument of type '(prev: CartItemsType[]) => CartItemsType[] | undefined' is not assignable to ...

Creating a JSON object from an array of data using TypeScript

This might not be the most popular question, but I'm asking for educational purposes... Here is my current setup: data = {COLUMN1: "DATA1", COLUMN2: "DATA2", COLUMN3: "DATA3", ..., COLUMNn: "DATAn"}; keyColumns = ["COLUMN2", "COLUMN5", "COLUMN9"]; ...

Implementing a wrapped object check using a union type

Exploring the use of union types with basic primitives and custom objects, I created a contrived example inspired by the sample union type shown in the Typescript documentation under the Union Types section. In this example, I introduced a fictional type c ...

Spread operator in Typescript for complex nested collection types

I have implemented a Firestore database and defined a schema to organize my data: type FirestoreCollection<T> = { documentType: T; subcollections?: { [key: string]: FirestoreCollection<object>; }; }; type FirestoreSchema< T exte ...

Exploring deep nested components and elements in Angular for a targeted specific functionality

Is it possible to apply the ng deep css class to only one specific checkbox in my component, rather than all checkboxes? I want to customize just one checkbox and leave the others unchanged. How can this be achieved? Thank you. I need the CSS modificatio ...

The Gatsby + Typescript project is reporting that the module with the name "*.module.scss" does not have any exported members

I've recently gone through Gatsby's demo project in their documentation (which is long overdue for an update). I've carefully followed the instructions provided here: I've included an index.d.ts file in the /src directory of my project ...

The Angular framework always initializes the list items in CDK drop List starting from the initial index

Currently, I am working with the cdk Drag drop feature <div class="example-container" cdkDropListGroup> To properly understand and describe data, it is crucial to be aware of the level of variability. This can be determined by analyzing the ...

Is it possible to implement typed metaprogramming in TypeScript?

I am in the process of developing a function that takes multiple keys and values as input and should return an object with those keys and their corresponding values. The value types should match the ones provided when calling the function. Currently, the ...

Stop fullscreen mode in Angular after initiating in fullscreen mode

Issue with exiting full screen on Angular when starting Chrome in full-screen mode. HTML: <hello name="{{ name }}"></hello> <a href="https://angular-go-full-screen-f11-key.stackblitz.io" target="_blank" style=& ...

What is the best way to link the value of a mat-slider to an input field in a reactive form?

Is there a way to synchronize the min and max values of a ranged mat-slider with corresponding input fields? Currently, when I set numbers in the input fields, the slider updates correctly. However, when I use the slider to change the value of the input fi ...

The object may be null even after being enclosed in an if statement

In my Vue component, I have implemented the following method: dataURLtoBlob(dataurl: string): Blob { const arr: string[] = dataurl.split(","); if (arr) { if (arr[0]) { const mime = arr[0].match(/:(.*?);/)[1]; ...

transitioning from angular cli version 1.7 to version 12

Looking for a detailed guide on upgrading from version 1.7 to the latest Angular version (12/11)? I currently have an app running on version 1.7 and couldn't find a step-by-step process here: upgrading angular Would it be safe to assume that the upgr ...

Adding date restrictions to the main method is necessary for controlling the input and output

I have a function in my react-native package that requires "from" and "to" dates as parameters. I need to implement a rule that ensures the "to" date is always after the "from" date. Where should I insert this requirement in the following code snippe ...

API Routes - xxxx has been resolved by the API without sending back a response, potentially causing delays in request processing

While working on my frontend project, I encountered an issue with a simple API call using API routes. Whenever I try to complete the call, I face the following error which prevents my redirect from working: API resolved without sending a response for /ap ...

Encountering npm3 installation errors with typyings in Angular 2?

Each time I try to sudo npm install Angular 2 modules, everything updates and installs correctly. However, I encounter the following error when the typings install is attempted: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0 ...

ReactJS Tutorial: Simple Guide to Updating Array State Data

const [rowData, setRowData] = useState([]); const old = {id: 'stud1', name: 'jake', room: '2'}; const newData = {name: 'jake', room: '3A'}; useEffect(() => { let ignore = false; ...

'The signatures of each of these values are not compatible with one another.' This error occurs when using find() on a value that has two different array types

Here's the code snippet I'm attempting to run within a TypeScript editor: type ABC = { title: string } type DEF = { name: string } type XYZ = { desc: ABC[] | DEF[] } const container: XYZ = { desc: [{title: & ...

Connecting Ionic 3 with Android native code: A step-by-step guide

I just finished going through the tutorial on helpstack.io and was able to successfully set up the HelpStackExample with android native based on the instructions provided in the GitHub repository. The only issue is that my company project uses Ionic 3. H ...

The property 'filter' is not recognized on the 'Object' type. An attempt to filter the response was made

Trying to fetch data from a JSON file that matches the player's name in the URL, such as localhost:4200/players/Febiven, should only retrieve information about Febiven. The code is written in Angular 6. The current code snippet is as follows: player ...

What is the best way to save data from a Firebaselistobservable into an array?

I've been attempting to transfer data from Firebase to an array using Angular 2, but I'm facing difficulties in pushing the data into the array. Below is the code snippet: Variables: uid: string = ''; agencyItems: FirebaseListObserva ...