打字稿联合类型不会抛出错误

Question

因此，类型定义：

// type definitions

class GenericDto {
  public ids: string[] = [];
  public dateFrom: string | null = null;
  public dateTo: string | null = null;
}

class FleetInformationDto extends GenericDto { }
class VehicleInformationDto extends GenericDto { }

enum ReportQueueAction {
  GENERATE
}

enum ReportQueueType {
  VEHICLE_INFORMATION,
  FLEET_INFORMATION
}

type ReportQueue = {
  action: ReportQueueAction;
  type: ReportQueueType.FLEET_INFORMATION;
  dto: FleetInformationDto
} | {
  action: ReportQueueAction,
  type: ReportQueueType.VEHICLE_INFORMATION,
  dto: VehicleInformationDto;
}

和实施：

// implementation
const dto: FleetInformationDto = {
  ids: ["1", "2"],
  dateFrom: '2021-01-01',
  dateTo: '2021-02-01'
}

const queueData: ReportQueue = {
  action: ReportQueueAction.GENERATE,
  type: ReportQueueType.FLEET_INFORMATION,
  dto: dto
}

// ^ works as expected

但是如果我们将“VehicleInformationDto”添加到类型 FLEET_INFORMATION 它不会抛出错误

const dto2: VehicleInformationDto = {
  ids: ["1", "2"],
  dateFrom: '2021-01-01',
  dateTo: '2021-02-01'
}

const queueData2: ReportQueue = {
  action: ReportQueueAction.GENERATE,
  type: ReportQueueType.FLEET_INFORMATION,
  dto: dto2 // <-- no error thrown here
}

好吧，这里有什么问题？我错过了什么吗？

问题：为什么我可以在 queueData2 中将 VehicleInformationDto 分配给 dto 而打字稿期望它是 FleetInformationDto？

编辑：好的，是的，这是因为它们共享相同的属性，那么，我该如何添加检查呢？

Playground

Answer 1

打字稿是 structurally typed, not nominally typed。这意味着就 Typescript 而言，这些是相同类型：

class FleetInformationDto extends GenericDto { }
class VehicleInformationDto extends GenericDto { }

虽然我认为这绝对是向 Javascript 这样的语言添加静态类型的正确选择，在这种语言中，对象是一堆属性，但它可能会导致一些微妙的陷阱：

interface Vec2 {
  x: number
  y: number
}

interface Vec3 {
  x: number
  y: number
  z: number
}

const m = { x: 0, y: 0, z: "hello world" };
const n: Vec2 = m; // N.B. structurally m qualifies as Vec2!
function f(x: Vec2 | Vec3) {
  if (x.z) return x.z.toFixed(2); // This fails if z is not a number!
}
f(n); // compiler must allow this call

这里我们正在做一些图形编程并且有 2D 和 3D 向量，但是我们有一个问题：对象可以有额外的属性并且仍然在结构上限定，这导致了这个联合类型的问题（听起来很熟悉？）。

在您的特定情况下，答案是使用 discriminant 轻松区分联合中的相似类型：

interface FleetInformationDto extends GenericDto {
    // N.B., fleet is a literal *type*, not a string literal
    // *value*.
    kind: 'fleet'
}

interface VehicleInformationDto extends GenericDto {
    kind: 'vehicle'
}

这里我使用了字符串，但任何唯一的编译时常量（任何原始值或 enum 的成员）都可以。此外，由于您没有实例化类并纯粹将它们用作类型，我已经将它们设为接口，但适用相同的原则。

Playground

现在您可以清楚地看到类型 'fleet' 无法分配给类型 'vehicle' 的错误。

打字稿联合类型不会抛出错误

Typescript union type does not throw error

typescript

typescript-generics

typescript-typings