TypeScript 错误解析：为什么 export default 不能直接导出类型别名？
在使用 TypeScript 开发时，我们经常会遇到需要导出类型别名（type alias）或函数的情况。然而，如果你尝试在 export default 语句中直接定义类型别名，可能会遇到类似以下的错误：
export default type HandleGeneratorFn = (config: {
tooltipPrefixCls?: string;
prefixCls?: string;
info: HandleGeneratorInfo;
}) => React.ReactElement;这段代码会报错，提示语法不正确。那么，为什么会出现这种错误？如何正确导出类型别名和函数呢？本文将为你详细解析。
错误原因
在 TypeScript 中，export default 主要用于导出值（如函数、类、对象等），而不是类型别名。类型别名（type alias）是 TypeScript 的类型系统的一部分，它本身并不是一个值，因此不能直接通过 export default 导出。
换句话说，export default 期望的是一个值，而你试图导出的却是一个类型别名，这会导致语法错误。
正确写法
要解决这个问题，我们需要将类型别名的定义和导出分开处理。以下是几种正确的写法：
1. 先定义类型别名，再默认导出
type HandleGeneratorFn = (config: {
tooltipPrefixCls?: string;
prefixCls?: string;
info: HandleGeneratorInfo;
}) => React.ReactElement;
export default HandleGeneratorFn;这种方式先定义了类型别名 HandleGeneratorFn，然后通过 export default 将其导出。
2. 使用命名导出
如果你不需要默认导出，可以直接使用命名导出：
export type HandleGeneratorFn = (config: {
tooltipPrefixCls?: string;
prefixCls?: string;
info: HandleGeneratorInfo;
}) => React.ReactElement;在其他模块中，你可以通过以下方式导入：
import { HandleGeneratorFn } from './your-module';3. 导出函数及其类型
如果你需要导出一个函数及其类型别名，可以分别定义和导出：
// 定义类型别名
type HandleGeneratorFn = (config: {
tooltipPrefixCls?: string;
prefixCls?: string;
info: HandleGeneratorInfo;
}) => React.ReactElement;
// 定义函数
const handleGenerator: HandleGeneratorFn = (config) => {
// 函数实现逻辑
return <div>Example</div>;
};
// 默认导出函数
export default handleGenerator;
// 导出类型别名
export type { HandleGeneratorFn };在其他模块中，你可以通过以下方式导入函数和类型：
import handleGenerator, { HandleGeneratorFn } from './your-module';4. 直接导出函数
如果你只需要导出一个函数，可以直接定义并导出：
const handleGenerator = (config: {
tooltipPrefixCls?: string;
prefixCls?: string;
info: HandleGeneratorInfo;
}): React.ReactElement => {
// 函数实现逻辑
return <div>Example</div>;
};
export default handleGenerator;在其他模块中，你可以通过以下方式导入：
import handleGenerator from './your-module';总结
在 TypeScript 中，export default 不能直接用于导出类型别名，因为类型别名不是值。要正确导出类型别名或函数，可以先将类型别名定义出来，然后通过 export default 或命名导出的方式导出。
以下是推荐的写法：
导出类型别名
type HandleGeneratorFn = (config: {
tooltipPrefixCls?: string;
prefixCls?: string;
info: HandleGeneratorInfo;
}) => React.ReactElement;
export default HandleGeneratorFn;导出函数及其类型
type HandleGeneratorFn = (config: {
tooltipPrefixCls?: string;
prefixCls?: string;
info: HandleGeneratorInfo;
}) => React.ReactElement;
const handleGenerator: HandleGeneratorFn = (config) => {
// 函数实现逻辑
return <div>Example</div>;
};
export default handleGenerator;
export type { HandleGeneratorFn };直接导出函数
const handleGenerator = (config: {
tooltipPrefixCls?: string;
prefixCls?: string;
info: HandleGeneratorInfo;
}): React.ReactElement => {
// 函数实现逻辑
return <div>Example</div>;
};
export default handleGenerator;通过这种方式，你可以避免语法错误，并保持代码的清晰性和可维护性。