具有 enableImplicitConversion 的类转换器/类验证器在 ReactJS 中无法按预期工作答案

【问题标题】：class-tranformer / class-validator with enableImplicitConversion not working as expected in ReactJS具有 enableImplicitConversion 的类转换器/类验证器在 ReactJS 中无法按预期工作
【发布时间】：2021-05-19 07:16:07
【问题描述】：

我希望在我的 UI 中使用 class-transformer / class-validator 将表单值转换为正确的类型。它适用于我的服务器应用程序，但不适用于 React。有人可以帮忙吗？

import { plainToClass } from "class-transformer";
import { IsNumber } from "class-validator";
import "reflect-metadata";

export class LovelyObject {
  @IsNumber()
  //@ts-ignore
  public shouldBeANumber: number;
}

const worksIfNotInReact = plainToClass(
  LovelyObject,
  { shouldBeANumber: "234" },
  { enableImplicitConversion: true }
);

预期输出（在服务器应用程序中工作）

{"shouldBeANumber" : 234}

ReactJS 中的输出

{"shouldBeANumber" : "234"}

此代码在这里可以正常工作：https://codesandbox.io/s/workshere-c4wek?file=/src/index.ts:0-341

但在反应应用程序的上下文中不起作用：https://codesandbox.io/s/not-working-q80uy?file=/src/App.tsx

【问题讨论】：

标签： reactjs class-validator class-transformer

【解决方案1】：

将babel-plugin-transform-typescript-metadata 添加到 babel 插件就可以了。

【讨论】：