Go back
Blog
Ulam Labs Logo

TypeScript Tutorial: How To Use TypeScript In Practice?

Software Development

TypeScript Tutorial: How To Use TypeScript In Practice?

September 29, 2020
, by 
Krystian Siwek

After reading the previous article aboutwhy 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!

        Want to learn more about JavaScript?    

Have questions regarding developing
your project?

Get in touch

Latest stories

Read more stories about Ulam Labs and crypto-space wrote by our specialists and engineers.

Legacy APIs and How To Integrate Them with Django, Celery, and A Lil' Bit of Tenacity

How do you envision premedical IT services?They should be reliable. After all, they support the medical sector, right? And they are reliable. Since I've started working for Medishout

Read more

FinTech Consulting 101: How To Get The Most Out of It?

In spite of the COVID-19 pandemic slowing down the global economy, one particular industry has been making remarkable progress. This is the Fintech which is expanding exponentially...

Read more

Managing State In React Apps: Redux vs React Context

When creating a React application, eventually we will come across a point where we need to pass some data from one component to another. And what is the simplest way to do this?...

Read more