DEV Community

Atle Frenvik Sveen
Atle Frenvik Sveen

Posted on

1 1

TypeScript types from lists

I assume you know about types in TypeScript. That is kinda the essence.

And you've probably run into situations where you want to or together different things into a type. Like me, when I want to summarize beers I like, I can say:

type AtlesKindOfBeer = 'ipa' | 'stout' | 'lambic';
Enter fullscreen mode Exit fullscreen mode

Whith this defined, I can create a function like this:

const serveAtleBeer = (beer: AtlesKindOfBeer) => console.log("Cheers");
Enter fullscreen mode Exit fullscreen mode

This means that we avoid situations like this:

serveAtleBeer('lite banana-neipa');
Enter fullscreen mode Exit fullscreen mode

But, say that you are handed a string describing a beer style, and want to check if this is a beer I like?

Typeguards to the rescue!

const isAtlesKindOfBeer = (beer: string): beer is AtlesKindOfBeer 
  => ['ipa', 'stout', 'lambic'].inludes(beer);
Enter fullscreen mode Exit fullscreen mode

This works. Kinda. See the problem? Duplication! Say that I want to add "geuze" to my list of drinkable beers. Then I have to update both the AtlesKindOfBeer type and the isAtlesKindOfBeer typeguard. And here lies a potential for fuckup. And every potential for fuckup will, someday, develop into a fuckup.

So, how do we eliminate the potential? We define the list of beers I like once. Like this:

const atlesKindsOfBeer = ['ipa', 'stout', 'lambic'] as const;
Enter fullscreen mode Exit fullscreen mode

then both the type and the typeguard can reference this list:

type AtlesKindOfBeer = typeof atlesKindsOfBeer[number];

const isAtlesKindOfBeer = (beer: string): beer is AtlesKindOfBeer 
  => atlesKindsOfBeer.inludes(beer as AtlesKindOfBeer);
Enter fullscreen mode Exit fullscreen mode

Hooray!

Btw: the as const syntax is known as a [const assertion]!(https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#const-assertions)

Heroku

Deploy with ease. Manage efficiently. Scale faster.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started

Top comments (0)

Playwright CLI Flags Tutorial

5 Playwright CLI Flags That Will Transform Your Testing Workflow

  • 0:56 --last-failed: Zero in on just the tests that failed in your previous run
  • 2:34 --only-changed: Test only the spec files you've modified in git
  • 4:27 --repeat-each: Run tests multiple times to catch flaky behavior before it reaches production
  • 5:15 --forbid-only: Prevent accidental test.only commits from breaking your CI pipeline
  • 5:51 --ui --headed --workers 1: Debug visually with browser windows and sequential test execution

Learn how these powerful command-line options can save you time, strengthen your test suite, and streamline your Playwright testing experience. Click on any timestamp above to jump directly to that section in the tutorial!

Watch Full Video 📹ī¸

👋 Kindness is contagious

If this post resonated with you, feel free to hit ❤ī¸ or leave a quick comment to share your thoughts!

Okay