TypeScript 导入中 String literal expected 错误

TypeScript 错误“String literal expected”发生在语法错误时，最常见于 import 语句中。 要解决该错误，需要确保在解析导入路径时不使用任何变量，并以 import {myFunction} from ‘./myFile’ 的形式导入。

以下是错误发生方式的 3 个示例。

// 1. ⛔️ Error: String literal expected.ts(1141)
import {sum} = require('./another-file')

// 2. ⛔️ Error: String literal expected.ts(1141)
const pathToModule = './another-file';
import { myFunction } from `${pathToModule}`;


// 3. ⛔️ Error: String literal expected.ts(1141)
import {sum}, Employee from './another-file'

上面所有的例子都有语法错误。

第一个例子中的错误是我们混合了 ES 模块和 CommonJS 语法。

相反，我们应该将命名导出导入为：

// ?️ named import
import { sum } from './another-file';

console.log(sum(50, 50)); // ?️ 100

这假设我们在同一目录中名为另一个文件的文件中有一个命名导出。

// ?️ named export
export function sum(a: number, b: number) {
  return a + b;
}

导入路径取决于模块所在的位置以及您是导入本地文件还是第三方库。

例如，如果 another-file 位于一个目录之上，我们将导入为 import {sum} from ‘../another-file’。

如果我们有默认导出，请在导入时省略大括号。

这是一个名为 another-file 的文件，它有一个命名导出和一个默认导出。

根据我的经验，大多数真实世界的代码库都只使用命名导出和导入，因为它们可以更轻松地利用 IDE 进行自动完成和自动导入。

我们也不必考虑哪些成员是使用默认导出或命名导出导出的。

总结

TypeScript 错误“String literal expected”发生在语法错误时，最常见于 import 语句中。 要解决该错误，需要确保在解析导入路径时不使用任何变量，并以 import {myFunction} from ‘./myFile’ 的形式导入。

火焰兔

海报 链接