Video details

5 Typescript Tricks for Angular | Alain Chautard | ng-conf 2021


In this talk, I will showcase 5 lesser-known Typescript tips and tricks that developers use every single day in their Angular applications. Those tips will help you use the Typescript language at its fullest when working with Angular.
ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. 1000's of developers from across the globe join together to attend talks and workshops by the Angular team and other community experts.
Follow us on twitter​
Official Website:


Hi everyone. My name is Alan, and today I'm going to show you five different types of tricks for Angular in just five minutes. So trick number one is for when we have to work with JSON data received from a third party API or backend service that does not provide type information. The idea is to use tools to generate type data because types are really one of the best features of TypeScript, so we really want to use them with JSON twoTS. Com. You can copy, paste your JSON. Click one button and you get interfaces with the proper types insert, including properties that are optional and even nested objects. So it's really powerful and a huge time saver that use pretty much every day. Trick number two is for data that we have to retrieve from different endpoints. Sometimes we have to make different Http requests to build a specific object. In my example here we have three properties that come from one request and final property options that comes from another Http request. And the problem is that the TypeScript compiler doesn't really like objects that do not have all of the required properties. So in my case here options is the missing property. I could make it optional in TypeScript in my interface, but that would be cheating. So instead TypeScript gives us a generic type called partial, and it allows us to do exactly that. Build an object in a temporary state that does not have all of its properties yet. So problem solved. We don't have to change our interface and the compiler is happy. Trick number three is to use Union types instead of enormous, and that's because enums in TypeScript. They don't have that many features compared to other languages, and they end up being compiled to a big monster of JavaScript that basically takes place in your code. On the other hand, if you use Union types, they are much shorter and leaner. They are just strings in my example here, and they don't get compiled into anything, which is great. You can also have more complexity with them and use them as a combination of more complex types, which is also great. Trick number four is the knowledge coalescing operator or the double question Mark, which allows us to simplify our code a lot when we want to assign a default value to a variable if the value is not undefined. So that's something that we do a lot. And in the past smart JavaScript developers they've been using the logical or operator to do that. But the thing is zero, not a number, and empty strings are false values in JavaScript. So if your value is zero or an empty string, then we have a problem and you might end up using the default value by accident. And this behavior is fixed by the double question Mark operator. So that's why I suggest to use it. It is much better from that perspective. And the final trick I wanted to share with you. Today is path mapping because nobody likes very long imports like this one import something from. Instead we want them short and sweet like it's stock, for instance. So the solution to do that is to edit your Tsconfig file and add all of the path that you want to be able to shorten. And then as soon as you've done that, you can use the shorter import names in your code and the compiler will know where to find those folders. So these are my five types of tricks for today. Use JSON twoTS dot com to generate your type information. Automatically use partial to build objects piece by piece. Use unit types instead of enemies because they're more efficient. Use the knowledge courtesy Operator double question Mark because it is safer than the logical or operator. And finally using path mapping to simplify our verbal type. Script imports thanks a lot for your attention and I hope you enjoy the rest of the conference.