TypeScript: How To Use TypeScript Data Types

Introduction

In this article, I’m going to show you what TypeScript data types are, what syntax TypeScript uses to define types, and what values a specific data type can take in. In most cases, you will need to put a colon after the variable you want to specify its type, followed by the type you want it to be. There are some primitive data types build into TypeScript.

Boolean Data Type

The boolean is the most basic data type representing a logical value. It can only have two values, true or false. For declaring a variable of boolean data type, we use the boolean keyword.

// Boolean Data Type
let aBoolean: boolean = true;

console.log(`Boolean => ${aBoolean}`);
// Boolean => true

Number Data Type

Like JavaScript, all numbers in TypeScript are floating-point values. We can assign any numeric values to a variable of type number, including integers and floating-point numbers. And these numbers can use decimal, hexadecimal, binary, or octal numeral systems.

// Number Data Type
let aNumber: number = 21;
aNumber = 21.0;

aNumber = 0x15;
aNumber = 0b00010101;
aNumber = 0o25;

console.log(`Number => ${aNumber}`);
// Number => 21

String Data Type

TypeScript uses the type string to refer to textual data types, and it represents a sequence of characters. Like JavaScript, TypeScript also uses single quotes (‘) or double quotes (“) to surround the string values.

// String Data Type
let aString: string = 'This is a string';
// prettier-ignore
aString = "This is another string";

console.log(`String => ${aString}`);
// String => This is another string

It is also possible to use template strings, which can span multiple lines and have embedded expressions. We will use template string notation with these strings, which uses the backtick (`) character to surround the string values, and embedded expressions are in the form of ${expression}.

let aTemplateString: string = `Template string => ${aString}`;

console.log(aTemplateString);
// Template string => This is another string

Null and Undefined Data Types

In TypeScript, both undefined and null have their own types. They are also subtypes of all other data types, which means you can assign them to something like number or boolean. However, this is only possible by turning off the strictNullChecks flag. Otherwise, you will get an error.

aBoolean = null;
aNumber = undefined;

To turn strictNullChecks off, open the tsconfig.json file and look for strictNullChecks in the compilerOptions and set it to false.

{
  "compilerOptions": {
    "strictNullChecks": false,
  },
}

Any Data Type

Suppose you are using a third-party library that doesn’t include type information, and type declarations might take an unreasonable amount of time. Or you are working with an existing JavaScript code, and you want to gradually opt-in to type checking. You might want to opt-out of type checking in these situations until you have enough time to declare them. All types in TypeScript are a subset of type any. Basically, you can assign any value to a variable of type any.

// Any Data Type
let aAny: any = 12;
aAny = 'Reassigned as a string';

console.log(`Any => ${aAny}`);
// Any => Reassigned as a string

GitHub Repo

Here is the GitHub repository link where you can find the full source code of this article, clone the project and run it on your machine.