Question

我正在尝试将SystemJs与TypeScript一起使用，基于这篇文章：http://david-barreto.com/how-to-use-typescript-with-systemjs/

的index.html

<!DOCTYPE html>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/typescript/lib/typescript.js"></script>
<script>
  System.config({
    transpiler: 'typescript'
  });
  System.import('src/main.ts');
</script>

main.ts

function plusOne(num: number) {
  return num+1;
}

alert(plusOne(1))

但是，在Chrome中操作index.html时，我看到以下错误，表示没有发生转换：

common.js:85 Uncaught (in promise) Error: Unexpected token :
  Evaluating http://localhost:8080/src/main.ts
  Loading src/main.ts
    ...

有什么问题？

Answer 1

发生错误是因为SystemJS不使用typescript来转换main.ts中的源代码，因为它没有检测到代码需要被转换 - 它不包含export等es6功能或SystemJS检查的import。

这就是transpiler选项的工作方式。你想设置transpiler: 'typescript'将它用于打字稿代码，但SystemJS设置为使用它来转换es6到javascript，没有明确支持typescript，如果代码看起来不像es6，则转换器不会使用。

因此，您需要明确告诉SystemJS您的代码是es6。这是适用于您的示例和SystemJS 0.19的SystemJS配置。请注意，它不适用于0.20版本的SystemJS，看似you have no other option而不是使用plugin-typescript。

<!DOCTYPE html>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script>
  System.config({
    map: {typescript: 'node_modules/typescript'},
    packages: {
      typescript: {main: 'lib/typescript.js', format: 'global'},
      src: {defaultExtension: 'ts', format: 'esm'}
    },
    transpiler: 'typescript',
  });
  System.import('src/main.ts');
</script>

使用TypeScript简单示例的SystemJs失败

1 个答案: