使用Babel可以将代码转换为TypeScript吗？

Question

我知道Babel现在支持TypeScript风格的类型注释，但是它不像TypeScript编译器那样检查类型，并且它会从输出中删除类型注释。我的目标是：

1. 将带有TypeScript注释的stage-0代码转换为普通的TypeScript
2. 使用TypeScript编译器检查类型
3. 输出适用于Node或浏览器的JavaScript代码

这个可行吗？

- sdgfsdh

---

@babel/preset-typescript 应该允许您使用 babel 来转译 TypeScript 而不是使用 tsc。您在这方面遇到了什么问题吗？ - apokryfos

正如@apokryfos所说，这只允许解析注释，而不是类型检查。请参见上面OP列表中的#2。 - T.J. Crowder

据我所知，这是不可能的。 - apokryfos

@apokryfos - 原来是这样！我也很惊讶，但现在我感到有点内疚... Babel 的开发人员真的很厉害。 - T.J. Crowder

Answer 1

我很好奇，所以我联系了在Babel上做了很多工作的Nicolò Ribaudo，结果发现这比我想象的要容易：您可以告诉Babel 解析 类型注释，但不是删除它们，方法是使用TypeScript syntax plugin（@babel/plugin-syntax-typescript），而不是TypeScript preset（@babel/preset-typescript）。

例如，如果您想转译管道运算符的支持，您的.babelrc可能如下所示：

{
  "plugins": [
    "@babel/plugin-syntax-typescript",
    [
      "@babel/plugin-proposal-pipeline-operator",
      {
        "proposal": "minimal"
      }
    ]
  ]
}

然后，如果您将此.ts文件提供给Babel：

function doubleSay(str: string) {
  return str + ", " + str;
}
function capitalize(str: string) {
  return str[0].toUpperCase() + str.substring(1);
}
function exclaim(str: string) {
  return str + '!';
}

let result = "hello"
  |> doubleSay
  |> capitalize
  |> exclaim;

console.log(result);

使用管道运算符转译后，它会生成带有类型注释的输出:

var _ref, _ref2, _hello;

function doubleSay(str: string) {
  return str + ", " + str;
}

function capitalize(str: string) {
  return str[0].toUpperCase() + str.substring(1);
}

function exclaim(str: string) {
  return str + '!';
}

let result = (_ref = (_ref2 = (_hello = "hello", doubleSay(_hello)), capitalize(_ref2)), exclaim(_ref));
console.log(result);

- T.J. Crowder

---

它不会转译它们，但输出文件仍然是.js。有没有办法保留给定的扩展名（ts/tsx？）编辑：babel src -d dist --extensions '.ts,.tsx' --keep-file-extension"可行。 - cubefox

我喜欢这个答案，因为它提供了一般情况下如何在typescript中使用TC39提案的方法。但是tsc错误会更难读取，因为行号不匹配。我想知道是否有任何解决方法。 - martian17

@martian17 - 我不这么认为。在TypeScript编译器的配置设置中，它仅涉及生成源映射，而不是消费它们。 :-) 不过，如果您查看中间文件中的错误，那么在原始文件中找到它也不难。 - T.J. Crowder