TypeScript - 导出默认为

Question

在 TypeScript 中处理 react 应用程序。

我正在尝试了解使用 as 导出默认组件的正确语法

到现在我都用过：

class HomePage extends Component<IProps, IState> {
   ...
}

export default HomePage

或很快：

export default class HomePage extends Component<IProps, IState> {
   ...
}

现在，在添加了 redux 支持之后。我有类似的东西：

class HomePage extends Component<IProps, IState> {
   ...
}

const mapStateToProps = (state: StoreState) => {
   ...
};

const mapDispatchToProps = {
   ...
};

export default connect(mapStateToProps, mapDispatchToProps)(HomePage);

但我不知道如何将as 添加到连接默认导出 例如：

// This is NOT working. I get Syntax error.
export default connect(mapStateToProps, mapDispatchToProps)(HomePage) as HomePage;

有可能吗？还是我应该这样做？似乎无论如何导出名称都是HomePage（当我在其他文件中导入HomePage时，IDE会自动检测并导入此文件）。它是从哪里取来的？文件名（HomePage.tsx）？

这对我有用：

const connectedHomePage = connect(mapStateToProps, mapDispatchToProps)(HomePage)
export {connectedHomePage as HomePage};

但它是两行（我更喜欢一行）而且它不是默认导出。

那么，有没有办法将export default 和as 添加到语句中？只是为了清楚导出的名称是什么？

Answer 1

as 有 2 个含义。在 ES6 模块中，它可以是一种重命名导入或导出的方法。在 TypeScript 中，它是一个类型转换运算符。我假设您的意思是第一个，特别是重命名导出的方法。

现在看看你建议的这个表达式：

export default connect(mapStateToProps, mapDispatchToProps)(HomePage) as HomePage;

要将其导出为default 还是要将其导出为HomePage？导出默认值时，default 是导出名称。鉴于此，期望它被称为HomePage 是否有意义？您要么导出名为 default 的内容，要么导出名为 HomePage 的内容。

此表将不同的导出语句形式与预期的导出名称和本地名称相关联：

对于导入，不过...

• 如果您要导入默认导出，则必须明确命名导入。默认导出在导入后不会自动具有本地名称。示例：import express from "express"。本地名称无关紧要。也可以是import banana from "express"。
• 如果您正在导入命名导出，默认情况下，本地名称将与导出名称相同。示例：如果您有export const x = 2，那么您应该将其导入为import { x } from "module"。您也可以像这样重命名导入：`import { x as y } from "module"。

以上表格来自 ES6 规范：http://www.ecma-international.org/ecma-262/6.0/