Babel 类型转换 - 在运算符周围添加空间如何绕过？

问题描述

我想用 babel 转换来编写一行代码。

这个，const [firstName,setFirstName] = useState<string>("")

但是，当我运行我的转换以插入此代码时，<brackets> 的周围都有额外的空间。所以我得到 useState < string > ("")...

我觉得这可能是故意的代码格式。但是对于这个特定领域，我希望它不要这样做。我不希望操作符周围有额外的空间只用于我代码的这一部分.. 我怎样才能做到这一点？

这是我的转换/配置

types.variableDeclaration("const",[
        types.variableDeclarator(
            types.arrayPattern([
                types.identifier("firstName"),types.identifier("setFirstName")
            ]),types.binaryExpression(
                ">",types.binaryExpression(
                    "<",types.identifier("useState"),types.identifier("string")
                ),types.parenthesizedExpression(types.stringLiteral(""))
            )
        )
    ]
)

"@babel/core": "^7.12.13",

"@babel/plugin-Syntax-typescript": "^7.12.13",

我只能找到有关如何添加额外间距的信息，但无法删除它。

解决方法

如果您要进行类型注释，则需要创建类型注释 AST 节点，而不是 binaryExpression 和 parenthesizedExpression 等。 AST 节点具有特定的含义，您正在构建的是句法描述而不是语义描述，因此很奇怪。

如果你不知道你需要的 AST 节点类型，那么在你想要生成的代码上运行 Babel 的解析器通常是个好主意，因为它们你可以看到你需要的节点类型。

在你的情况下，你需要这样的东西：

const callNode = types.callExpression(
  types.identifier("useState"),[types.stringLiteral("")]
);
callNode.typeParameters = types.tsTypeParameterInstantiation([
  types.tsStringKeyword()
]);

const declNode = types.variableDeclaration("const",[
  types.variableDeclarator(
    types.arrayPattern([
        types.identifier("firstName"),types.identifier("setFirstName")
    ]),callNode,)
]);

综上所述，手动构建所有这些可能非常困难，因此根据您的需要，我会考虑使用 template 来完成，例如

const declNode = template.statement({ plugins: ["typescript"] }).ast`
  const [firstName,setFirstName] = useState<string>();
`;

babeljs javascript transformation typescript typescript