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.

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.

// The ': number' after variable name
// and before equal sign specifies number type
// Declare new variable of type number
let numberExample: number

// Assign a value to 'numberExample'
numberExample = 979

// Declare and initialize variable of type number
const numberInteger: number = 13 // number type is not necessary here due to type inference
const numberFloat: number = 8.12 // number type is not necessary here due to type inference
const numberHex: number = 0xf00d // number type is not necessary here due to type inference
const numberBinary: number = 0b111110111 // number type is not necessary here due to type inference
const numberOctal: number = 0o767 // number type is not necessary here due to type inference

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.

// The ': bigint' after variable name
// and before equal sign specifies bigint type
// Declare new variable of type bigint
let bigIntExampleTwo: bigint

// Assign a value to 'bigIntExampleTwo'
bigIntExampleTwo = 987654321987654321987654321987654321000n

// Try to change the value of 'bigIntExampleTwo' to different type
bigIntExampleTwo = 159 // error: Type '159' is not assignable to type 'bigint'.

// Declare and initialize variable of type bigint
const bigIntExample: bigint = 1234567890123456789012345678901234567890n // bigint type is not necessary here due to type inference

#typescript #react #javascript #design development