class-tranformer / class-validator with enableImplicitConversion 在 ReactJS 中无法正常工作

Question

我希望在 UI 中使用 class-tranformer / 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

Answer 1

将 babel-plugin-transform-typescript-metadata 添加到 babel 插件即可。

class-tranformer / class-validator with enableImplicitConversion 在 ReactJS 中无法正常工作

class-tranformer / class-validator with enableImplicitConversion not working as expected in ReactJS

reactjs

class-validator

class-transformer