0

我有一行代码正在尝试使用 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",

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

4

1 回答 1

1

如果您尝试进行类型注释，则需要创建类型注释 AST 节点，而不是binaryExpressionandparenthesizedExpression等。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>();
`;
于 2021-03-03T03:37:48.757 回答