如何正确使用 TypeScript 联合类型？

Question

我在使用基本联合类型时遇到问题，感谢您的帮助！ 构建一个聊天应用程序，其中传入的消息可以具有不同类型的有效负载。 所以我创建了一些有效负载类型，例如：

export interface TextPayload {
  text: string,
}
export interface ImagePayload {
  url: string,
} //etc

为了清楚起见，将它们全部绑定在联合类型中，使用|

export type MessagePayload = TextPayload | ImagePayload | UrlPayload | FilePayload

然后最终的 Message 将其用作有效负载。

export interface IBotMsg {
  payload: MessagePayload  // this creates the problem
}

但是在尝试使用时出现此错误

[0]       TS2459: Type 'MessagePayload' has no property 'text' and no string index signature.

代码在这里使用。 可能它的解构赋值混淆了类型系统......

  const msg: IBotMsg = req.body.msg
  const { payload: { text } } = msg

另一行抛出错误

    let text = msgIn.payload.text

完全错误

[0]
[0] ERROR in ./server/bots/watson/routes/index.ts
[0] [tsl] ERROR in /Users/dc/dev/tix/recobot/stack/backend/server/bots/watson/routes/index.ts(19,22)
[0]       TS2459: Type 'MessagePayload' has no property 'text' and no string index signature.
[0]
[0] ERROR in ./server/bots/watson/routes/index.ts
[0] [tsl] ERROR in /Users/dc/dev/tix/recobot/stack/backend/server/bots/watson/routes/index.ts(40,25)
[0]       TS2339: Property 'text' does not exist on type 'MessagePayload'.
[0]   Property 'text' does not exist on type 'ImagePayload'.
[0]
[0] ERROR in ./server/bots/tix/brain/TixBrain.ts
[0] [tsl] ERROR in /Users/dc/dev/tix/recobot/stack/backend/server/bots/tix/brain/TixBrain.ts(27,30)
[0]       TS2339: Property 'text' does not exist on type 'MessagePayload'.
[0]   Property 'text' does not exist on type 'ImagePayload'.
[0]
[0] ERROR in /Users/dc/dev/tix/recobot/stack/backend/server/bots/testbot/TestBot.ts
[0] [tsl] ERROR in /Users/dc/dev/tix/recobot/stack/backend/server/bots/testbot/TestBot.ts(12,39)
[0]       TS2339: Property 'text' does not exist on type 'MessagePayload'.
[0]   Property 'text' does not exist on type 'ImagePayload'.

这几乎就像编译器只是在 ImagePayload 上中途保释...

联合类型是否意味着属性必须存在于每个成员上，而不仅仅是一个？ 子类型必须是接口的超集？ 在这种情况下，我不太明白这一点。 我也尝试过只使用TextPayload ，例如不是联合类型并得到了类似的错误......困惑。

我也对类型和接口有点困惑。 为什么这不是UnionInterface ？

感谢您提供任何提示。

MS 参考https://www.typescriptlang.org/docs/handbook/advanced-types.html

完整代码

export enum MessageType {
  TEXT = 0,
  IMAGE = 1,
  URL_LINK = 2,
  FILE = 3,
}

export interface TextPayload {
  text: string,
  mention?: string[],
}

export interface ImagePayload {
  url: string,
}

export interface UrlPayload {
  sourceUrl: string,
  title: string,
  summary: string,
  imageUrl: string,
}

export interface FilePayload {
  url: string,
  name: string,
}

export type MessagePayload = TextPayload | ImagePayload | UrlPayload | FilePayload

export interface IBotMsg {
  chatId?: string,
  token?: string,
  messageType?: MessageType
  payload: MessagePayload  // this creates the problem
}

Answer 1

这就是 TypeScript 抛出错误的原因——它实际上试图做得很好，但正确编码可能很棘手（相信我，我去过那里，也去过那里）：

// so let's say we have:
const msg: IBotMsg = ...

// if we write
msg.payload.text // it fails because msg could be equal to {payload:{url:'...'}}
msg.payload.url  // it fails because msg could be equal to {payload:{text:'...'}}
// so TypeScript prevents that and throws an error.

// You have to make clear to TypeScript that you know which properties you expect, either using typegards:
if ('text' in msg.payload) {
    msg.payload.text;
}

// ... or by casting:
const msg2: {payload: TextPayload} = (msg as {payload: TextPayload});
msg2.payload.text; // no error
msg2.payload.url;  // rightful error

在 TS 操场上实时查看此代码