React TypeScript项目中基于接口生成配置菜单及自定义转换器使用问题

CRA默认封装了ts-loader配置，不支持直接传入自定义转换器，可按以下步骤操作：

• 无需eject的场景下安装@craco/craco，替换package.json里的scripts命令为craco对应的启动、构建指令
• 在项目根目录新建craco.config.js，覆写ts-loader的customTransformers配置，示例如下：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      const tsLoaderRule = webpackConfig.module.rules.find(rule => rule.test?.toString().includes('tsx'))
      tsLoaderRule.use[0].options.getCustomTransformers = () => ({
        before: [require('ts-reflection/transformer').default]
      })
      return webpackConfig
    }
  }
}

• 完成配置后重启项目即可生效，如果已经执行过eject，直接修改config/webpack.config.js里的ts-loader配置即可。

自定义TS转换器普遍存在版本兼容问题，尤其是CRA的依赖迭代快，很容易出现适配失效，推荐优先使用运行时方案：

基于zod的运行时类型推导方案 #

你可以放弃直接写TS接口，改用zod先定义运行时可访问的参数结构，再反向推导TS类型，完全满足你的需求：

import { z } from 'zod'

// 定义全连接层参数的运行时结构
const DenseLayerArgsSchema = z.object({
  units: z.number(),
  useBias: z.boolean().optional(),
  activation: z.enum(['relu', 'sigmoid', 'linear']).optional()
})
// 推导得到和原生接口完全一致的TS类型，不影响原有类型校验
type DenseLayerArgs = z.infer<typeof DenseLayerArgsSchema>

// 直接从schema读取配置元数据生成菜单
const generateConfigForm = (schema: z.ZodObject<any>) => {
  const fields = Object.entries(schema.shape).map(([fieldName, field]) => {
    return {
      name: fieldName,
      type: field._def.typeName,
      required: !field.isOptional()
    }
  })
  // 基于fields数组渲染配置表单即可
}

你可以把所有tfjs层对应的schema统一存入全局映射表，和tfjs的工厂函数一一绑定，不仅能自动生成配置菜单，还能直接用schema做参数合法性校验，比编译期转换器的鲁棒性高很多。

预编译脚本生成元数据方案 #

如果你不想引入额外的运行时依赖，可以写一个简单的Node脚本，调用TypeScript官方编译器API读取所有*Args接口的属性定义，提前生成一份JSON格式的元数据文件，项目中直接引入该JSON即可，脚本只需要在tfjs版本更新时重新执行一次。

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