为什么Tsconfig需要按角度编译Javascript文件

时间:2018-12-06 11:31:17

标签: javascript angular typescript

我想在我正在制作的Angular项目(https://canvasjs.com/angular-charts/)上的某些图表上使用canvas.js

为此,我已经下载了他们的javascript文件,并按照建议将其导入了我的组件之一。

import * as CanvasJS from './../../../assets/canvasjs.min.js';

但是当我尝试使用npm start运行我的应用程序时,有时会收到

ERROR in src/app/Components/multi-camera-view/multi-camera-view.component.ts(2,27): error TS6143: Module './../../../assets/canvasjs.min.js' was resolved to '/src/assets/canvasjs.min.js', but '--allowJs' is not set.

快速阅读后,allowJs允许ts编译器编译javascript文件,但是如果它们已经在javascript中,为什么还要编译这些文件呢?

浏览器无法阅读打字稿,但可以阅读javascript。那么为什么需要编译呢?

我尝试在tsconfig.json文件的根目录中添加allowJs标志

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "allowJs": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

但是后来我得到了错误:

ERROR in error TS5055: Cannot write file '/src/assets/canvasjs.min.js' because it would overwrite input file.
  Adding a tsconfig.json file will help organize projects that contain both TypeScript and JavaScript files. Learn more at https://aka.ms/tsconfig.

我访问了链接并将noEmit设置为true,但是我的应用程序可以正常运行,但无法运行。那么,使用此javascript文件的最佳方法是什么?

谢谢!

2 个答案:

答案 0 :(得分:1)

--allowJS标志允许编译器从JavaScript文件推断类型信息,以便可以对您对该文件的使用进行类型检查。

它可能不像TypeScript文件中的类型信息那样丰富,但是在大多数情况下,它可以很好地计算出类型信息。

因此,不是将JavaScript转换为更多的JavaScript,而是使依赖JavaScript的TypeScript代码更易于管理。

答案 1 :(得分:0)

我花了很多时间。

因此我在tsconfig.json的根目录中设置了allowJs。这导致了编译错误。尽管设置了outDir,但是覆盖仍然有问题。

在根目录下找到tsconfig.json并不是设置allowJs的地方。

在我的src / tsconfig.app.json中,将allowJs设置为true,然后它成功运行。