TypeScript 导入中的字符串文字预期错误

String literal expected error in TypeScript Import

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

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

索引.ts


// 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 语法。

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

索引.ts


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

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

这假定您在another-file位于同一目录中的名为的文件中有一个命名导出。

另一个文件.ts


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

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

例如，如果another-file位于上一级目录，您将导入为
import {sum} from '../another-file'.

确保在解析导入路径时没有使用任何变量——这是不允许的。路径应该静态解析。

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

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

另一个文件.ts


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

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

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

索引.ts


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

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

console.log(Employee);

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

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

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

结论#

–