在TypeScript中使用名称空间，但仅用于types =>反模式？

x6h2sr28 于 2023-01-18 发布在 TypeScript

关注(0)|答案(1)|浏览(125)

有时人们会告诉你不应该在TypeScript中使用命名空间。例如：https://typescript-eslint.io/rules/no-namespace/（eslint错误：“ES 2015模块语法优于命名空间”）
当然我知道ES模块是什么，当然我的TS代码基本上是在ES模块中构造的。
然而在某些情况下（UI组件、复杂事件等）我使用名称空间绑定类型（仅类型！），以便于以后导入和使用这些类型。请参见以下示例（这是某种UI组件）。重要的是，稍后通过使用import { Button } from 'xyz'，您可以访问函数Button本身以及所有类型Button.Type，Button.Variant和Button.Size，我认为它们非常方便。

export { Button };

namespace Button {
  export type Type = 'button' | 'submit' | 'reset';
  export type Variant = 'default' | 'primary' | 'warning' | 'danger';
  export type Size = 'small' | 'medium' | 'large';
}

function Button(props: {
  type?: Button.Type;
  variant?: Button.Variant;
  size?: Button.Size;
  // ... and others ...
}) {
  // not important
}

[Edit：请将此示例视为小部件库的一部分，而不是应用程序]
您认为这是反模式吗？请解释您的答案。

typescript

来源：https://stackoverflow.com/questions/75120587/using-namespaces-in-typescript-but-only-for-types-anti-pattern

1条答案

按热度按时间

n6lpvg4x1#

正如您所说，Namespace被认为是过时的。最好避免它。相反，请执行以下操作：
button.ts

export type Type = 'button' | 'submit' | 'reset';
export type Variant = 'default' | 'primary' | 'warning' | 'danger';
export type Size = 'small' | 'medium' | 'large';

app.ts

import * as Button from './button'

function createButton(props: {
    type?: Button.Type;
    variant?: Button.Variant;
    size?: Button.Size;
  }) {
    // do something here
}

至于为什么它已经过时或不受欢迎，首先，它可能会导致冲突和无意中覆盖两个名称空间，上面的模式让您在导入它时处于驾驶员的位置。

赞(0）回复(0）举报 2023-01-18

我来回答

在TypeScript中使用名称空间，但仅用于types =>反模式？

1条答案

相关问题

热门标签

最新问答