Getting Started With React and TypeScript Pt.2 — Basic Types

Alex Devero
Dec 9, 2019 · 15 min read

If you ever wanted to learn how to use React and TypeScript, you are on the right place. This tutorial will help you understand all types you can expect in TypeScript and how to work with them. Learn about these basic types so you can start using React and TypeScript today.

Table of Contents:

Types

  • Number
  • BigInt
  • String
  • Boolean
  • The “null” value
  • The “undefined” value
  • Symbol
  • Object
  • Array
  • Tuple
  • Enum
  • Void
  • Never
  • Any

Type inference

Conclusion: Getting Started With React and TypeScript Pt.2

Getting Started With React and TypeScript Part 1.

Getting Started With React and TypeScript Part 3.

Getting Started With React and TypeScript Part 4.

Types

Before you start using React and TypeScript you should get familiar with types you can use in TypeScript. TypeScript supports all types that exist in JavaScript. On top of it, TypeScript adds some new types. Here is an overview of the types you can expect and use when you work with React and TypeScript together, or just with TypeScript.

Number

Like in JavaScript the number type represents both, integer and floating point numbers. In other words, there is no one specific type for integers and other for floats. Both are united under the same type, number. These numbers also include hexadecimal and decimal literals, and binary and octal literals introduced in ECMAScript 2015.

BigInt

The BigInt type is a new type that was recently added to the JavaScript language specification. Why? In JavaScript, the number type cannot represent integer values larger than 2^53, or less than -2^53 for negatives. This means that you can work with numbers of up to around 16 decimal digits.

Sometimes, this may not be enough. You may need something that can handle numbers even bigger than that. In that case, you can use the new BigInt value. You can use the BigInt to represent a number of arbitrary value. When you want to create BigInt you do that by appending n to the end of the number.

When it comes to working with React and TypeScript, you will probably not need to use BigInt so often. Maybe never. Nonetheless, it is still good to know what it is.

String

In JavaScript, strings represent some textual data, an array of characters if you want. When you want to create a string you can use single quotes, double quotes or template literals, or template strings. Strings in TypeScript work in the same way.

Boolean

Boolean are very simple, logical, type. It has only two values: true and false.

The “null” value

The null is special value. It is a subtype of other default types. In JavaScript, null represents “empty”, “unknown value” or “nothing”. Unlike in other languages, null is not a reference to a non-existing object. In TypeScript, if you disable strictNullChecks rule/option in compilerOptions (or flag) you can assign null to types such as number, string, etc.

When you keep the strictNullChecks rule enabled, which is the recommended practice, you can assign only to any.

The “undefined” value

The undefined is another special value, similar to the null. The meaning of undefined is “value is not assigned”. For example, if you declare a variable, but not assign any value to it, its value will be undefined. The undefined works in a similar way to null.

Symbol

Similarly to BigInt, Symbol is another new type that was added to JavaScript language specification. A Symbol is a unique and immutable (unchangeable) primitive value, something like a unique ID. Symbols are used as unique identifiers for objects.

Object

The object type is another special type. Unlike the other types, object can contain collections of various types. In TypeScript, object represents anything that is not number, BigInt, string, boolean, null, undefined or symbol. This is also one of the types you will encounter fairly often as you work with React and TypeScript.

Array

JavaScript types end with the previous eight types. TypeScript goes farther. In TypeScript, you can use Array type. You will probably use this type a lot when you work with React and TypeScript. Arrays are often used to store collections of data and React component. The Array type can be written in two ways.

First, you use the type of the elements inside the array followed by [] to specify an array of that element type. The second way is about using a generic array type Array<elementType>. The elementType specifies the type of the elements inside the array.

Tuple

The tuple types is the first type specific to TypeScript. Although this type doesn’t exist in JavaScript, you may find it handy in your projects built with React and TypeScript. It can be interesting alternative to arrays. The tuple type allows you to declare an array with a fixed number of elements and known types.

Enum

The enum type is another specific to TypeScript. It is also a type you may use often if your work with React and TypeScript. The enum type is defined as a collection of values. It is similar to object and array. Values are separated by commas. It allows you give more friendly names to numeric values.

There are two differences. The first one is that it doesn’t contain key/value pairs, only values. The second is that there is no equal sign (=) before the curly brackets ({}). Similarly to arrays, enum also start with index of 0. So, when you want reference one of the values, you can use this index, like when you work with an array.

This index is not set in stone. You can change it if you want. You can do this by using equal sign (=) followed by number (the index) in during enum declaration.

Void

The void type is specifies that there is no type, or absence of any type. This type is often used as the return type of functions that don’t return any value. In case of React and TypeScript, void is commonly used as the return type of functions for handling events. In case of variables, void is not useful at all.

When you declare some variable of type void you can assign to it only assign null or undefined. This is only possible if you disable the strictNullChecks rule/option (or flag).

Never

The never type is one of the types you are not likely to use with React and TypeScript. This type is where the code which uses it should never be reachable, or when return value never occur. In case of functions, a function that never returns, or always throws an exception, returns never. For example, a function with infinite while loop.

When you create such a function, with infinite loop, TypeScript will let your code compile. However, TypeScript will infer that function as having return type of never. In case of variables, similarly to void, never is also not very useful.

When you declare some variable of type never you can’t assign any other type to it. You can use only the never type. TypeScript will also infer the never when you narrow the type guards so that it can never be true.

Any

The any type is the last type you can encounter, and use, in TypeScript. It is also the most used, or abused, type by TypeScript beginners. The any is commonly used when you either don’t know the type of a variable or you don’t need to specify it. One example can be when your program doesn’t require some specific type.

Another example is when you work with 3rd party packages, modules and APIs and you don’t know what to expect. Or, if you know only partially what to expect. For example, you know the value will be an array, but you know nothing about its content. In these cases, any will tell TypeScript to skip the type check and let your code compile.

The any type is also very handy when you want to gradually rewrite your JavaScript code to TypeScript. Or, when you migrate from React to React and TypeScript. The way any works is simple. It tells TypeScript that the value can be of any type. It can be string, number, boolean, array, object, whatever. So, there is nothing to complain about.

Type inference

Throughout the examples, I add comments saying that the type is not necessary in that place due to type inference. What is type inference? It is not necessary to annotate type every time. In some situations, TypeScript will do this for you. It will automatically infer types of variables and parameters based on the default values.

There are three situations when this will happen. First, TypeScript will infer type of variable when the variable is declared and also initialized. Second, TypeScript will infer type of parameter when you set default values for that parameter. Third, TypeScript will infer return type when function returns some value.

If you find yourself any of these three situations you don’t have to annotate, or specify, types. What if you forget to annotate some variable or parameter? TypeScript will automatically use type of any. If you enable noImplicitAny, or strict, option TypeScript will automatically warn you when this implicit any occurs.

What if you some data collections with values of different types? Will TypeScript infer types here as well? Yes, it will. TypeScript will correctly infer all types for you.

Conclusion: Getting Started With React and TypeScript Pt.2

Congratulations! You’ve just finished the second part of this series about getting started with React and TypeScript. Today you’ve learned about what types can you expect, and work with, in TypeScript. Knowing these types and how to work with them will make it easier to start with React and TypeScript.

What’s coming in the next part of this getting started with React and TypeScript series? You will get into the practical side of working with React and TypeScript. You will learn about types and interfaces. After that, you will learn how to write class and functional components and use hooks in TypeScript, and how to annotate your code.

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