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

Question

我有一行代码正在尝试使用 babel 转换。

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

但是，当我运行我的转换插入此代码时， <brackets> 都被赋予了额外的 space 。所以我得到 useState < string > ("")...

我觉得这可能是故意的代码格式化。但对于这个特定领域，我希望它不要那样做。我不希望运算符周围的额外 space 只是为了我的这部分代码。我怎样才能做到这一点？

这是我的 transform/configuration

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",

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

Answer 1

如果您尝试制作类型注释，则需要制作类型注释 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>();
`;

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

Babel types transform - adds space around operators. How to bypass?

javascript

typescript

babeljs

transformation

codemod