错误 TS1259：只能使用“esModuleInterop”标志默认导入模块

当使用 TypeScript 时，有时会遇到 TS1259 错误，这个错误通常是由于 import 语句中使用了默认导入模块，而导入的模块不支持默认导出。这时我们需要在 TypeScript 配置中开启 esModuleInterop 标志来支持默认导出模块。

什么是默认导出和默认导入？

默认导出是指在模块中通过 export default 关键字导出一个默认值，在导入时可以不指定变量名而直接使用该默认值。例如：

// person.js
export default {
  name: 'Alice',
  age: 20,
};

// main.js
import person from './person';
console.log(person.name); // Alice

默认导入是指在导入时可以省略模块路径中的花括号 {}，而直接导入一个默认导出。例如：

// person.js
const person = {
  name: 'Alice',
  age: 20,
};
export default person;

// main.js
import person from './person';
console.log(person.name); // Alice

如何开启 esModuleInterop 标志

要开启 esModuleInterop 标志，我们需要在 tsconfig.json 文件中加上以下配置：

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

这可以确保在导入时默认导出将被正确解析。如果您想要在每个模块中默认导入，则可以将 tsconfig.json 中的 esModuleInterop 标志设置为 true。

总结

使用默认导出和默认导入可以使代码更加易读和简洁，但需要确保适当的配置，否则会导致 TS1259 错误。在 TypeScript 中开启 esModuleInterop 标志可以解决这个问题，从而确保模块的默认导入和导出被正确解析。