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

2.8 Advanced Types

Hi, and welcome back to TypeScript Fundamentals. In this lesson, I am going to show you some advanced types that are available in TypeScript. Sometimes you want to have a possibility to accept multiple different type for an input, but you don't want to use any since it's too broad. This is a perfect example for the first advanced type I wanted to show you, union types. Union types combine different single types together and allow all of them. Let's say you either want to accept a number or a string, by using a vertical line, you can do both. Similarly, you can root acquire a type to have multiple types so you have all the functionality you need. This is called an intersection type, you can combine them with an ampersand. Doing so allows you to access functions and properties from a combination of interfaces or types. For example, you could require a type to be of a specific class, and therefore its sub classes. But you could also require it to implement the loggable all serializable interfaces. Now let's talk about the type that you might know from other languages like Ruby. Symbols, a symbol is an inmutable and unique type. This means that two symbols can never be equal when compared. You can create a symbol with the symbol constructor and add an optional key. You can also use to mess keys in an object. I'm not sure how useful symbols can be in your everyday development, but I mentioned them because they have been added to ES2015 and our primitive data type, just like number or string. The next one isn't really a type, but it's useful nonetheless. I'm talking about type aliases. Aliases are useful if you want to name a primitive or custom type, function, signature or tuple in a way that makes sense for the application logic. For instance, you might want to create a type from a union or intersection type or a callback function. Aliases are very similar to interfaces, but they don't create new types, they're just giving them new names. Next on my list are literal types. You can use them with strings and numbers. Literals only accept very specific values you can define. If you want, for example, to have list of options, but don't want to create a separate enum for it, you can use string literals. Or you might want to have a dayOfTheWeek variable but only accept values from 1 to 7. Another interesting feature that is mainly used to take advantage of the compiler is called discriminated unions. Let's say you have a union type, like shape, that is either a square, rectangle, or circle. Each of these types has a property that is present in all types, called kind and some properties are specific to them. Here's a function to calculate the area of a shape. Since the formula of calculating an area is different for all kinds of shapes this would be a problem normally. Because TypeScript can't guarantee there will be a radius property on the shape because it could be a square or a rectangle. Discriminated unions make that possible however. The discriminant, or tag, it is present in different on all types will act as a type identifier automatically. In our example here, we can use a switch statement on the kind to separate the types and use the unique properties in the case part, pretty neat. Let's recap, union and intersection types can be used to make sure that a type is either one of multiple types or all of them. Symbols are an ES2015 feature that is also available in TypeScript. They are always unique and immutable. Literal types are available for strings and numbers, and allow you to specify explicit values a type can hold. Discriminated unions add flexibility and functions, working with unions that need to access type-specific properties or functions. In our next lesson, I'm going to tell you more about some tips and tricks on more advanced topics of TypeScript. See you there.

Back to the top