Hacker News Reader

Comment by theK | Hacker News Reader

Am I the only one that feels uncomfortable with all that usage of strings in TS’s type system? Why not use pure literals instead of string literals? This is a genuine question, I’m trying to find out what the pros and cons where in the decision making process.

View on HN

In the context of type definitions, strings aren't really regular bare strings.

I.e. if I write

  type foo = {
     bar: "Vodka"
  }

I'm guaranteeing that the value of 'bar' on any object of that type must be "Vodka" - the type of bar is not string, it's literally "Vodka" because string values can be types.

This seems a little obscure and pointless, but you can put these string types in a union, and enforce that a value must be one of many values.

  function doTheThing(color: "RED" | "GREEN") {
      //do stuff
  }

  doTheThing("RED"); //ok
  doTheThing("GREEN"); //ok
  doTheThing("ORANGE"); //doesn't compile, because the type of the param *isn't* string, it's "RED" | "GREEN"

You can also define a type like

  type Mountain = { name: "EVEREST", height: 8848 } | { name: "K2", height: 8611 };

and then at compile time know that if mountain.name === "EVEREST" then height === 8848 because the types of name and height aren't string and number, they're "EVEREST" | "K2" and 8848 | 8611, and the compiler is smart enough to work out one based on the other.

==============================================

For extra context - a lot of this is for interoptability with Javascript code - you want to call some Javascript function with a stringly typed enum, and enforce only passing in valid values, but the Javascript code still just deals with strings.

A lot of Typescripts kind of insane flexibility is so you can introduce type safety to all sorts of dynamic Javascript code, without having to make sacrifices on the dynamic-ness of it.

Turns out this flexibility is actually kinda awesome to have in general even when you're not trying to refactor an existing JS codebase.

And don't forget about [template literal types](https://devblogs.microsoft.com/typescript/announcing-typescr...)!

```

type Color = "red" | "blue"; type Quantity = "one" | "two";

type SeussFish = `${Quantity | Color} fish`; // same as // type SeussFish = "one fish" | "two fish" // | "red fish" | "blue fish";

```

To add to this, the reason it’s important for TypeScript to support string literals as values instead of using enums or something new is interop with existing JS. For example, think of an event handler where you pass the event name as the first argument; you can ensure at compile-time that an invalid event name isn’t passed.

Or more importantly, varying the event type based on the event name.

e.g. addEventListener("click", (MouseEvent): void) versus addEventListener("input", (InputEvent): void)

That's really interesting.

    doTheThing(readFromUser())

What does the compiler do in cases where you have strings coming in like this?

It gives a type error, because strings are not assignable to string literals.

https://www.typescriptlang.org/play?#code/FAEwpgxgNghgTmABAM...

However, if you check or assert that the returned value is one of the accepted literals, compiler accepts it:

https://www.typescriptlang.org/play?#code/FAEwpgxgNghgTmABAM...

This is one of the classic examples of flow-sensitive typing in TS.

it'll tell you that `string` cannot be assigned to type `"RED" | "GREEN"`, and so you'll need to write a function that refines the type correctly, e.g.

    function isValidInput(input: unknown): input is "RED" | "GREEN" {
      return input === "RED" || input === "GREEN";
    }

    const input = readFromUser();
    if (isValidInput(input)) {
      doTheThing(input); // no type error
    }

It's an error, as the plain `string` type doesn't satisfy the union. You'll need to perform type assertions to make the return type down before passing it as a parameter.

The academic term for such types is "singleton types". They allow for some quite mind-blowing possibilities as you've shown.

As others have pointed out, they're not really "strings" per se, or at least can be a lot stricter than a string might seem when used right. We use that constantly for useful things.

The bigger reason why it is this way is to ensure you can write type annotations for stringly-typed Javascript. While Typescript is it's own thing really at this point, it still is very focused on making it possible to type-annotate JS code.

    type Event = 'onClick' | 'onHover'

    // some stringly typed javascript can now be nicely typed
    something.triggerEvent('onClick', someData)

It lets you do some really nice things, and is quite strongly typed despite how it looks at first glace, while still letting me write some strongly-typed definitions for existing Javascript code that was very much __not__ written with types in mind.

In a similar case TypeScript even knows the signature of the event handler for addEventListener, and what type of Element document.createElement('div') returns. Someone even built typings for querySelector that parse the selector and returns the correct element type.

In general, however, I still think APIs written in TypeScript first are a lot cleaner type-wise than typings retrofitted onto a JS API. And having TypeScript as an afterthought these days doesn't seem like a good path to go anymore.

> In general, however, I still think APIs written in TypeScript first are a lot cleaner type-wise than typings retrofitted onto a JS API

Oh absolutely. Writing JS-first just seems like a lost cause. But there are still enough internal libraries and such written in very JS JS floating around that I come across at work that we need to interface with that I appreciate how much effort the TS team still puts into making sure I can drag those libs kicking and screaming into 2022.

I found it interesting that I would never use strings this way in JS, but TS seems to encourage it. I definitely would not want to strip typing out of my TS code and try to maintain it as plain JS.

What would you use for a field called "stage" that could be set to 'dev' or 'stage' or 'prod'? Or other enum-type things?

I've seen pure JS enums like {'dev' : Symbol('dev'), 'prod' : etc} but I never use them because you can't send them over the wire.

You could use a type like {dev:true} | {prod:true} | {stage:true} but you still wind up comparing strings.

> {dev:true} | {prod:true} | {stage:true}

This can't be accessed safely. Because all value in typescript can be sub type of how it typed.

It means code following will pass.

    var a = { dev: true, get prod() { throw Error() } }
    var b: { dev:true } | {prod:true} | {stage:true} = a

And there is no guarantee that access any of these fields is safe.

That did not compile for me with my TS settings;

> Type '{ dev: boolean; readonly prod: void; }' is not assignable to type '{ prod: true; }'

It's still a bad solution though; it allows nonsense values like {dev:true, prod:true}.

That is because I forgot to assert the true as literal true, so it defaults to be boolean (where both true and false are allowed)

I think it's kind of cool. It reminds me a bit of C++ templates, which are "compile time duck typed". The benefit is that you get lose typing constructs that are evaluated strictly and at type check time, which is kinda nutty. It means that you can lean really heavily on the compiler.

Sort of like using Python to generate Typescript, as random example - my Python code doesn't have to typecheck, but its output does, so I can do absurd shit in Python and still feel good about the output.

One example is something like this: https://www.typescriptlang.org/docs/handbook/2/template-lite...

These are types that are built from string templates. Since strings are loose and can be manipulated in crazy ways like appending, we can now manipulate types in the same way. We can write types that are themselves parsers.

So idk if that's good or not, the downside in C++ is that TMP errors are fucking insane, but the upside is that I can have a function that says "pass me something and I'll call "iter" on it and I don't care what that thing is".

It also feelsy kinda more "typey". Types are just values. Types are just strings or numbers or whatever. They're things, with the constraint being that they must exist concretely (or be inferrable) when the type checker runs. No distinction between types and values seems like it's the ideal.

Which allows for things like this type that implements a simplified SQL query parser checked against a provided 'database' object:

https://github.com/codemix/ts-sql

This project was my go-to "nifty but pointless" example for TS string literal types before this article :)

Yeah I saw that was cited and I love it. It's insane but super cool and I could imagine the approach being used for something similar to https://crates.io/crates/sqlx although there's probably better ways to do it lol

Reply on news.ycombinator.com