How to type function signature and array with that same structure using one type

Question

I have the following situation

type fnArgs = [string, number];

function test(a: string, b: number): void {}

const x: fnArgs = ['a', 2];

test(...x);

What I have is that the values passed to function test come from an array x (demo). The nice thing is that Typescript can figure out that the structure of the array matches the function signature in combination with the spread operator.

My quetion now is, can I use type fnArgs for the function signature as well? Because I have to define string, number twice.

Karol Majewski · Accepted Answer · 2020-07-25 14:56:50Z

1

Destructure your tuple inline:

function test(...[a, b]: fnArgs): void {}

You can also do this:

function test(...args: fnArgs): void {}

answered Jul 25, 2020 at 14:56

Karol Majewski

26.2k9 gold badges53 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

T.J. Crowder · Accepted Answer · 2020-07-25 14:47:31Z

1

Like this:

function test(a: fnArgs[0], b: fnArgs[1]): void {}
// −−−−−−−−−−−−−−^^^^^^^^^−−−−−^^^^^^^^^

Playground link

It's a bit repetitive, but at least if you change fnArgs' elements' types that change will be reflected in the function signature.

Just FWIW, you can do the same sort of thing when the type is an interface. For instance, if you have a function that retrieves something from somewhere by id:

interface Foo {
    id: string;
    // ...other fields here
}

function makeFoo(id: Foo["id"]): Foo {
    // ...
}

(Note: Foo.id won't work, it has to be the brackets form with quotes.)

If id gets changed from string to number, that change will be reflected in the function's signature.

edited Jul 25, 2020 at 14:47

answered Jul 25, 2020 at 14:36

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Collectives™ on Stack Overflow

How to type function signature and array with that same structure using one type

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related