什么使得在chrome中调试typescript成为可能？

Question

当浏览器仅了解Javascript时，是什么使得在chrome中调试typescript成为可能？我总是使用chrome开发人员工具中使用角度CLI创建的角度项目中调试我的打字稿文件，但是我不知道我们如何调试打字稿文件的原因。有人可以向我解释一下吗？

Answer 1

Angular CLI使用webpack。当webpack将您的TS转换为JS时，可以对其进行配置（默认情况下）也可以生成源映射。这就是Chrome能够将javascript代码绑定到typescript以进行调试的方式。

由角度CLI生成的示例 tsconfig.json ：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true, <--- this right here
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}