typescript - 为什么我的 TypeScript 报告联合类型的错误？

Question

我有:

type: 'WEBSOCKET' | 'HTTP_STREAM';
connection: WebSocketType | HTTPStreamType;

在哪里:

interface Header {
  key: string;
  val: string;
}

export interface WebSocketType {
  websocketUrl: string;
}

export interface HTTPStreamType {
  streamUrl: string;
  method: 'get' | 'put';
  headers: Header[];
}

我正在努力:

        if (newStream.type === 'WEBSOCKET') {
          if (newStream?.connection?.websocketUrl?.length > 0) {
            return setIsNextDisabled(false)
          }
        }

但我得到的错误是:

Property 'websocketUrl' does not exist on type 'WebSocketType | HTTPStreamType'.
  Property 'websocketUrl' does not exist on type 'HTTPStreamType'.

我以为 guard会工作，但它不会。

Answer 1

我假设你有类似的东西:

interface MyData {
    type: 'WEBSOCKET' | 'HTTP_STREAM';
    connection: WebSocketType | HTTPStreamType;
}

根据这个界面，你可以有一个 type的 WEBSOCKET和 connection的HTTPStreamType .你在任何地方都没有保证每个工会的成员之间有任何联系。 type和 connection都可以是工会的任何一个成员。

这就是为什么 typescript 认为你的 guard 没有帮助的原因。

相反，您需要一种不同的联合:

type MyData = {
    type: 'WEBSOCKET';
    connection: WebSocketType;
} | {
    type: 'HTTP_STREAM';
    connection: HTTPStreamType;
}

这种类型表示 MyData可以是类型 WEBSOCKET与 WebSocketType连接，也可以是类型 HTTP_STREAM与 HTTPStreamType联系。但它永远不能混合第一个属性和第二个属性。

现在 typescript 可以推断出对其中一个属性的检查允许知道另一个属性类型。

Playground使用通过类型检查的代码。

通过一些重构，您可以避免重复公共(public)属性 like so .

interface MyCommonData {
    foo: string
    bar: number
}

interface WebSocketData extends MyCommonData {
    type: 'WEBSOCKET'
    connection: WebSocketType
}

interface HttpStreamData extends MyCommonData {
    type: 'HTTP_STREAM';
    connection: HTTPStreamType;
}

type MyData = WebSocketData | HttpStreamData