Att använda namespaces i TypeScript, men bara för typer => antipattern?

Ibland säger folk till dig att du inte bör använda namnrymder i TypeScript. Till exempel här: https://typescript-eslint.io/rules/no-namespace/ (eslint-fel: "ES2015-modulsyntax föredras framför namnrymder")

Självklart vet jag vad ett ES-modul är och självklart är min TS-kod i grunden strukturerad i ES-moduler.

I vissa fall (UI-komponenter, komplexa händelser osv.) använder jag dock namespaces för att samla typer (endast typer!), för att göra det lättare att importera och använda dessa typer senare. Se följande exempel (detta är en slags UI-komponent). Det viktiga är att du senare genom att använda import {{ Button }} from 'xyz' får åtkomst till funktionen Button själv och alla typer Button.Type, Button.Variant och Button.Size som jag anser vara väldigt praktiska.

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
}

[Redigera: Vänligen betrakta detta exempel som en del av ett widgetbibliotek, inte en applikation]

Anser du att detta är ett anti-mönster? Vänligen förklara ditt svar.

Svar #1

Som du sa, Namespace anses vara föråldrat. Det är bäst att undvika det. Gör istället något som:

knapp.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
}

När det gäller varför det är föråldrat eller avråds, så kan det till exempel orsaka konflikter och oavsiktlig överlappning av två namnrymder. Mönstret ovan ger dig kontrollen när du importerar det.

Relaterade artiklar