迹忆客 专注技术分享

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 的文件，它有一个命名导出和一个默认导出。

another-file.ts

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

// 👇️ default export
export default class Employee {}

导入它们时，始终先导入默认导出。

// 👇️ default and named import
import Employee, { sum } from './another-file';

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

console.log(Employee);

命名和默认导出和导入之间的主要区别是 - 每个文件可以有多个命名导出，但只能有一个默认导出。

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

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

总结

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