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 defaultAND 添加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/