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
You probably already know most of the basic types if you are familiar with JavaScript, simply because TypeScript uses the same scalar types. But it also adds a few new ones. Let’s look at some examples featuring already-known 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
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.
Enum
Next, we have a really useful addition to standard datatypes provided by JavaScript, called enum. Many object-oriented programming languages use enums. They let us declare a set of named constants like a collection of related values, used when a variable can only take its value from a small set like the defined enum. By default, enums start numbering from 0, but we can also manually set the value or values after it will increment by one.
Any
Unknown
Void
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.
Never
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
npm Typescript
yarn
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
interfaces.ts
enums.ts
types.ts
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!
