时间戳

首页 > 解决方案 > 为什么 Tsconfig 需要编译 Javascript 文件 Angular

javascript - 为什么 Tsconfig 需要编译 Javascript 文件 Angular

问题描述

我想将 canvasjs 用于我正在制作的 Angular 项目中的一些图表（https://canvasjs.com/angular-charts/）

为此，我下载了他们的 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 中，为什么还需要编译它们呢？

浏览器无法读取 typescript，但可以读取 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 文件的最佳方式是什么？

谢谢！

标签： javascriptangulartypescript

解决方案

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

它可能没有 TypeScript 文件中的类型信息那么丰富，但在大多数情况下它在计算类型信息方面做得很好。

所以不是将 JavaScript 转换成更多的 JavaScript，而是让依赖于 JavaScript 的 TypeScript 代码更易于管理。

推荐阅读