How to Extract the Specific Parameter Type from a Function in Typescript

After generating a client for an API using typescript-node, I encountered the following code:

export declare class Api {

    getUser(username: string, email: string, idType: '1298' | '2309' | '7801')

}

I need to access the type of the third parameter without having to define '1298' | '2309' | '7801' again in my application.

To achieve this, I used the following approach: 

type idType = Parameters<Api['getUser']>[2];

However, I am not completely satisfied with this solution and would prefer to use the key 'idType' instead of its position as a parameter. Is there a way to accomplish this?

Any help or insights on this matter would be greatly appreciated. Thank you.

typescript

Answer №1

The current approach you are using is correct. I will now provide an alternative solution that involves some modifications for improved readability of the code structure.

function getUser(username: string, email: string, idType: '1298' | '2309' | '7801') { }

// Create utility types to enhance readability
type ArgName = 'first' | 'second' | 'third'
type ArgNum<T extends ArgName> =
    T extends 'first' ? 0 :
    T extends 'second' ? 1 :
    T extends 'third' ? 2 :
    0

type ArgumentType
    <F extends (...a: any) => any, N extends ArgName> =
    Parameters<F>[ArgNum<N>]

type A = ArgumentType<typeof getUser, 'third'>; // '1298' | '2309' | '7801'

In this modified version, we use descriptive keys instead of numeric values for better understanding. This can be especially useful for functions with multiple parameters where extending the keys is possible.

For your specific scenario, the implementation would appear as follows:

type IdType = ArgumentType<Api['getUser'], 'third'>; // '1298' | '2309' | '7801'

Answer №2

declare module Api {

    getProfile(firstName: string, lastName: string, userType: UserType)

}

export type UserType = 'student' | 'teacher' | 'administrator';

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

TypeScript failing to recognize dependency for LitElement

Currently, I am encountering an issue with importing two lit elements in my project, namely RootElement and CustomElement. The problem arises when trying to import CustomElement, which unlike RootElement does not show up properly on the UI. My attempt to i ...

typescriptwebpacklit

What is the contrast between element.getAttribute() value and a String in protractor?

When using protractor and typescript, I need to verify that the text saved in a textbox matches a certain string by comparing it with the resulting value of element.getAttribute("value"). Unfortunately, getText() does not work for this scenario b ...

typescriptseleniumselenium-webdriverautomated-testsprotractor

Exploring i18nNext integration with antd table in React

Presently, this is the UI https://i.stack.imgur.com/CMvle.png App.tsx import "./styles.css"; import MyTable from "./MyTable"; export default function App() { const data = [ { key: "1", date: "2022-01- ...

javascriptreactjstypescriptantdi18next

Unable to locate component property

When passing props to my component that link to storybook, I encountered an issue where the object I pass in does not map, resulting in the error message: "TypeError: data.map is not a function". I realized that my object is not actually an &qu ...

reactjstypescriptnext.jsstorybook

Leveraging the power of react-hook-form in combination with the latest version 6 of @mui

