描述参数的泛型类型，可以是少数类型之一

Question

This question mainly comes from my previous one on this topic: Declare a custom type for logical argument

Here an example:

interface ProductType1 {
  id: string;
}

interface ProductType2 {
  productId: string
}

function getId(product: ???): string {
  return product.id || product.productId || string
}

The idea behind this is straight forward: You can pass an object of a type ProductType1 or ProductType2 or a product id itself ( string )

I was trying to do something like:

type ProductAsArgument = ProductType1 | ProductType2 | string

or

interface Product {
  id: string;
  productId: string;
}

or

interface Product {
  id?: string;
  productId?: string;
}

But as you might guess none of this worked since one of the properties never exist on one of the union types ( ProductType1 , ProductType2 , string )

I believe my go-to option is to create some kind of a smart generic that will inherit a <T> and will know, that <T> can be either on of the types I mentioned above. I might be wrong here but it looks like to me that generic can solve this issue.

I found some interesting approaches here How to make one generic type closely dependent on another in TypeScript? but still don't understand how to apply it on my case

Answer 1

Can you use classes instead of interfaces? In which case you can do something like this, although it would be cleaner to use inheritance for the ProductType classes:

Using Classes

class ProductType1 {
  id: string = '1';
}

class ProductType2 {
  productId: string = '2';
}

type ProductOrString = ProductType1|ProductType2|string;

function getId(product: ProductOrString): string {
  if (product instanceof ProductType1)
    return product.id;
  else if (product instanceof ProductType2)
    return product.productId;
  else if (typeof product === 'string')
    return product;
  else
    return 'Error in getId(): Unexpected type';
}

let prod1 = new ProductType1();
let prod2 = new ProductType2();
let prod3 = '3';

console.log(`prod1 ID is ${getId(prod1)}`);
console.log(`prod2 ID is ${getId(prod2)}`);
console.log(`prod3 ID is ${getId(prod3)}`);

TS Playground link

Alternatively, using interfaces:

Using Interfaces

interface ProductType1 {
  id: string;
}

interface ProductType2 {
  productId: string;
}

type ProductOrString = ProductType1|ProductType2|string;

function getId(product: ProductOrString): string {
  if (typeof product === 'string')
    return product;
  else
  if ('id' in product)
    return product.id;
  else if ('productId' in product)
    return product.productId;
  else
    return 'getId(): Unexpected type';
}

let prod1 = { id: '1' };
let prod2 = { productId: '2' };
let prod3 = '3';

console.log(`prod1 ID is ${getId(prod1)}`);
console.log(`prod2 ID is ${getId(prod2)}`);
console.log(`prod3 ID is ${getId(prod3)}`);

Answer 2

Another solution using generics:

type Nullish<T> = T|null|undefined;
type ObjOrStr<T> = T|string;

abstract class BaseProduct
{
    id: Nullish<string>;
    productId: Nullish<string>;
}

class Product1 extends BaseProduct
{
    id: string = 'id1';
}

class Product2 extends BaseProduct
{
    productId: string = 'productId2';
}

class SomeClass
{
    getProductId<T extends BaseProduct>(product: ObjOrStr<T>)
    {
        if (typeof product === 'string')
            return product;
        else
            return product.id || product.productId;
    }

    someMethod<T extends BaseProduct>(product: ObjOrStr<T>)
    {
        const productName = this.getProductId(product);

        return productName;
    }
}

let prod1 = new Product1();
let prod2 = new Product2();
let prod3 = 'string3';
let sc = new SomeClass();

console.log(`prod1 id = ${sc.someMethod(prod1)}`);
console.log(`prod2 id = ${sc.someMethod(prod2)}`);
console.log(`prod3 id = ${sc.someMethod(prod3)}`);

TS playground link

Answer 3

I'm not going to directly answer your question. But for this type of problem

You can pass an object of a type ProductType1 or ProductType2 or a product id itself (string).

I will have gone in the direction of functions overriding.

function getId(productId: string): string
function getId(product: ProductType1): string
function getId(product: ProductType2): string
function getId(product: string | ProductType1 | ProductType2): string {
  if (typeof product === "string")
    return product;
  else if (product instanceof ProductType1)
    ...
}

Answer 4

All you need to do is type them

interface ProductType1 {
  id: string;
}

interface ProductType2 {
  productId: string
}

function getId(product: ProductType1 | ProductType2 | string): string {
  return (product as ProductType1).id || (product as ProductType2).productId || product as string
}

You can also choose to do typeof product == 'ProductType1' if statements..