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

Question

我想在我正在制作的 Angular 项目上使用 canvasjs 来绘制一些图表 (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 文件中添加 allowedJs 标志

{
  "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 文件的最佳方法是什么？

谢谢！

Answer 1

--allowJS

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

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

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

Answer 2

我在这上面花了很多时间。

所以我在根目录的 tsconfig.json 中设置了allowJs。这导致了编译错误。尽管设置了 outDir，我仍然遇到覆盖问题。

原来根目录下的tsconfig.json不是设置allowJs的地方。

在我的 src/tsconfig.app.json 中，我将 allowedJs 设置为 true，然后它就成功了。

Answer 3

如果在 Angular 中使用 canvas.js 时出现错误

在 tsconfig.app.json 文件中

添加

"allowJs":true;

Answer 4

使用 outDir 对我有用：

{
  "ts-node": {
    "esm": true, // Enable ECMAScript modules for ts-node
    // Do not forget to `npm i -D tsconfig-paths`
    "require": ["tsconfig-paths/register"], // Register tsconfig paths at runtime
    // these options are overrides used only by ts-node
    // same as the --compilerOptions flag and the TS_NODE_COMPILER_OPTIONS environment variable
    "compilerOptions": {
      "target": "ES2022", // Set ECMAScript target version to ES2022 for ts-node
      "module": "NodeNext", // Use NodeNext module resolution for compatibility with ES modules in Node.js
      "baseUrl": ".", // Set the base URL for module resolution to the root directory
      "paths": {
        "@/*": ["./"] // Map @/ to the root directory for easier imports
      }
    }
  },
  "compilerOptions": {
    "target": "ES2022", // Set ECMAScript target version to ES2022
    "module": "ESNext", // Use the latest ECMAScript module system
    "lib": [
      "dom", // Include DOM types
      "dom.iterable", // Include DOM iterable types
      "esnext", // Include ESNext library features
      "es2022" // Include ES2022 library features
    ],
    "allowJs": true, // Allow JavaScript files to be compiled
    "outDir": "./dist", // Set the output directory for compiled files
    "skipLibCheck": true, // Skip type checking of declaration files
    "allowImportingTsExtensions": true, // Allow importing TypeScript files with extensions
    "strict": true, // Enable strict type checking
    "forceConsistentCasingInFileNames": true, // Enforce consistent file name casing across the project
    "noEmit": true, // Disable emitting compiled files (useful in development)
    "esModuleInterop": true, // Enable interoperability between CommonJS and ES modules
    "moduleResolution": "node", // Use Node.js-style module resolution
    "resolveJsonModule": true, // Enable importing of JSON files
    "isolatedModules": true, // Ensure each file is treated as an isolated module
    "jsx": "preserve", // Preserve JSX syntax for further processing by another tool
    "incremental": true, // Enable incremental builds to improve build performance
    "tsBuildInfoFile": "./.tsbuildInfo",
    "baseUrl": ".", // Set the base URL for module resolution to the root directory
    "paths": {
      "@/*": ["./*"] // Map @/ to the root directory for cleaner imports
    }
  },
  "include": [
    "**/*.ts", // Include all .ts (TypeScript) files
    "**/*.tsx" // Include all .tsx (TypeScript + JSX) files
  ],
  "exclude": [
    "node_modules", // Exclude the node_modules directory from compilation
    "**/*.d.ts" // Exclude declaration files from compilation
  ]
}