什么使得在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"
    ]
  }
}