TypeScript is bringing 2 incredible new features to the table, stay on top of what’s coming!TypeScript 4.7This 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 Expressions2- extends Constraints on infer Type VariablesNew features valueIf 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 verbosity;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 🤯type Dog = {name: stringisGoodBoy: boolean;}type Cat = {name: string}function getBigPet(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. ❌type Dog = {name: stringisGoodBoy: boolean;}type Cat = {name: string}function getBigPet(pet: T){return {…pet, big: true}}// Can “instantiate” on the fly ✅const getBigDog = getBigPet;// No need to bring in any extra types ✅type BigCat = ReturnType>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.PROSNo need to write JS code just for the sake of typing;extends Constraints on infer Type VariablesThis 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.// A type that returns the First and Last elements of the Number type // 😔😔😔 This feels overwhelming…type FirstAndLastNumber = 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 [// 1- Add the extends constraint hereinfer Head extends number,…any,// 2- Add the extends constraint hereinfer 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”.PROS1- 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;ConclusionBy 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 PlaygroundMake sure to follow me on twitter if you want to read about TypeScript best practices or just web development in general!TypeScript is bringing 2 incredible new features to the table, stay on top of what’s coming!TypeScript 4.7This 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 Expressions2- extends Constraints on infer Type VariablesNew features valueIf 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 verbosity;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 🤯type Dog = {name: stringisGoodBoy: boolean;}type Cat = {name: string}function getBigPet(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. ❌type Dog = {name: stringisGoodBoy: boolean;}type Cat = {name: string}function getBigPet(pet: T){return {…pet, big: true}}// Can “instantiate” on the fly ✅const getBigDog = getBigPet;// No need to bring in any extra types ✅type BigCat = ReturnType>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.PROSNo need to write JS code just for the sake of typing;extends Constraints on infer Type VariablesThis 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.// A type that returns the First and Last elements of the Number type // 😔😔😔 This feels overwhelming…type FirstAndLastNumber = 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 [// 1- Add the extends constraint hereinfer Head extends number,…any,// 2- Add the extends constraint hereinfer 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”.PROS1- 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;ConclusionBy 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 PlaygroundMake sure to follow me on twitter if you want to read about TypeScript best practices or just web development in general!

Published by Artificialcybernet

cyber security guard

Leave a comment

Design a site like this with WordPress.com
Get started