Hacker News new | ask | show | jobs
by skywal_l 1709 days ago
Utility Types[0] will help you get to the next level on Typescript. It's important to know them and know how and when to use them.

[0] https://www.typescriptlang.org/docs/handbook/utility-types.h...

5 comments

I recently saw a code example in the VSCode repository where Extract was used in a really awesome way. Say you have a complex class with lots of fields and methods, and you want something that's a specifier for either a constructor's parameter or a query system. Often times, that will be very similar to the underlying class, but just the fields in it - excluding every member that's not a function. Instead of rewriting every single field name for your new type, just have your new type be Exclude<MyType, Function> or Partial<Exclude<MyType, Function>> and the resulting type is perfect for your needs.

Pick is also really useful if you have an interface that passes down a subset of complex things you get from a library; no need to retype their types, just extend a Pick of the library type.

In short, utility types are awesome!

Funnily enough, I have done a session today where I live-coded using the utility types in an effort to explain most of the types listed on that page to a few of my colleagues.
Wow, thanks for this. I wasn't even aware of these.

I'm surprised I rarely see these in courses/tutorial. These should be like day 1 material.

Typescript is actually a great language. And with those utility types, you can do pretty fun stuff like, for example, you want to mutate a type so that some fields become mandatory:

    type Ensure<T, K extends keyof T> = T & { [U in keyof Pick<T, K>]-?: T[U] };

    class A {
      foo?: number;
      bar?: number;
      baz?: number;
    }

    type MandatoryFields = "foo" | "baz";

    type B = Ensure<A, MandatoryFields>;

    const b: B = { foo: 42 };
Here, ts will complain that b is missing baz.
Why write code like that, instead of extending the class with a mandatory property? The above code is going to be inscrutable to a lot of engineers, and this isn't something like an ORM where there's a good reason for that.
A better example is `Partial`, which makes all properties on an interface optional. Lots of use cases for that, like creating a `Dictionary` type that forces you to check for undefined values, or allowing you to support partial-updates to types without having to repeat your interfaces.

The other thing is that types are more often used than read. You don't need to read the `MandatoryFields` type definition often, because your IDE/typechecker will automatically enforce the contract and tell you when you're missing properties.

TIL, interfaces can extend classes in TypeScript. [0] If interfaces could not extend classes, that would be a reason to use type programming.

Another reason could be a generic interface. If you have a lifecycle where a type is mutable at one point but immutable at later points, you could use mapped types to enforce those constraints on the class methods generically.

[0]: https://www.typescriptlang.org/play?#code/MYGwhgzhAEAKCmAnCB...

Utility types are useful for example in the React API. You have a "state" defined as a set of properties. Then you have a setState() method where you return the set of properties you want to update, which may be a subset of the full state. So if the type of the component state is TState, then the return type of setState() can be defined as Partial<TState>.
The advantage here is that you are not repeating the type of the property twice (once as optional in the base type, once as mandatory in the extended class).

Even though the code may seem inscrutable, note that the resulting type is fairly easy to understand in your IDE. That is, if you hover over the "B" to see what the type definition is, you see:

  type B = A & {
    foo: number;
    baz: number;
  }
If you defined the type like this (which is equivalent to extending the class as you were proposing) and later on someone changes the type of one such mandatory properties in the base and/or extended class without changing the other, the error becomes much much weird, on the lines of:

> Type 'number' is not assignable to type 'never'.(2322)

Here typescript is saying that a prop cannot have a value (type never) because the base class defines it as "number?" but the extended one defines it as "string", and the intersection between them is empty. This is hard to understand when it pops out where you don't expect it. Harder than ignoring the weird "Ensure" thing, seeing what it does (the resulting type B definition) and moving on.

Defining advanced types may be cumbersome, but dealing with code that uses them is still approachable. This allows the more experienced team members to "shape the ground" and less experienced members still reap the benefits even if they don't fully understand how the thing works.

The beginner programmer copies the property definition.

The advanced programmer simply writes "type Ensure<T, K extends keyof T> = T & { [U in keyof Pick<T, K>]-?: T[U] };", thus removing the need to copy the property.

The master programmer copies the property definition.

Consider it in the context of a framework like React. The type of setState() is defined as Partial<State>. The framework cannot just copy paste the type definition with properties set to optional, since the state type is defined by the user and specific for each component. Without type helpers there would be no way for a framework to define the type for setState().

I'm not sure how often you would need type helpers in application code, for frameworks and libraries they are a godsend.

Your argument is a bit like saying we don't need parameterized types like Array<T> because you can just copy paste the code for each type.

Do you have some argument? Without arguments, your comment has as much substance as me replying:

The beginner programmer copy/pastes the code.

