联合类型在作为道具传递给组件时期望其他类型？

Question

我正在使用带有 React 的 Typescript。

我正在从返回两种类型的 API 检索数据：VirtualMachine 或 Disk。后端负责区分资源类型，根据查询结果返回两者的类型：

requestMoreInfo: (resourceType: string, resourceId: number): AppThunkAction<ResourceActions> => (dispatch, getState) => {
    let fetchResourceInfo = fetch('http://localhost:5004/GetResourceTypeInformation/' + resourceType + '/' + resourceId, {
        method: 'GET'
    })

我已经为我的 Redux 状态声明了一个联合类型：

export interface ResourceState {
    currentResourceInformation?: VirtualMachineInformation | DiskInformation;
}

我随后将响应转换为由传递给函数的资源类型确定的类型，并调度一个操作来更新我的组件状态。这就是我认为我错的地方。

if (resourceType == "Virtual Machine") {
  var vmResponse = response.json() as VirtualMachineInformation;

  dispatch({
    type: 'RECEIVE_RESOURCE_INFO',
    resourceInfo: vmResponse
  });
}
else if (resourceType == "Disk") {
  var diskResponse = response.json() as DiskInformation;
  dispatch({
    type: 'RECEIVE_RESOURCE_INFO',
    resourceInfo: diskResponse
  });
}

TypeScript 似乎对此很满意。但是，我随后尝试渲染子组件并将此更新状态作为道具传递：

private requestResourceInformation = (resourceType: string, resourceId: number) => {
    this.props.requestMoreInfo(resourceType, resourceId);

    if (resourceType == "Virtual Machine") {
        return <VirtualMachineResource virtualMachine={this.props.currentResourceInformation} />
    }
}

这只是用数据映射一个表。

但是，我正在检索错误：

  Type 'VirtualMachineInformation | DiskInformation | undefined' is not assignable to type 'VirtualMachineInformation | undefined'.
    Type 'DiskInformation' is not assignable to type 'VirtualMachineInformation | undefined'.
      Type 'DiskInformation' is not assignable to type 'VirtualMachineInformation'.
        Property 'azureVmId' is missing in type 'DiskInformation

我相信这是因为 TypeScript 仍然将该值视为联合类型，并且预期值存在于 VirtualMachine 类型中，但不存在于 Disk 类型中。

我在哪里做错了？检索数据后是否有明确的方法来声明联合的特定类型？

Answer 1

virtualMachine 属性不接受 DiskInformation 接口作为值 - 这是你的问题。 TypeScript 编译器在编译时不知道该值的确切类型，因此猜测该类型是这三种类型之一：VirtualMachineInformation、DiskInformation、undefined

正如我在 cmets 部分中所写 - 您可以（至少）使用三种解决方案来解决您的问题：

1. 使用类型断言 - https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertions - 你不能在 tsx 文件中使用 <Type>value 语法 return <SomeComponent prop={value as Type}></SomeComponent>

2. 使用类型保护https://www.typescriptlang.org/docs/handbook/advanced-types.html#user-defined-type-guards

   if ([check if type of the value is the Type]) { return [something else] } [TypeScript knows that the value IS NOT an instance of the Type here] return <SomeComponent prop={value}></SomeComponent>

3. 使用重载 - http://www.typescriptlang.org/docs/handbook/functions.html#overloads

   class X { private y(x: "abc"): "cda"; private y(x: "cda"): "abc"; private y(x: string): string { [method logic] } }