如何为第三方TypeScript泛型方法指定联合类型并解决类型不匹配问题

嘿，我完全懂你遇到的这个头疼问题！这个报错其实是个很容易踩的小坑——你自己定义的Location接口和浏览器环境里内置的Location类型（就是我们常用来获取地址栏信息的window.location对应的那个类型）重名了，TypeScript会优先识别全局的内置类型，所以才会提示你的对象缺少一堆像ancestorOrigins、hash、host这类属性。

那怎么解决呢？给你两个简单可行的方案：

方案一：重命名自定义的Location接口 #

这是最直接省事的办法，把你自己定义的Location改成一个不会和内置类型冲突的名字，比如Place或者LocalLocation：

// 第三方库的方法（无法修改）
function identity<Type>(arg: Type): Type {
  return arg;
}

interface Person {
  name: string;
  age: number;
}

// 重命名接口，避开内置Location
interface Place {
  city: string;
  country: string;
}

// 现在可以正常使用联合类型调用了
identity<Person | Place>({city: 'SA', country: 'USA'})

方案二：用命名空间隔离自定义类型 #

如果你不想改接口名字，也可以把自己的类型放在一个命名空间里，和全局类型做隔离：

// 第三方库的方法（无法修改）
function identity<Type>(arg: Type): Type {
  return arg;
}

// 用命名空间包裹自定义类型
namespace MyCustomTypes {
  export interface Person {
    name: string;
    age: number;
  }

  export interface Location {
    city: string;
    country: string;
  }
}

// 调用时指定命名空间里的联合类型
identity<MyCustomTypes.Person | MyCustomTypes.Location>({city: 'SA', country: 'USA'})

本质上，这个问题的核心就是全局类型冲突，只要把你自定义的Location和内置的那个区分开，联合类型就能正常和第三方的泛型方法配合使用啦。

备注：内容来源于stack exchange，提问作者Munna Babu