When using MUI v5 date pickers, I utilized the following method to register the input with react-hook-form: <DatePicker ...date picker props renderInput={(params) => { return ( <TextField {...params} ...

reactjstypescriptmaterial-uidatepickerreact-hook-form

Why bother specifying types when extending tsconfig?

Having an angular app that utilizes @types and custom typings, I am facing an issue where the app works when served but encounters errors during testing with ng test. It is puzzling to me why this discrepancy exists, and I am struggling to comprehend the r ...

angulartypescripttsconfig

Troubleshooting: Issues with Angular 2 Dependency Injection

I am facing an issue with my angular2 application that involves a simple dependency injection, but it seems to be not working correctly. Can anyone help me figure out what might be missing? Below is the error message I am encountering: EXCEPTION: Cannot ...

dependency-injectiontypescriptangular

Metronome in TypeScript

I am currently working on developing a metronome using Typescript within the Angular 2 framework. Many thanks to @Nitzan-Tomer for assisting me with the foundational concepts, as discussed in this Stack Overflow post: Typescript Loop with Delay. My curren ...

javascriptloopsangulartypescriptdelay

Issue encountered with JavaScript function within TypeScript file connected to HTML code

I am currently working on a simple SharePoint web part and encountering an issue with using a function from another module file in my main file. Snippet from the JSFunctions.module.js file (where I define my function): function getApi(){ [my code]... }; ...

javascripthtmltypescript

Utilizing Angular 9's inherent Ng directives to validate input components within child elements

In my current setup, I have a text control input component that serves as the input field for my form. This component is reused for various types of input data such as Name, Email, Password, etc. The component has been configured to accept properties like ...

javascripthtmlangulartypescriptforms

Having trouble getting Jest to manually mock in Nestjs?

When setting up a mock service like this: // /catalogue/__mock__/catalogue.service.ts export const CatalogueService = jest.fn().mockImplementation(() => { return { filterRulesFor: jest.fn().mockImplementation((role: Roles): Rule[] => rules.filt ...

typescriptunit-testingjestjsmockingnestjs

Tips for updating the icon based on the active or inactive status in ag-grid within an angular application

HTML* <ng-template #actionButtons let-data="data"> <div class="cell-actions"> <a href="javascript:;" (click)="assign()"> <i nz-icon nzType="user-add" nzTheme= ...

javascriptangulartypescriptag-grid

Using TypeScript in conjunction with Node.js

I'm currently trying to use typescript with nodejs, but I keep encountering errors. Can anyone help me troubleshoot? Here is the code snippet (assuming all necessary modules are imported): import routes from "./routes/routes"; let app = express(); ap ...

node.jstypescriptexpress

Performing a series of HTTP requests within a single @ngrx/effect

I need some guidance as I am new to @ngrx and feeling a bit lost in understanding how it should be used. Let's assume we have an effect named PlaceOrderEffect In this effect, my goal is to handle each request in a specific order. processOrder$ = cre ...

angulartypescriptrxjsngrxangular12

What is the best way to create a fixed array of unchangeable objects?

I am trying to create a class that requires an array of objects as one of its constructor parameters, with the condition that neither the array nor the objects in it can be modified. My current approach involves using the readonly modifier along with the g ...

typescript

Accessing the various types within a monorepo from a sibling directory located below the root folder

Seeking assistance in resolving a referencing types issue within a TypeScript monorepo project. Unsure if it is feasible given the current setup. The project structure is as follows: . ├── tsconfig.json ├── lib/ │ └── workers/ │ ...

node.jstypescriptnpm

The firebase-admin module encounters compatibility issues with middleware due to the OS Module

I'm facing a major issue with my API implementation. I am working on integrating an authentication and verification middleware, but the problem arises when using firebase-admin due to its dependencies on Edge Runtime modules that are incompatible with ...

typescriptfirebasenext.jsfirebase-adminnext.js13

Creating a countdown clock in Angular 5

I am currently working with Angular 5. Is there a way to initiate a timer as soon as the 'play' button is clicked, in order to track the elapsed time since the click? Additionally, I am interested in learning if it's feasible to pause the ...

angulartypescripttimerangular5

Having trouble linking the date object with the default value of the date input field

Exploring how to set the default value of a date type input using property binding. Initially, I attempted to create a new date object in app.component.ts and then bind the [value] attribute of the date input to the currentDate property within app.compone ...

angulartypescriptecmascript-6formsangular-forms

React TypeScript - Issue with passing props to Hooks causing type errors

I have set up a codesandbox project to demonstrate my problem 1) Initially, I created the <Input> component for styling and tracking input content. 2) While everything was functional, adding more forms prompted me to create a useInput hook for easi ...

reactjstypescriptreact-hookstypescript-typingsreact-props