After reading the previous article about why you should start using TypeScript, you probably asked yourself - “ok, but how do I use TypeScript in practice?”. This TypeScript tutorial will help you learn how to use this programming language step by step.
TypeScript tutorial: Basic types
But what if we want to create a variable that’s an array of certain type values? There are two ways to do that.
Now we’ve introduced you to widely known types, we can start to focus on the new ones added by TypeScript. A few of them help us with typing.
Tuple type allows you to define an array with a fixed length of elements, which types are selected and can’t be different. When initializing a tuple value, the values must be in the order provided when defining tuple.
Void is often used in functions or props to show that they don’t return anything. When used in variables, you can only assign null or undefined to them.
This is used for values that never occur. It’s similar to void, but generally used for functions that throw an exception or have an infinite loop.
Typescript tutorial: Interface
One of my favorite features of TypeScript is interfaces. We use them to define the structure the object we assign it to should follow. They come handy when typing responses from an API. Let’s look at an example from the Rick and Morty API.
Here’s the response we get when we make a GET request for a character with an id of 2. We can make an interface for it and keep the code consistent.
Using Vue and React TypeScript
Now, let’s compare the usage of TypeScript in two really simple button components that can do the same thing. One is written in Vue 3, the other one in React.
React TypeScript in action
We can also use TypeScript in class-based components.
The interfaces for props and state are passed in arrow brackets when the component class is being created. When we specify the state in it, we don’t have to use type again on that variable. For the render function, the result is ReactNode from the standard react library.
Vue TypeScript in action (Vue 3)
TypeScript tutotial: Import
This way we can easily import them in components from one file, keeping the code clean.
This is probably most of the basic things that you need to know when starting to use TypeScript. Of course, TS provides a lot more advanced features, things like Classes, Unions, Intersections, and something called Generics - we’ll dive into that one in the future.
TypeScript provides a wide range of useful and productivity-boosting tools. So stay ahead of technology trends and start using it today!