Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:14Length:1.2 hours
Typescript fundamentals 400x277
  • Overview
  • Transcript

2.9 Advanced TypeScript

Hi and welcome back to TypeScript Fundamentals. In this lesson, I'm going to talk about some advanced topics that can be quite handy to use. Let's start with a constructor. Usually when you pass in parameters, you want to set them on the instance somewhere. This means that you have to declare the variable with its type and visibility, create a constructive parameter, and then set the instance variable using this. If you have to repeat these steps over and over again, it can be really tedious. That's why there is a handy feature in TypeScript that lets you do it all at once. Just put the visibility right into the parameter definition and you're all done. No more duplicating of steps in TypeScript. You will love this feature when you work with frameworks that use dependency injection through constructive parameters like does. Another topic pertaining functions is type cards. They have a similar responsibility as discriminated unions have. Sometimes it's important that we know the specific type of a union. One common way to determine a type is by determining the presence of a member, for instance a function. But when using TypeScript, only the members that are present in all types of the union can be access by default. You would have to use multiple type of sessions to get the code working properly. With type cards, we can determine the type of an object by using a function. This function will have a so-called type predicate as a return type whether is keyword. Its purpose is to determine if an object is of the type in question and the function will return true or false. Instead of determining the accessibility of the member in the main function, we simply have to call the type card. And TypeScript will narrow down the type within the block and give us access to all the specifics functions. There are also built in type guards in the form of typeof. This kind of guard only works for the primitive types number, string, boolean, and symbol. And for all other types, there are the instance of type guards that you probably already know from JavaScript. The final topic I want to talk about is mixins. JavaScript and TypeScript both only support single inheritance. Which means that a class can only derive from a single other class. Composing classes from multiple components is not possible this way. Mixins, which are also call traits or concerns in other frameworks or languages, are a way to do just that. With mixins, a class doesn't extend another class to add functionality, but rather than mixins does it by adding it to the base class. There are few ways how to implement mixins. The TypeScript documentation gives one example. But I like another technique much more, as it feels cleaner and is more suitable for larger projects, as it hides it's complexity behind exports. First of all, you need a constructor type. It is important for typing your mixins and is very generic. A mixin here is a function. The TypeScript documentation uses classes for mixins but here it is a function. It returns a new class which extends the base class with edit functionality, like a log function. Here it's important that the base class is of type constructor, which it means it has one. Let's add another one that has a now variable. To get the extended class, all we have to do is to call the functions and pass in the base class. In a module, you can simply export the extended class to hide the implementation detail. Let's recap. Constructors can directly declare and set instance variables for parameters by adding an access modifier to the parameter itself. Type guards narrow down the type for unions by using is, typeof, or instanceof. With mixins, you can extend the class of multiple components, which isn't possible with just inheritance. Mixins are functions that create a new class from the base. In the next lesson, I'm going to talk about six things that are done differently compared to regular JavaScript. See you then.

Back to the top