[TS]引入.ts文件报错：An import path can only end with a ‘.ts‘ extension when ‘allowImportingTsExtensions‘

前言

在使用VSCode编辑器进行TypeScript编程时，我们经常会使用import语句导入其他的模块。然而，在某些情况下，我们可能会遇到以下错误提示：An import path can only end with a ‘.ts’ extension when ‘allowImportingTsExtensions’ is eabled。
这是由于在TypeScript中，import语句引用的是模块的名称而不是具体的文件路径，因此在引用模块时不应该使用文件的扩展名

解决方法

1. 引入时去掉 .ts 后缀

import { useLoadingStore } from './loading.ts'

修改为：

import { useLoadingStore } from './loading'

即可解决报错问题。

2. allowImportingTsExtensions
   根据报错的提示，可以配置allowImportingTsExtensions为true

// tsconfig.json
{
  "compilerOptions": {
    "allowImportingTsExtensions": true
  }
}

但是又遇到报错 Option 'allowImportingTsExtensions' can only be used when either 'noEmit' or 'emitDeclarationOnly' is set.
这是因为allowImportingTsExtensions这个选项允许导入TypeScript扩展名，但它的使用有特定的编译条件。如果不满足这些条件，编译器将抛出错误。
allowImportingTsExtensions 选项只能在启用了 noEmit 或 emitDeclarationOnly 的情况下使用。这是因为该选项仅影响类型检查，而不影响代码生成过程，TypeScript要确保编译时不会出现意外行为。
如果不需要 TypeScript 生成任何输出文件，可以启用 noEmit: true。
如果只需要生成 .d.ts 声明文件，可以启用 emitDeclarationOnly: true

如果需要同时生成 JavaScript 文件和声明文件，考虑重构构建流程以避免使用 allowImportingTsExtensions。

结论

使用第一种方法，即引入时不适用ts后缀，就不需要配那么多东西啦~