8

Why I've started using namespaces in Typescript

 3 years ago
source link: https://dev.to/tamj0rd2/why-i-ve-started-using-namespaces-in-typescript-483o
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Why I've started using namespaces in Typescript

Feb 13

・2 min read

Typescript has these things called namespaces. To cut to the chase, namespaces offer a way to group things up. You can find out some information about what they are and how to use them here.

I've known about their existence for quite some time but until recently, I didn't think I had a reason to use them. There are already so many other ways you can group things up.

You can group things up using objects:

export const CustomMath = {
  add(a: number, b: number) {},
  subtract(a: number, b: number) {},
}
Enter fullscreen modeExit fullscreen mode

You can group things up using classes:

export class CustomMath {
  public static add(a: number, b: number) {}

  public static subtract(a: number, b: number) {}
}
Enter fullscreen modeExit fullscreen mode

You can group things up using wildcard imports:

// customMath.ts
export function add(a: number, b: number): void {}

export function subtract(a: number, b: number): void {}

export type Range = { lower: number; upper: number }

// anotherFile.ts
import * as CustomMath from './customMath'

const myRange: CustomMath.range = { ... }
Enter fullscreen modeExit fullscreen mode

With this solution, you can also include types/interfaces within the grouping. As far as I'm aware that isn't possible with the previous 2 methods.

One thing I don't like about wildcard imports is that it's still possible to import each of those functions individually. There's nothing in place to stop people from doing this. Straggler functions (and types) that seem like they would be better off being logically grouped annoy me a bit.


Namespaces

// customMath.ts
export namespace CustomMath {
  export function add(a: number, b: number): void {}

  export function subtract(a: number, b: number): void {}

  export type Range = { lower: number; upper: number }
}

// anotherFile.ts
import { CustomMath } from './customMath'

const myRange: CustomMath.range = { ... }
Enter fullscreen modeExit fullscreen mode

You can still access functions, constants, types and interfaces that are exported from your namespace, but now they're grouped nicely under a single import. Bliss.

There are drawbacks to using namespaces, some of which have been mentioned here. There are also other ways to avoid the minor annoyances I've mentioned in this post. One way is to make better use of index files. This is something I've done in personal projects and it works well for me, however it seems like too much of a manual effort to convince my colleagues to try this. Namespaces will be my go-to in situations where objects or classes aren't more appropriate.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK