Create a union function types in TypeScript

Question

I'm trying to create a union type for arrow functions.

type ItemType = {
  createTime: number;
  totalTime: number;
  text: string;
};

type ObjType = {
  callback: ((item: string) => void) | ((item: ItemType) => void);
}

let obj: ObjType = {
  callback: (item: string) => {
    console.log(item)
  }
}

So far it works well.

And then I am going to call the function.

obj.callback('text');

It shows an error

Argument of type 'string' is not assignable to parameter of type 'string & ItemType'.
  Type 'string' is not assignable to type 'ItemType'.

The type of callback became (item: string & ItemType) => void.

Playground link

What am I doing wrong?

Thx for your comments. I found out it works on playground but it doesn't on my vscode. The type of callback becomes (item: string & ItemType) => void. I have no idea what is happening. — augustine
– augustine, Commented Feb 18, 2022 at 16:57
This is why you have an intersection of both arguments catchts.com/react-props#first — captain-yossarian from Ukraine
– captain-yossarian from Ukraine, Commented Feb 18, 2022 at 18:15
@captain-yossarian - I had that suspicion -- but only after it didn't work. :-D — T.J. Crowder
– T.J. Crowder, Commented Feb 18, 2022 at 18:43
@T.J.Crowder usualy people are getting Argument of type XXX is not assignable to parameter of type 'never'. If you see this error in the question it is 90% that OP has union of functions — captain-yossarian from Ukraine
– captain-yossarian from Ukraine, Commented Feb 18, 2022 at 19:02

T.J. Crowder · Accepted Answer · 2022-02-18 17:57:39Z

2

If ObjType has both possibilities, an object implementing it would have to implment both possibilities to be a valid ObjType. If obj is going to have only one version of the callback and not the other, I think you need to make ObjType generic and accept a type parameter saying which it will be, like this:

type ItemType = {
    createTime: number;
    totalTime: number;
};

type ObjType<Item extends string | ItemType> = {
    callback: (item: Item) => void;
};

let obj1: ObjType<ItemType> = {
    callback: (item) => {
        console.log(item);
    },
};
obj1.callback({createTime: 0, totalTime: 0});

let obj2: ObjType<string> = {
    callback: (item) => {
        console.log(item);
    },
};
obj2.callback("example");

Playground link

answered Feb 18, 2022 at 17:57

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

Collectives™ on Stack Overflow

Create a union function types in TypeScript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related