Is there ArgumentsType<T> like ReturnType<T> in Typescript?

2018-07-12 07:22 Joon imported from Stackoverflow

ReturnType<T> extracts return type of a function.

Is there a way to define ArgumentsType<T> that extracts parameter types of a function in tuple format?

For example,

ArgumentsType<(a: number, b: string) => boolean> will be [number, string].

2 answers

answered 2018-07-12 07:45 Cerberus

There is no way for now to extract both the types and amount of arguments for any function possible. But you can try something like this:

type ArgumentTypes<T> = T extends () => any ? never[] :
                        T extends (a1: infer T1) => any ? [T1] :
                        T extends (a1: infer T1, a2: infer T2) => any ? [T1, T2] :
                        // continue here for any reasonable number of args
                        never;

Check it with the following:

const args0: ArgumentTypes<() => boolean> = []; // correct
const args1: ArgumentTypes<(a: number) => boolean> = [1]; // correct
const args2: ArgumentTypes<(a: number, b: string) => boolean> = [1, 'str']; // correct

const oops0null: ArgumentTypes<() => boolean> = null; // error, arguments are array (but empty one)
const oops01: ArgumentTypes<() => boolean> = [1]; // error, arguments must be empty

const oops10: ArgumentTypes<(a: number) => boolean> = []; // error, we need one argument
const oops12: ArgumentTypes<(a: number) => boolean> = [1, 2]; // error, we need only one argument
const oops1wrong: ArgumentTypes<(a: number) => boolean> = ['str']; // error, argument must be number

const oops21: ArgumentTypes<(a: number, b: string) => boolean> = [1]; // error, we need two arguments
const oops23: ArgumentTypes<(a: number, b: string) => boolean> = [1, 'str', undefined]; // error, we need only two arguments
const oops2wrong: ArgumentTypes<(a: number, b: string) => boolean> = ['str', 1]; // error, arguments are reversed

Note that this don't have any use of optional arguments - they are just omitted from the output. I wasn't able to find a way to catch them for now.

answered 2018-07-12 07:48 Titian Cernicova-Dragomir
While this is not possible in the current version of typescript (2.9) without spelling out all parameters. It will become possible in the next version of typescript (3.0) which will be released in the next few days:
```
type ArgumentsType<T> = T extends  (...args: infer U) => any ? U: never;

type argsEmpty = ArgumentsType<() => void> // []
type args = ArgumentsType<(x: number, y: string, z: boolean) => void> // [number, string, boolean]
type argsOpt = ArgumentsType<(x: number, y?: string, z?: boolean) => void> // [number, (string | undefined)?, (boolean | undefined)?]
```
If you install npm install typescript@next you can already play with this, it should be available sometime this month.

Note

We can also spread a tuple into arguments with this new feature:
```
type Spread<T extends any[]> = (...args: T)=> void;
type Func = Spread<args> //(x: number, y: string, z: boolean) => void
```
You can read more about this feature here

See also questions close to this topic

How to use UI extension for Cytoscape.js in Typescript?

Is it possible use Cytoscape UI extensions in Typescript? Layout extension can be used but when I need for example https://github.com/cytoscape/cytoscape.js-cxtmenu, I cant call function cy.cxtmenu( defaults ) because it isnt in cytoscape interface. Is there a way to use it?

My code in index.ts:

import cytoscape = require('cytoscape');
import contextMenus = require('cytoscape-cxtmenu');
cytoscape.use(contextMenus);

const cy = cytoscape({
    container: document.getElementById('cy'),
    ...
});
let defaults = {
     menuRadius: 100, 
     selector: 'node',
    //...
};

let menu = cy.cxtmenu( defaults );

To index.d.ts I add this declare:

declare module 'cytoscape-cxtmenu' {
    const ext: cytoscape.Ext;
    export = ext;
}

In console during transpilation I get this:

ERROR in [at-loader] ./src/index.ts:152:17
    TS2339: Property 'cxtmenu' does not exist on type 'Core'.

AngularFire2 - Ionic - Cannot read property of undefined

The HTML is throwing an undefined error as if the data isn't retrieved. This is my service call to a Firebase list:

Service.ts

 getGames(eventId) {
    var ref =  this.afd.list('/game/', ref => ref.orderByChild('event').equalTo(eventId)).valueChanges();

    return ref;

}

My page.ts

currentEvent: any;
 gamesList: any[];
constructor(public navCtrl: NavController, public navParams: NavParams, public 
firebase: FirebaseProvider) {
 this.currentEvent = navParams.get('data');
 this.firebase.getGames(this.currentEvent).subscribe((val: any) => {
   val.forEach((e) => {

    console.log("date " + e.date);
  })

  this.gamesList = val;
})

}

In the foreach statement, i see the data correctly in the log. It throws an error on the html, even though it looks like the "gamesList" is populated.

page.html

 <ion-list>
  <ion-list-header>Games</ion-list-header>
   <ion-item ngFor="let g of gamesList">
     {{g.date}}
   </ion-item>
 </ion-list>

Thanks for the help!

onbeforeunload not working inside react component
I have a simple react-component where a user can edit data. As the values that may be changed could take some time I want to ask the user to confirm when leaving the page in case of unsaved changes.

In the component's constructor I call:
```
window.addEventListener("beforeunload", this.handleWindowBeforeUnload);
```
I also tried
```
window.onbeforeunload = this.handleWindowBeforeUnload;
```
The handleWindowBeforeUnload looks like this:
```
private handleWindowBeforeUnload = (ev: BeforeUnloadEvent): string => {
    return "Unsaved changes. Are you sure?";
}
```
However, setting a breakpoint will hit. But nevertheless there is no prompt showing that leaving may be dangerous. Also tried with latest Firefox but nothing happened. As stated on MDN I also tried
```
// Cancel the event as stated by the standard.
e.preventDefault();

// Chrome requires returnValue to be set.
e.returnValue = '';

// return something to trigger a dialog
return null; // ''; // "Do something"
```
Still nothing happens. What am I doing wrong here?

Related questions

Is there ArgumentsType<T> like ReturnType<T> in Typescript?

2 answers

See also questions close to this topic