2 NEW killer features coming to TypeScript
Tags: typescript, programming, webdev, javascript
Published: 2022-05-05 23:16:13

![New TS features](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3mkkpj3r8nfoec68jf0b.png)
 
## TypeScript 4.7

This [upcoming TypeScript version](https://devblogs.microsoft.com/typescript/announcing-typescript-4-7-beta) 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](https://devblogs.microsoft.com/typescript/announcing-typescript-4-7-beta/#instantiation-expressions)**

2- **[`extends` Constraints on `infer` Type Variables](https://devblogs.microsoft.com/typescript/announcing-typescript-4-7-beta/#instantiation-expressions)**

### 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:
```ts
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

```ts
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

```ts
// 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

```ts
// 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](https://www.typescriptlang.org/play)

---

_Make sure to follow me on [twitter](https://twitter.com/P_FFigueiredo) if you want to read about TypeScript best practices or just web development in general!_