Typescript Data Types

Typescript Types (or data types) bring static type checking into the dynamic world of Javascript. In this tutorial, we learn what is Typescript types are. We also introduce you to the basic data types that Typescript supports.

What is a Type?

The Type or the Data Type is an attribute of data which tells us what kind of value the data has. Whether it is a number, string, boolean, etc. The type of data defines the operations that we can do on that data. For example, you can perform arithmetic operations only on numbers and not on a string. The most commonly used data types are number, string, date, boolean, etc.

Typescript Data Types

JavaScript has Eight data types. Seven primitive types and one object Data type. The primitive types are number, string, boolean, bigint, symbol, undefined, and null. Everything else is an object in JavaScript.

The TypeScript Type System supports all of them and also brings its own special types. They are unknown, any, void & never.

TypeScript also provides both numeric and string-based enums. Enums allow a developer to define a set of named constants

The following diagram shows the relationship between various types. (Image from https://objectcomputing.com/resources/publications/sett/typescript-the-good-parts )

We can compose other types to create union types or intersection types. This is particularly useful when you want to combine existing types and form new ones.

TypeScript Literal Types restrict the value of a variable to finite valid values. It allows us to create String, Numeric, Boolean, and Enum Literal Types

Typescript Type Checking

TypeScript types introduce strong typing to JavaScript. The use of types is optional, but if use the types are analyzed by the compiler, and errors are thrown. let us see it using an example.

Open Visual Studio Code and create a new file types.ts. If you are new to typescript you can refer to the tutorial Hello world example in Typescript

We have declared two-variable num1 & num2. We want both the variable to hold numbers. But in the subsequent line, we assign a string to num2 variable instead of a number. Now open the command window and compile and run as shown below

Without TypeScript Types. No errors thrown. Program compiles and runs
Without TypeScript Types. No errors are thrown. Program compiles and runs

The program does not throw any errors. The result “100hello” is printed in the console as shown above

Now, modify the code and bring the Typescript Types as shown below. We are declaring that the num1 & num2 will hold the type number.

The visual Studio code instantly underlines the code with red as soon as we use the wrong type. We also have an error thrown at us at the time of compile as shown in the image below.

The number is one of the many data types that Typescript supports.

TypeScript Special Types

any

any data type can hold any data. You can change the data type. We use this when we do not know the type of data. any is specific to typescript.

When a variable’s type is not given and typescript cannot infer its type from the initialization then it will be treated as an any type.

You can refer to the tutorial Any Type to learn more about them

never

The never type represents the value that will never happen. We use it as the return type of a function, which does not return value. For example, the function that always throws an exception as shown below.

You can refer to the TypeScript Never Type tutorial.

void

Void represents the absence of any return value. For example, the following function prints “hello” and returns without returning a value. Hence the return type is void.

It is different from never. never means it never returns a value.

Primitive Types

TypeScript supports 7 primitive types number, string, boolean, bigint, symbol, undefined, and null. All other data types are objects in Typescript. A primitive data type is a data type that is not an object and has no methods. All primitives are immutable.

string

We use the string data type to store textual data. The string value is enclosed in double-quotes (“) or single quotes (‘).

Example

Multiline string

The strings can span multiple lines in such cases the strings are surrounded by the backtick/backquote (`) character

You can read more about string data type from the following tutorials

  1. String Data Type
  2. Template strings/Literal strings
  3. Tagged Templates
  4. String to Number

boolean

The Boolean Data Type is a simple true/false value

Example

Read more about Boolean Data Type

Number

The number data type in TypeScript are 64-bit floating-point values and are used to represent integers and fractions. Typescript also supports the hexadecimal and decimal literals. It also supports the binary and octal literals introduced in ECMAScript 2015.

You can read more about the number data type from the following Tutorials

  1. Number Data Type
  2. NaN in Typescript
  3. Min, Max & Safe Values
  4. EPSILON & Floating Point Precision
  5. Infinity

Bigint

bigint is the new introduction in Typescript 3.2. This will provide a way to represent whole numbers larger than 253. You can get a bigint by calling the BigInt() function or by writing out a BigInt literal by adding an n to the end of any integer numeric literal as shown below.

You can use the bigint only if you are targeting version ESNext.

Refer to the following tutorial to learn more about BigInt

  1. BigInt data type
  2. BigInt Vs Number

Null and Undefined

The javascript has two ways to refer to the null. They are null and undefined and are two separate data types in Typescript as well. The null and undefined are subtypes of all other types. That means you can assign null and undefined to something like a number.

undefined Denotes value is given to all uninitialized variables.
null: Represents the intentional absence of object value.

Refer to the Typescript Null & Undefined tutorial to learn more about them

symbol

The symbol is the new primitive type introduced in ES6 and represents the javaScript symbol primitive type. it represents unique tokens that may be used as keys for object properties. it is created by the global Symbol() function. Each time the Symbol() function is called, a new unique symbol is returned.

TypeScript Objects

Everything that isn’t a primitive type in TypeScript is a subclass of the object type. Examples are class, Interface, function, constructor, array, tuple, etc. We will cover these in detail in the subsequent chapters

Summary

Using types we define the data type of variables. If we did not specify the type, then typescript treats it as any type. Any type is the base type of all other types. The primitive types are number, string, bigint, boolean, null, and undefined. All other types are derived from the objects.

1 thought on “Typescript Data Types”

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top