Related questions

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

  • Getting rid of Outer Nested Observable Typescript

    I am currently trying to get rid of an Outer Observable. My current code creates an Observable<Observable<any>[]> but I am trying to get an Observable<any>[] type. I've played around with different rxjs operators but couldn't find any that would work. I believe part of my problem is with outer map but I'm not sure how to change that without loosing my inner array.

    So I have this code 

    this.userOrgs = this.db.doc(user_preferences/${user.uid}).valueChanges().pipe(
  map((pref: UserPreferences) => {
    return pref.orgs.map(org => {
      return this.db.doc(organizations/${org}).valueChanges().pipe(
        map((o: Organization) => { return o; })
      );
    });
  })
);

    and this.userOrgs is of type Observable<Organization>[];

  • Is there a way in TypeScript to use an interface as a guard without losing the specificity of the object?

    I have a problem where I am trying to make an interface for shared modules in TypeScript that for the purpose of this question let's assume has the following shape:

    interface A {
  x: string;
  y: { [name: string]: (...args: any) => {type: string; payload?: any} };
  z?: () => any
}

    The purpose of this interface is two-fold:

    1. For the person producing the module, I want them to be able to know that the thing they are creating complies to A.
    2. For the person consuming the module, I want them to be able to have the most specific typing possible.

    For example, if I had:

    const bar = {
  x: 'hello',
  y: { 'world': (a: string, b: number) => ({ type: a, payload: b}) }
}

    Note the lack of reference to interface A.

    If I were to then type: bar. I would get intellisense that it has properties x and y. Even more though, upon typing bar.y. I would get prompted that world exists and the function type associated with it.

    However, if I add in A:

    const bar: A = {
  x: 'hello',
  y: { 'world': (a: string, b: number) => ({ type: a, payload: b}) }
}

    it helps the case of someone accidentally adding a wrong property like:

    const bar: A = {
  iDontBelong: true, // wrong
  x: 'hello',
  y: { 'world': (a: string, b: number) => ({ type: a, payload: b}) }
}

    or even

    const bar: A = {
  x: 5, // wrong
  y: { 'world': (a: string, b: number) => ({ type: a, payload: b}) }
}

    The problem is now if someone were to import bar and type bar. they would get suggestions that are directly for interface A. It loses the knowledge that bar only has x and y (and no z), and it also loses the information about y's specific type meaning it wouldn't even know world existed on y.

    Is there any way to get both of these things to exist at the same time?

  • Filtering ranks using lodash in angular 7

    I have an angular app that displays sample data as below:

    samples = [
    { 'user': 'trump',  'rank': 36, 'active': true },
    { 'user': 'fred',    'rank': 30, 'active': false },
    { 'user': 'luke',  'rank': 47, 'active': true },
    { 'user': 'hillary',    'rank': 44, 'active': false },
    { 'user': 'bernie',  'rank': 36, 'active': true },
    { 'user': 'john',    'rank': 40, 'active': false },
    { 'user': 'pebbles', 'rank': 1,  'active': true }
];

    What I wanted to do is that using lodash to filter rank in the client. I have filter that allows for me to filter ranking greater than or less than. Here are the filters:

    In component.ts:

    .... other necessary codes....
ngOnInit() {
    this.sampleService.loadAllSamples().subscribe(filteredSamples => {
      this.filteredSamples = filteredSamples;
      this.applyFilters();
   });
}

private applyFilters() {
    this.filteredSamples = _.filter(this.samples, _.conforms(this.filters));
}

filterGreaterThan(property: string, rule: number) {
    this.filters[property] = val => val > rule;
    this.applyFilters();
  }

  filterLessThan(property: string, rule: number) {
    this.filters[property] = val => val < rule;
    this.applyFilters();
  }

    In my html template, I have the rank filter which allows me to get the ranks greater than entered value. 

    <input type="number" id="rank" name="rank" [(ngModel)]="rank" (change)="filterGreaterThan('rank', rank)">

    So far, everything works as expected. I have the data with filtered (in this case, greater than) displayed.

    What I wanted to do is that add another filtering just like above. This one should allow me to filter "less than" at the same time like rank range. My problem is that since both filters targets rank value, I am not able to filter ranks from greater than and less than at the same time. Any help will be appreciated!