The advanced programmer writes a function, thus removing the need to maintain copies of the code.

The master programmer copy/pastes the code.

It is not like "Ensure" would be a single-use thing. "Ensure" here is a utility type definition, which is what a "function in the world of types" would be.

I'm building a strongly typed form abstraction layer for work. I use code like this to express "if this generic can be undefined, this field is required. Otherwise it cannot be used".

So: FormElement<string|undefined> needs to have a "disabled" function, indicating conditions under which it becomes disabled (and absent from the model), while FormElement<string> must not have a disabled function, as it will always be present in the model.

One pitfall of this approach is it requires a lot of trial and error to find the incantation that both works and doesn't swallow error messages.

This seems extremely hard to read for me, I would have an hard time trying to understand what it does if I found it in any source code

    type Ensure
I define a type called Ensure

    <T, K extends keyof T>
This type takes two type parameters, one called T and the other K which will consist of Keys belonging to the type T (in our case, "foo", "bar" or "baz").

    = T & 
This new type (called Ensure) will be equal to the union of two types: One will be T and the other will be:

    { [U in keyof Pick<T, K>]
A new type which keys will be picked among the key listed in K

    -?
To which we will remove the potential optional qualifier

    : T[U] };
And which types will be the same as in T.
This feels like considerable cognitive load for any developer that needs to work in more than one language.
Most of the implementation details here don't really matter until you need to modify these advanced types directly. That Ensure type definition line in that example is a low level detail that you put in a library somewhere, import throughout your codebase, and then mostly forget about.

In practice you'd have someone that understands this set it up once, and then document its usage for others, maybe document the implementation to make it easier to modify later.

The TS compiler is surprisingly good at giving you good readable error messages as well when your code violates these advanced types; the errors tell you what you specified and what is supported, it doesn't display the low level type logic as part of the error users see. This means that there's very little need for anyone to really how these type definitions work.

EDIT: clarifications and spelling.

Isn't that the main challenge of being a programmer? Anyways I don't find it hard to read, but I write TS like that every day
> This new type (called Ensure) will be equal to the union of two types

You mean intersection, right?

EDIT: link to docs on intersection types: https://www.typescriptlang.org/docs/handbook/2/objects.html#...

Only one small terminology issue: & is an intersection of types, a union is |. So Ensure is an intersection of T and the latter type.

Wouldn't Required suffice here as well for this as opposed to removing the optional qualifier?

Me, reading the link at the top of this thread: oh wow, those are really cool.

Me, reading this example: oh no, those all need to be added to our project's lint rules to make sure no-one uses them.

Why would you prevent their usage? They're incredibly helpful
I guess it'd be OK as long as everyone always accompanied such lines with a comment, with at least one line per symbol or character it's identifying & explaining. As all but the most trivial regexes warrant.
Just have a concrete type (class/interface) that specifies required fields.

This is overkill that will only confuse everyone who isn't the original author.

I don't have it handy but with template literal types I was able to have a type of "stripped strings" (that is, strings without leading or trailing whitespace) that seemed surprisingly usable - string literals would match (or not, as appropriate) with no boilerplate, while dynamic strings would need to be fed to a cleaning function.

I never put it in production, partially because of concerns over maintainability but far more because I had no need for it.

Ok, the comments that this is a little hard to read are fair... but this is really cool. Thanks for sharing.
Depends on how much you can learn on one day I guess, but TypeScript have lots of features which should be learned before Utility types. For example type parameters, type unions, the role of null and undefined, type assertions etc.
TS has been around long enough that it suffers from the 'obsolete tutorial' problem (one I first observed learning C++): many of the utility types didn't exist when many of the popular tutorials were first written.
I really don't get the point of operations on types such as 'type TodoInfo = Omit<Todo, "completed" | "createdAt">'. Is this a real use case? Why not just literally write down the properties? Surely easier to read and in the end maybe even easier to maintain.
It depends on what your anticipation of the future evolution of TodoInfo type is.

If you think it will have more special fields like completed and createdAt that you don't want to pass on in most contexts, then it's better to list the fields that you want to pass on.

But if you expect it to not have more of those and rather get (or loose) more fields that you want to pass on, then it's better to list the ones that you want to omit.

Another trade-off might be that when the new field is added and you'll forget to update the other pieces of code, will it do less harm to pass the field you intended to omit, or to omit the field you intended to pass. Or which error will be easier for you to discover in your use case.

A higher order react component that consumes those props and swallows them before passing down to the target.
Renaming attributes propogates through these types. It makes refactoring better.
the only complain have with these is that there is no namespace or anything that allows me to discover them. You have to follow all the release notes or check lib.d.ts. In comparison, flowtype prefixes them with $, so when I type "$", I get the suggestion.