如何将TypeScript Props接口转换为指定结构数组？Babel可行吗？

现有第三方提供的TypeScript接口：

interface Props {
  id: string;
  name: string;
  age: number;
  approval: Approval
}

interface Approval {
  signature: string;
}

需要将其转换为如下结构的数组：

[
  {
    name: 'id',
    type: 'string'
  },
  {
    name: 'name',
    type:'string'
  },
  {
    name: 'age',
    type: 'number'
  },
  {
    name: 'approval',
    type: 'Approval'
  }
]

想知道TypeScript原生能不能实现这种转换，以及如何用Babel达成这个目标。

TypeScript是编译时类型系统，接口这类类型定义会在编译阶段被完全擦除，运行时根本不存在接口的元信息。所以没法在运行时直接通过Props接口拿到对应的字段和类型数组，原生TS没有提供这种反射能力。

可以通过编写Babel插件，在编译阶段解析TypeScript的AST（抽象语法树），提取Props接口的属性名和类型信息，自动生成目标数组的代码。

示例Babel插件代码 #

module.exports = function (babel) {
  const { types: t } = babel;

  return {
    visitor: {
      InterfaceDeclaration(path) {
        // 只处理名为Props的接口
        if (path.node.id.name === 'Props') {
          // 提取接口的每个属性
          const properties = path.node.body.body.map(prop => {
            // 获取属性名
            const propName = prop.key.name;
            // 获取类型名称（这里只处理简单类型和接口引用）
            let typeName;
            if (t.isTSStringKeyword(prop.typeAnnotation.typeAnnotation)) {
              typeName = 'string';
            } else if (t.isTSNumberKeyword(prop.typeAnnotation.typeAnnotation)) {
              typeName = 'number';
            } else if (t.isTSIdentifier(prop.typeAnnotation.typeAnnotation)) {
              typeName = prop.typeAnnotation.typeAnnotation.name;
            }

            // 生成对象字面量节点
            return t.objectExpression([
              t.objectProperty(t.stringLiteral('name'), t.stringLiteral(propName)),
              t.objectProperty(t.stringLiteral('type'), t.stringLiteral(typeName))
            ]);
          });

          // 生成数组字面量节点
          const arrayNode = t.arrayExpression(properties);

          // 在接口定义后插入数组变量声明
          path.insertAfter(t.variableDeclaration('const', [
            t.variableDeclarator(t.identifier('propsMeta'), arrayNode)
          ]));
        }
      }
    }
  };
};

使用方式 #

1. 安装必要依赖：@babel/core、@babel/preset-typescript、@babel/cli
2. 在Babel配置文件中引入这个插件
3. 编译TS代码时，插件会自动在Props接口后生成名为propsMeta的变量，就是你需要的目标数组。

这个方案是在编译阶段完成转换，最终产出的JS代码里会直接包含这个数组，运行时可以直接使用propsMeta变量。

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