Typescript Basics: Interfaces, Literal Types, Unions and Intersection Types (Part 2)
This is a Part 2 of my Typescript Basics blog post, feel free to read Part 1 where I talk about types and basic usage.
Typescript Interfaces
Interfaces allow us to define a “shape” of our expected values.
Interfaces allow Typescript to check that the value has the same shape or properties as the interface defines. In the example below, chops is missing the properties, quantity, when chips are passed as an argument to eatSnack, Typescript gives you a “Argument of type ‘…’ is not assignable to parameter of type ‘…’” warning message that chips are not the shape of the interface Snack.
Optional Properties
Similar to option parameters in functions, you can set optional properties with a ? after property name.
Objects and Interfaces:
Objects are not as simple to type as strings and numbers are, because Typescript wants to know the form of the object. In my example below, I typed filterValues to be an object, however I was getting an error that said “Property ‘label’ does not exist on type ‘object’”
Even though filterValues was an object type, with a property of label.
So I created an interface for FilterValues, and set that value to filterValues in the Prop interface.
Literal Types:
With literal types you can set an exact value as a type. There are three types of Literal Types: string, number, boolean.
String Literal Types:
You can set a literal type with the keyword type
Or you can set them in the function.
Or you can set them in an interface.
Numeric Literal Types:
Work similar to the string literals, but with number types. You can set a type to be a certain number or set of numbers.
The as keyword is a Type Assertion that tell the compiler to interpret the object as particular type other than the type the compiler believes it to be.
Boolean Literal Types:
Boolean Literal Types are used to constrain object values where properties are related to one another.
Literal Narrowing:
Literal Narrowing happens in Typescript when you declare a variable with const. You are telling the compiler that the variable will not change isn’t value, therefore it types it as the value instead of a string, number, or boolean.
Declaring with let in Typescript types the variable as a string, whereas declaring with const types it to the value, and this is called literal narrowing.
Union Types:
In the case where you have a variable that might be different types, you could use any, or you could use a union type if it will be one of a few options, such as a number or a string.
In the above example the argument of time passed to snackTime() can either be a number or a string.
However the functions used on the variable must be accessible for all types in the union. For instance, you could not have a parameter be a string if you are using it in a Math.random() function.
Union Types are often used to narrow down a type of two or more interfaces with different shapes.
Intersection Types:
Intersection types are similar to union types except they combine multiple types into one. Intersection types use an ampersand & between the two combined types instead of a bar | .
Now I’m hungry. 😋
