Guide to creating an item with a type that is determined by the arguments of a class constructor

Is there a way to implement an item with its type derived from the arguments of a class constructor in TypeScript? If not, what is the reason behind it?

class Toolbar { 
  constructor(adit: string, options: { container: stirng }) { }
}

type ModudleSetting<T extends object = {}> = [
  { new(adit: string, options: T): any },
  T,
]

function registerMoudle(moduleSetting: ModudleSetting) { 
}

registerMoudle([Toolbar, { a: 'asdasd' }])

I was expecting that the type of { a: 'asdasd' } would be { container: stirng }, but unfortunately it is not.

Answer №1

To achieve the desired outcome, all you have to do is modify your registerModule function to be generic:

function registerMoudle<T extends object = {}>(moduleSetting: ModudleSetting<T>) {}

For a practical example and demonstration, check out this interactive play demo.

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

ESLint is reporting an error of "Module path resolution failed" in a project that includes shared modules

Encountering ESLint errors when importing modules from a shared project is causing some frustration. The issue arises with every import from the shared/ project, presenting the common ESLint import error: Unable to resolve path to module 'shared/hook ...

Concealing the sidebar in React with the help of Ant Design

I want to create a sidebar that can be hidden by clicking an icon in the navigation bar without using classes. Although I may be approaching this incorrectly, I prefer to keep it simple. The error message I encountered is: (property) collapsed: boolean ...

It appears that Yarn is having trouble properly retrieving all the necessary files for a package

Recently, I encountered a strange issue in our project involving 3 microservices, all using the exceljs library. Two of the microservices successfully download all necessary files for this package through yarn. However, the third microservice is missing ...

What methods can be utilized to extend the duration of ngxtoastr's display time?

Is there a way to extend the display duration of ngx-toastr notifications when using toastr.success for success messages fetched from an API? this.toastr.success(this.successMessage); ...

Ways to expand the width of mat-dialog-actions component in Angular 8

Is there a way to make the cancel and save buttons in the dialog window take up the entire available space? If anyone has any suggestions on how to achieve this, please let me know! https://i.sstatic.net/rfQrN.png ...

ViewChild with the focus method

This particular component I'm working on has a hidden textarea by default : <div class="action ui-g-2" (click)="toggleEditable()">edit</div> <textarea [hidden]="!whyModel.inEdition" #myname id="textBox_{{whyModel.id}}" pInputTextarea f ...

The service being injected is not defined

Two services are involved in this scenario, with the first service being injected into the second service like so: rule.service.ts @Injectable() export class RuleService { constructor( private _resourceService: ResourceService ){} s ...

Having difficulty in accessing the node modules

As a C#/C++ programmer new to nodejs, I am looking to incorporate typescript into my code. However, when attempting to import modules like fs or stream, I am encountering the following error: Module not found Interestingly, VisualStudio 2017 is able to ...

Could directly destructure parameters upon typing be an option?

Is there a way to create destructured parameters with optional typing in TypeScript? For instance, I am trying to make the following function callable without requiring any parameters. const func = ({param}: {param?: boolean}) => {}; Currently, TypeS ...

How can I retrieve the value of an array using ngForm in Angular 2?

One concrete example is a component I created that looks like this. @Component({ selector: 'home', template: ` <form (ngSubmit)="onSubmit(f)" #f="ngForm"> <input type="text" ngControl="people"> ...

Unpacking Constructor with visible arguments

In my constructor, I utilize destructuring to simplify the parameters needed to create an object with default values. export class PageConfig { constructor({ isSliding = false }: { isSliding?: boolean; getList: (pagingInfo: PagingInfo) =&g ...

"Exploring the world of TypeScript Classes in combination with Webpack

If I create a TypeScript class with 10 methods and export a new instance of the class as default in one file, then import this class into another file (e.g. a React functional component) and use only one method from the class, how will it affect optimizati ...

Ways to retrieve form data from a dynamic CDKPortalComponent

I have a dynamic cdkportal component that is created from a variety of Components. These components are added to a modal dialog, and I need to determine the validity of the forms within them. If any of the child component forms are invalid, I want to disab ...

Waiting for a function to complete its processing loop in Angular 7

In my code, I'm dealing with an angular entity called Z which has a property that is a list of another entity named Y. My goal is to delete the entity Z, but before doing so, I need to also delete all the Y entities within it. The challenge arises fro ...

A guide on incorporating and utilizing third-party Cordova plugins in Ionic 5

Attempting to implement this plugin in my Ionic 5 application: https://www.npmjs.com/package/cordova-plugin-k-nfc-acr122u I have added the plugin using cordova plugin add cordova-plugin-k-nfc-acr122u but I am unsure of how to use it. The plugin declares: ...

Customizing AxiosRequestConfig with Axios in TypeScript can greatly enhance the functionality and

Currently working with React and Axios. Lately, I've been experimenting with custom configurations in Axios as shown below: import $axios from 'helpers/axiosInstance' $axios.get('/customers', { handlerEnabled: false }) However, wh ...

Error: Angular 4 component failed to load

It seems that the route /users is not functioning as expected; instead of loading the UsersComponent, it loads the AppComponent. Why is the /users route not loading the correct component? Here is a snippet from app.module.ts: import { Brows ...

Universal interface for objects and arrays

In my Typescript function, I have an argument that can either be an array of strings or a custom object. The prototype of the function is as follows: export const myFunction = async (line: string[] | myCustomType, config: any): Promise<String> => ...

Ways to dynamically update a Vuetify 3 element's placeholder text?

Here is the code snippet from my component.vue file: <template> <v-text-field name="Foo" :label="$t('foo')" type="text" hint="This is a hint" persistent-hint >& ...

Deciphering the .vimrc setup for tooltips and symbols in TypeScript

Currently, I have integrated the Tsuquyomi plugin for my typescript development in Vim. The documentation mentions tooltips for symbols under the cursor, which are working fine. The issue arises as I am using terminal-based Vim, and even if I were using a ...