Typescript 根据字符串区分 object 中的联合

Question

我最初认为我的问题可以通过条件类型来解决，但经过进一步检查，似乎有区别的联合对我的情况更有效。

这些示例非常接近我想要的，但我仍然对如何在我的真实示例中实现它感到困惑。

假设我有一个界面，在这种情况下，它是我使用 Passport.js 登录后返回的数据：

export interface UserInterface {
  id: number
  username: string
  photos: {
    values: string
  }[]
  provider: 'twitter' | 'github'
  _json: TwitterProfileInterface | GithubProfileInterface
}

在上面， id 、 username和photos都是可以互换的。 但是， _json的类型取决于provider的值。 因此，如果provider是twitter ，那么_json将是TwitterProfileInterface 。

有没有什么办法可以用 Typescript 自动完成？

编辑：示例代码：

我正在运行一个 switch 语句来检查我收到的用户配置文件类型：

const user = {
  id: 1,
  username: "User",
  photos: [],
  provider: "twitter",
  _json: {
    // a bunch of data specific to the "twitter" provider
  }
};

switch(user.provider){
  case 'twitter':
    // this case will give types from both TwitterProfileInterface and GithubProfileInterface
    break;
  case 'github':
      // this case will give types from both TwitterProfileInterface and GithubProfileInterface
    break;
}

即使我有一个 switch 语句，但我用于 switch 的值包含在TwitterProfileInterface和TwitterProfileInterface之外，那么这两种情况都将包括这两种类型，从而使我的类型毫无意义。

Answer 1

使用条件类型和参数，如下所示：

interface TwitterProvider { foo: number }
interface GithubProvider { foo: string }

export type UserInterface<P extends 'twitter' | 'github'> = {
  id: number
  username: string
  photos: {
    values: string
  }[]
  provider: P
  _json: P extends 'twitter' ? TwitterProvider : P extends 'github' ? GithubProvider : {}
}

let foo: UserInterface<'twitter'> = {
  id: 1,
  username: 'foo',
  photos: [{values: 'foo'}],
  provider: 'twitter',
  _json: { foo: 1 }
}

现场互动示例