2 NEW killer features coming to TypeScript

TypeScript 4.7

This upcoming TypeScript version will bring a lot of new features and improvements to the language, but there are 2 in particular that I found especially interesting:

1- Instatiation Expressions

2- extends Constraints on infer Type Variables

New features value

If you are anything like me and enjoy creating complex type definitions that provide great levels of Developer Experience to you and your co-workers, then you should absolutely be on top of these new features, as they will ease the way you write those type definitions, by A LOT.

• Reduce your types complexity;
• Reduce your types verbosity;
• Decrease the amount of workarounds;

Instantiation Expressions

For anyone that has written more than a handful of generic functions, this new feature is probably something that could have saved you from writing "crappy" JS workarounds to get some types going.

Instantiation Expressions will allow us to get a generic type, without the "instantiation" part 🤯

Before 4.7:

type Dog = {
  name: string
  isGoodBoy: boolean;
}

type Cat = {
  name: string
}

function getBigPet<T>(pet: T){
    return {...pet, big: true}
}

// 1- Need to have a typed param to pass 👎
const dog: Dog = {name: "Jake", isGoodBoy: true}

// 2- Need to create an arrow function 👎
const getBigDog = () => getBigPet(dog);

Before this upcoming version, there was really no way to leverage a generic function's type, which led many of us to create workarounds by writing unnecessary JS code. ❌

After 4.7

type Dog = {
  name: string
  isGoodBoy: boolean;
}

type Cat = {
  name: string
}

function getBigPet<T>(pet: T){
    return {...pet, big: true}
}

// Can "instantiate" on the fly ✅
const getBigDog = getBigPet<Dog>;

// No need to bring in any extra types ✅
type BigCat = ReturnType<typeof getBigPet<Cat>>

So, what Instantiation Expressions bring to the table, is the simplicity with which one can retrieve a generic function's type without any sort of workarounds or creating any extra JS code.

PROS

• No need to write JS code just for the sake of typing;
• The types API gets simplified;
• Leveraging function's ReturnType just became a first-class citizen;

extends Constraints on infer Type Variables

This new feature is something that will help anyone to write way less verbose types when depending on inferred type constraints.

It basically acts as an early return statement that we (developers), many times use in languages like JavaScript to immediately move away to the "false" logical path, when some conditional is met.

Before 4.7

// A type that returns the First and Last elements of the Number type 

// 😔😔😔 This feels overwhelming...
type FirstAndLastNumber<T extends any[]> = T extends [
  infer Head,
  ...any,
  infer Tail
]
  ? Head extends number
    ? Tail extends number
      ? [Head, Tail]
      : never
    : never
  : never;

Before this upcoming feature, there was no way to do an "early check" on the inferred types, and because of that, we ended up creating very verbose and "scary" types. ❌

After 4.7

// The "same" type as before 🤯🤯🤯
type FirstAndLastNumber<T extends any[]> = T extends [

// 1- Add the extends constraint here
  infer Head extends number,
  ...any,

// 2- Add the extends constraint here
  infer Tail extends number
] ? [Head, Tail]: never;

extends Constraints on infer Type Variables really simplifies the process of defining types that rely on inferred type variables - more than a syntax change, this feature really takes the mental model of creating types one step closer to the one we use in "real programming".

PROS
1- Cleaner and less verbose types;
2- Lowers the complexity barrier for others to touch this otherwise "monstrosity" type;
3- TypeScript compiler will be faster because it can return earlier;

Conclusion

By taking advantage of TypeScript's 4.7 version new features, you will be able to lower the complexity of type definitions by a lot, making it way easier for anyone to understand and even develop on top of those types.

P.S. You can already try these new features in the TypeScript Playground

---

Make sure to follow me on twitter if you want to read about TypeScript best practices or just web development in general!