Essential TypeScript Types — Get Started with TypeScript
To begin using TypeScript, you must have the compiler installed which can be done through npm. Follow this article if you would like a more in-depth guide to installing and getting started with TypeScript. Be sure that you are always working in a .ts file and compiling your code using tsc.
To declare a variable type, you can simply add colon : next to the declaration followed by the variable type.
TypeScript is also able to infer types based on the first variable declaration, so in the previous instance, the types are not actually required for TypeScript to correctly identify the variables.
A use-case for declaring types would be a function definition. You define the parameters sothat the function is always invoked correctly.
TypeScript has very clean syntax to handle arrays. You define the type of values in the array follow by braces .
Objects as Interfaces
When defining a function on an interface, you define the types of the arguments and the type of the return value. In this case, it takes a single argument number and then returns a number.
To define an array of objects, the syntax is identical to defining it with primitive types. You use the name of the interface followed by braces. Below is an array of Product objects.
While the concept of extending interfaces is more advanced, I’ll introduce here to provide familiarity. There can be cases when you want to create a base interface and then have other interfaces that inherit from it. For example, we previously created a Product interface which defines the essential values that belong to a product. We could now create specialized products which will receive all the properties of the original product as well as new ones defined on the interface. This is done using the word extends.
Our Computer interface contains all the properties associated with a Product as well as it’s own unique properties. By extending interfaces, you are able to reduce code duplication and create logical base cases.
Null and Undefined and Unions
TypeScript provides built-in types for both null and undefined which are defined by using their names.
By themselves, this is not too useful. However, you can combine types in TypeScript by using a union indicated by a |.
In this case, favoriteAthlete can either be a string or it can be null. Not everyone may care about sports :)
Since undefined values are common in objects, there is a special syntax for indicating that a key/value is optional (meaning it will be undefined if not added). This is accomplished by adding a ? next to the key name.
Special TypeScript Types
Enum: Create named maps in TypeScript
Any: It will work with any value and not throw a TypeScript error.any should only be used if the value can truly be anything or it’s unknown, and you are prepared to handle that in your code.
Void: void is the opposite of any — the value has no type at all. Void is used most commonly with functions that do not return.
If you can learn these fundamental TypeScript types, you are well on your way to being able to use the language. In fact, these will cover probably cover at least 80% of your use-cases in daily coding, and you should now be able to dive in and start working with TypeScript. When you feel ready, check out some more advanced TypeScript examples.