Getting Started With React and TypeScript Pt.3 — Interfaces, Components & Hooks

Alex Devero
Dec 16, 2019 · 11 min read

Get started with React and TypeScript today. This tutorial will help you learn about interfaces and how to use them with class and functional components. It will also help you learn how to annotate React hooks. Learn what you need to know to get started with React and TypeScript!

Table of Contents:

Interfaces

  • Optional properties
  • Readonly properties
  • Extending interfaces
  • Exporting interfaces
  • Interfaces and compilation

Putting React and TypeScript together

  • Class components
  • Functional components
  • Hooks

Conclusion: Getting Started With React and TypeScript

Getting Started With React and TypeScript Part 1.

Getting Started With React and TypeScript Part 2.

Getting Started With React and TypeScript Part 4.

Interfaces

In the previous part, you’ve learned what types you can work with in React and TypeScript. You’ve also learned about type inference so you know when it is up to you to annotate your code and when TypeScript will do this work for you. One thing that can help you a lot are interfaces.

Put simply, an interface is a object-like collection of types. It is used to describe the shape, or structure, of some data. This data can be anything, function parameters (objects and arrays), data inside data types, class props, state props and variables. Types in interface are structured in the form of key/value pairs.

In each pair, the key is the property that exists, or could exist, in the data you want to describe. The value is the data type of that property, specified as a key. The syntax of an interface will probably look familiar. It looks very similar to the syntax of object literal. There are few differences. First, interface has to start with interface keyword.

This keyword precedes the name of the interface. Second, there is no equal sign between the name of the interface and the collection of key/value pairs. Third, key/value pairs inside an interface can be separated either by commas (,) or by semicolons (;). Both will work. So, it depends on you which one you choose to use.

Fourth, in the terms of naming conventions, always start the name of the interface with capital letter, just like a class. Fifth, again some naming conventions, it is a good practice to end the name of the interface with “Interface” word.

Another practice is to start the name of the interface with “I” letter. This makes it clear what is interface and what is not. Let’s take a look at some simple examples of interfaces.

Optional properties

When you are not sure some property exist on the data you are describing you can also mark that property as optional. You can do this by adding ? at the end of the property name (property?: string). This will tell TypeScript to expect this property, but it not require it.

So, if that optional property doesn’t exist on the data, on which you used the interface, TypeScript will not complain and compile your code. Otherwise, it will show warning and will not let your code compile. So, remember, any property that is not optional is automatically required.

Readonly properties

In some cases, you might want to prevent change some properties after they are set for the first time. Interfaces allow this as well. All you have to do is add readonly word before the name of the property. Then, when you try to overwrite this property, after you assign it, TypeScript will warn you that the property is read-only.

Extending interfaces

Interesting thing about interface is that you can also extend one interface with another, or more (separated by commas). This is similar to JavaScript classes. So, when one interface extends another that interface will inherit its shape. It will contain all key/value pairs and you can then add some more if you want.

Exporting interfaces

In ES6 and above, there is the option to use export and import statement to export and import snippets of your code. These two statements can be quite handy when you work with interfaces. You can put all interfaces in one file, export them and import them where you need them. This can help you keep your code organized.

It can also help you reduce the size of your codebase. You don’t have to re-declare some interface over and over again just because some objects, or data, have the same shape. Instead, you can declare that interface once, export it, and import it any time, and at any place, you need it.

When you want to export some interface put the export keyword before the interface keyword during the declaration. When you want to import it somewhere and use it, use the import statement and correct name of the interface.

Interfaces and compilation

One important thing about interfaces. Interfaces will not show when you compile your React and TypeScript, or just TypeScript, code to JavaScript. TypeScript uses interfaces only for type checking during the runtime and compilation. However, TypeScript will not compile them. So, you don’t have to worry your JavaScript will get bloated. It will not.

The whole code above will compile to these few lines:

Putting React and TypeScript together

You know about what types are available in TypeScript. You also know about interfaces and how to use them annotate your code. Now, let’s take a look at how to use React and TypeScript together. Let’s take a look at how to properly annotate class and functional components and hooks.

Class components

Class components are no longer used as often as they once were. However, they are still used in React. So, it is still good to know how to write them in projects built with React and TypeScript. With classes, there are two options for types. You can provide the class with types for props and for state.

When you declare new class, types for props and for state go between the brackets that follow after the extends React.Component and before opening curly bracket. Remember that it is in this exact order. Types for props are always first and types for state second. You can also, optionally, annotate the class state itself.

When you want to leave one of the types empty, you can add empty object inside the curly brackets instead of the interface object. If you don’t want to use interfaces, you can also provide the types for prop and state directly, through the objects inside brackets.

Functional components

Annotating functions is even easier than classes since there is no state and, as is in older JS, no constructor. You declare your functional component as you would normally. If it accepts some props, you use interface to annotate these props. Or, you can also annotate props directly.

Hooks

Annotating hooks is very easy. If you initialize a hook with some default value TypeScript will infer its type for you. So, you don’t have to anything. If you initialize without a value you can add its type inside brackets right after the name of the hook and before the parenthesis (i.e. React.useState<type>()).

Let’s take a look at examples of the three most popular hooks, useState, useRef and useReducer.

Example of useState hook:

Example of useRef hook:

Example of useReducer hook:

Conclusion: Getting Started With React and TypeScript

Congratulations! You’ve just finished the third part of getting started with React and TypeScript tutorial. Today you’ve learned what are interfaces and how to use them. You’ve also learned how to annotate class and functional components and the three most popular hooks properly.

Now,take what you’ve learned today and apply it. For example, give it a try and build your first app with React and TypeScript from scratch. Or, take existing React project and rewrite it using React and TypeScript. Whatever you choose, just make sure to do something with what you’ve learned. Otherwise, you will forget most of it.

If you liked this article, then please consider subscribing.

Originally published at Alex Devero Blog.

JavaScript in Plain English

Learn the web's most important programming language.

Alex Devero

Written by

I'm Founder/CEO of DEVERO Corporation. Entrepreneur, designer, developer. My mission and MTP is to accelerate the development of humankind through technology.

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade