Understanding how to infer type from the arguments of a class constructor in Typescript

Is there a way to reuse the argument type definition of a class constructor without refactoring or extracting it from the class itself? I have tried using GetProps<TBase>, but it doesn't work as expected. In the example below, the const bp definition should throw an error because it is missing the derp field which is defined in the constructor.

type GetProps<TBase> = TBase extends new (props: infer P) => any ? P : never

class Bro {
    bro: string = 'cool'
    cool: string = 'lol'
    constructor(props: {bro: string, cool: string, derp: string}){   
        this.bro = props.bro;
        this.cool = props.cool;
    }
}

const bp : GetProps<Bro> = {
    bro: 'lol',
    cool: 'wut'
};

Answer №1

One useful feature TypeScript offers is the

ConstructorParameters<Type>
utility type.

For a hands-on experience, check out this code snippet on TS Playground.

const bp: ConstructorParameters<typeof Bro>[0] = {
/*    ^^
Property 'derp' is missing in type '{ bro: string; cool: string; }'
but required in type '{ bro: string; cool: string; derp: string; }'.(2741) */
  bro: 'lol',
  cool: 'wut'
};

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

Transforming the timestamp to a date object using Angular and Typescript

As a newcomer to Angular 2.0, I've been delving into new concepts in order to grasp it better. However, despite encountering this common issue multiple times and reading through various solutions, I haven't been able to find the answer to my prob ...

What is preventing me from including an additional parameter in a function in TypeScript?

I am currently developing a task management application. I am facing an issue while attempting to incorporate the event and items.id into a button function for actions like delete, edit, or mark as completed. While this functionality works smoothly in pla ...

Utilizing a JSDoc comment from an external interface attribute

Currently, I am in the process of developing a React application. It is common to want the props of a child component to be directly connected to the state of a parent component. To achieve this, I have detailed the following instructions in the interface ...

TypeScript - Identifier 'process' is not defined

After setting up a new npm project using npm init, I made sure to have typescript and ts-node globally installed. Additionally, I added @types/node to my devDependencies. However, despite these preparations, I encountered an issue stating "Cannot find name ...

Preventing Firebase duplicates leads to the error of not being able to read the property 'apps'

Struggling to incorporate Firebase into a TypeScript/NextJS project, I have encountered difficulties. Despite successfully importing and initializing the app: import * as firebase from "firebase/app"; import { collection, getDocs } from "fir ...

Generate an Observable<boolean> from a service function once two subscriptions have successfully completed

I am working on setting up a simple method to compare the current username with a profile's username in an Angular service. It is necessary for the profile username and user's username to be resolved before they can be compared. How can I create ...

Encountering a timeout error when trying to test the video element with Jest

My function extracts meta data such as width and height from a video element in the following code snippet: export async function getVideoMetadata( videoBlobUrl: string, videoElement: HTMLVideoElement, ): Promise<{ width: number; height: number }> ...

The @Input directive is not compatible with the OnPush change detection strategy

page.html <app-parcel-delivery-cost-promo [parcelDeliveryCost]="parcelDeliveryCost"> </app-parcel-delivery-cost-promo> page.ts changeDetection: ChangeDetectionStrategy.OnPush, parcelDeliveryCost: Partial<ParcelDeliveryCostModel>; ...

unable to connect a value with the radio button

I am struggling to incorporate a radio group within a list of items. I am facing difficulty in setting the radio button as checked based on the value provided. Can anyone provide me with some guidance? Here is the HTML code snippet: <div *ngFor=" ...

The npm build command is triggering an error message that reads "Allocation failed due to ineffective mark-compacts near heap limit."

I'm currently working on a ReactJS/TypeScript project on Windows 10. I've been running into issues when trying to build my TypeScript scripts using the following command: "rimraf ../wwwroot/* && react-scripts-ts build && copyfi ...

Did the IBM MobileFirst client miss the call to handleFailure?

I am currently utilizing the IBM MFP Web SDK along with the provided code snippet to send challenges and manage responses from the IBM MobileFirst server. Everything functions properly when the server is up and running. However, I have encountered an iss ...

The error message "Type 'string[]' does not match type 'string' in NestJS" indicates a type mismatch between a string array and a single

I am attempting to download a file by utilizing an external API in NestJS. Here is the snippet of code from my service: import { Injectable } from '@nestjs/common'; import * as fs from "fs"; import * as axios from "axios"; @Injectable() export cl ...

Assigning initial value to a BehaviorSubject in an Angular application

I'm still getting the hang of Rxjs. How do I go about initializing the first value of a BehaviorSubject with data from a custom select box model? Here's what the model looks like: private mainRangeDate: any = {beginDate: {year: 2018, mon ...

Tips for managing various potential return types in TypeScript?

In my research on the topic, I came across a discussion thread about obtaining the local IP address in Node.js at Get local IP address in Node.js. In that thread, there is a code snippet that I would like to incorporate: import net from 'net'; c ...

Executing vitest on compiled javascript files

Currently facing issues running vitest on compiled JavaScript. Numerous errors are appearing, such as: TypeError: Cannot read properties of undefined (reading 'spyOn') TypeError: Cannot read properties of undefined (reading 'mock') and ...

Getting event properties in a React component using the rest operator: A comprehensive guide

Can someone please assist me? I am new to TypeScript and struggling with how to use event props in my component. I have defined two props and need all my events as rest props. I encountered an error when trying to use my component with onClick event. The ...

Access the raw data value of the parent node using the "val()" method from a child reference within Cloud Functions for Realtime Database

Suppose I'm indicating a path in my TypeScript/JavaScript code function like this: exports.sendNotification = functions.database.ref('shops/countries/{countryName}/shopAddress/{currentShopAddress}') .onWrite((snapshot,context) => { ...

Strategies for preventing profanity in Typescript within Nuxt 2 implementation

implement user authorization functionality create the Auth class for authentication handling import type { Context } from '@nuxt/types'; export class Auth { public ctx: Context; constructor(ctx: Context) { t ...

Exploring an object to retrieve values based on keys using javascript

Currently, I have an array of objects set up like this: https://i.sstatic.net/l6d3z.png My goal is to loop through the array and extract users based on a specific roomCode So, I've attempted two different approaches: for(let i=0; i <data. ...

Does anyone know of a custom typeguard that enforces the presence of elements in an array?

I need help creating a custom type guard to determine if an array contains nullable or optional elements. I have defined a helper type called RequiredArray: type RequiredArray<A extends readonly any[]> = A extends [infer P, ...infer R] ? [Non ...