TypeScript function whose parameter should accept one of two types

user_7460467 0
Viewed 4332

I am trying to create a function whose parameter can be one of two types. The function then may invoke another function. I am, however, getting an error message. You can see the script and a screenshot below. How do I write this function so that it can accept a parameter with one of two types? Thanks!

interface A {
  a: string;
  title: string,
}

interface B {
  b: number;
  title: string;
}

const alpha = (data: A) => data.a;

const beta = (data: B) => data.b;

const foo = (data: A | B) => {
  if (data.title === 'a') {
    return alpha(data);  // Message: "Argument type A | B is not assignable to type A"
  }
  if (data.title === 'b') {
    return beta(data);  // Message: "Argument type A | B is not assignable to type B"
  }
};

enter image description here

typescript
4 Answers

Try using type assertions (like casting) on the parameter so the compiler (and IDE) treats it as the appropriate type once you've determined which type it is.

interface A {
  a: string;
  title: string,
}

interface B {
  b: number;
  title: string;
}

const alpha = (data: A) => data.a;

const beta = (data: B) => data.b;

const foo = (data: A | B) => {
  if (data.title === 'a') {
    return alpha(<A>data);
  }
  if (data.title === 'b') {
    return beta(<B>data);
  }
};

Type assertions are a way to tell the compiler “trust me, I know what I’m doing.” A type assertion is like a type cast in other languages, but performs no special checking or restructuring of data. It has no runtime impact, and is used purely by the compiler. TypeScript assumes that you, the programmer, have performed any special checks that you need.

user_33110010

The issue is that typescript does not know that title === 'a' means that the type for data is a. Luckily, you can provide a more narrow type instead of string to help typescript with that.

interface A {
  a: string;
  title: 'a' ; // title can now be 'a'  only, not any other string. 
}

interface B {
  b: number;
  title: 'b' ; // title can now be 'b'  only, not any other string. 
}
user_65137230

You need a type guard, something that would tell TS that A objects have their title equal to a, and B objects - to b:

const isA = (x: A | B): x is A => x.title === 'a';
const isB = (x: A | B): x is B => x.title === 'b';

and then:

const foo = (data: A | B): any => {
  if (isA(data)) {
    return alpha(data);
  }
  if (isB(data)) {
    return beta(data);
  }
};

A better option would be to make your discriminating value (a and b) a type rather than a string:

interface A1 {
  a: string;
  title: 'a',
}

interface B1 {
  b: number;
  title: 'b';
}

Then you can simply use switch, which acts as type guard:

const foo1 = (data: A1 | B1): any => {
  switch (data.title) {
    case 'a': return alpha(data);
    case 'b': return beta(data);
  }
};

Docs

PG

user_9891210

Please use any.

const foo = (data: any) => {
  if (data.title === 'a' && checkA(data)) {
    return alpha(data);
  }
  if (data.title === 'b' && checkB(data)) {
    return beta(data);
  }
};

And check interface type by creating your own function.

function checkA(obj: any) {
    return 'a' in obj;
}
function checkB(obj: any) {
    return 'b' in obj;
}
user_89327150
Related