TypeScript：如何将DTO的value类型从构造函数传递到类中

我为DTO定义了如下联合类型声明：

export enum PropertyType {
  Text = 'text',
  Date = 'date',
  Number = 'number',
  //...
}

export interface PropertyDtoBase {
  prompt?: string;
  required?: boolean;
  // ...
};

export type PropertyDto = PropertyDtoBase & (
  { type: PropertyType.Text; value?: string; } |
  { type: PropertyType.Date; value?: Date; } |
  { type: PropertyType.Number; value?: number; } |
  // ...
);

现在我想基于该DTO生成一个类，并且希望保留value属性的类型定义，但目前得到的类型是unknown：

export class Property {
  prompt?: string;
  required?: boolean;
  type?: PropertyType;
  value?: Exclude<ConstructorParameters<typeof Property>[0], undefined>["value"];
  // ...

  public constructor(dto?: PropertyDto) {
    Object.assign(this, dto);
    //...
  }
};

const x = new Property({ type: PropertyType.Text, value: "test" });
if(x.type === PropertyType.Text) {
  x.value // 此处value类型为unknown，期望为string
}

请问如何将DTO中value的类型传递给对应的类？

要让类的value属性和type属性联动，保留DTO中的类型关联，有两种实用方案可以实现：

方法一：泛型类+自动类型推导 #

把Property类定义为泛型类，泛型参数约束为PropertyDto，让TypeScript根据传入的DTO自动推导type和value的关联类型：

export enum PropertyType {
  Text = 'text',
  Date = 'date',
  Number = 'number',
  //...
}

export interface PropertyDtoBase {
  prompt?: string;
  required?: boolean;
  // ...
};

export type PropertyDto = PropertyDtoBase & (
  { type: PropertyType.Text; value?: string; } |
  { type: PropertyType.Date; value?: Date; } |
  { type: PropertyType.Number; value?: number; } |
  // ...
);

// 泛型类，泛型T约束为PropertyDto
export class Property<T extends PropertyDto = PropertyDto> {
  prompt?: T['prompt'];
  required?: T['required'];
  type: T['type'];
  value?: T['value'];

  public constructor(dto: T) {
    Object.assign(this, dto);
    //...
  }
};

// 使用时自动推导类型
const x = new Property({ type: PropertyType.Text, value: "test" });
if(x.type === PropertyType.Text) {
  x.value; // 类型为string | undefined
}

const y = new Property({ type: PropertyType.Date, value: new Date() });
if(y.type === PropertyType.Date) {
  y.value; // 类型为Date | undefined
}

这种方式无需手动指定泛型参数，TypeScript会自动匹配传入DTO的类型，完美保留type与value的类型关联。

方法二：基于DTO生成类实例联合类型 #

如果希望类实例本身就是和DTO结构一致的联合类型，可以先定义基础类，再通过类型映射生成对应的联合类型实例：

export enum PropertyType {
  Text = 'text',
  Date = 'date',
  Number = 'number',
  //...
}

export interface PropertyDtoBase {
  prompt?: string;
  required?: boolean;
  // ...
};

export type PropertyDto = PropertyDtoBase & (
  { type: PropertyType.Text; value?: string; } |
  { type: PropertyType.Date; value?: Date; } |
  { type: PropertyType.Number; value?: number; } |
  // ...
);

// 定义基础类结构
class PropertyBase {
  prompt?: string;
  required?: boolean;
  type?: PropertyType;
  value?: unknown;

  public constructor(dto?: PropertyDto) {
    Object.assign(this, dto);
    //...
  }
};

// 基于PropertyDto生成类实例的联合类型
type Property = {
  [K in PropertyType]: PropertyBase & Extract<PropertyDto, { type: K }>
}[PropertyType];

// 类型断言让构造函数返回正确的联合类型
const Property = PropertyBase as new (dto?: PropertyDto) => Property;

// 使用示例
const x = new Property({ type: PropertyType.Text, value: "test" });
if(x.type === PropertyType.Text) {
  x.value; // 类型为string | undefined
}

这种方式不需要泛型，直接让Property成为联合类型实例，同样能实现type和value的类型联动。

内容的提问来源于stack exchange，提问作者wertzui