Typescript - Data Types

khattakdev

Arsalan Khattak

Posted on August 8, 2020

Typescript - Data Types

Types are the most basics of every programming language. So, let's start looking into Typescript's data types

Booleans

Booleans are the most basic data type with just two values true or false. In typescript, we define typescript as

let isAuthenticated: boolean = false; 

The extra part : boolean is a variable type.

Numbers

To define a variable which has type number, we simply have to add : number before the assignment operator

let num: number = 5;

If you change its value from 5 to "5", Typescript will give an error Type '"5"' is not assignable to type 'number' because this variable can now only hold numbers.
It can also hold Floating, binary , hexadecimal, octal numbers.

Strings

By now, I am sure you know the basic syntax for Typescript variables. We can declare strings as

let name: string = "Arsalan";

You can also use single quotes

let name: string = 'Arsalan';

Null and Undefined

In Typescript, we have other types known as null and undefined and we can declare them as

let somethingNull: null = null;
let somethingUndefined: undefined = undefined;

These two variables will always be null and undefined and you can't change them. They are not extremely useful on their own but there are some cases where they come in handy. For example, if you are trying to fetch a value from somewhere and that value is either string or null, in that case, you can declare a variable that can be string or null.

let fetchedValue: string | null;

If you try assigning null or undefined to a variable which must be of type string, you will see it works, e.g.

let thisWorks: string = null;

That's because Typescript avoids null and undefined because these two types are subtypes of string, number etc.
To avoid this behavior, and show an error, you can add this one line to your compilerOptions in tsconfig.json

"strictNullChecks": true

Array

Letโ€™s talk about some non-primitive types such as Arrays and Objects. For Arrays, we have to add square brackets after the type
For example, if we want to want to have an array of numbers

let numArr: number[] = [1,2,3,4,5];

Similarly, for Strings

let names: string[] = ["John", "Lisa", "Smith"];

There is also a second way to declare arrays, by using Array<elementType>

let names: Array<String> = ["John", "Lisa", "Smith"];

Tuple

Tuple is something you never heard of in javascript, In javascript, we donโ€™t define the length of our arrays, because we can not, Tuple helps us to express the length of our arrays. Here's a simple example of Tuple

let numbers: [number,number] = [1,2];

If you try to add any additional item to names array, you will get an array

let numbers: [number,number] = [1,2,3];
// Error: Type '[number, number, number]' is not assignable to type '[number, number]'

but this will work still work

let numbers: [number, number] = [1, 2];
numbers.push(2);

That's because type safety doesn't work with .push().

You can also have an array of fixed length which can store different types. For example,

let mixed: [number, string, number] = [1, "Two", 3]

Objects

We have covered most of the things, let's talk about the most interesting type, Objects. Here's a simple object declared in Typescript.

let obj: object = {
    val: 4,
    foo: "bar"
}

We will talk more about Objects in upcoming blogs when you learn some more Typescript.

Enum

If you have worked with C# or Java, you are most likely familiar with Enum. They are a set of predefined constant values. A simple example of Enum is

enum Days {
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,
  Sunday,
}

let satur: Days = Days.Saturday;  // 5

Enums can also be accessed by their index.

enum Days {
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,
  Sunday,
}

let sat: string = Days[6]; // Sunday

By default, enum starts with an index 0 but we can modify their index. For example

enum Days {
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,
  Sunday = 10,
}

let sat: string = Days[10]; // Sunday

In the above example, Sunday has an index of 10.

Any

At this point, you learned all the primitive and non-primitive types that exist in Javascript. But, you might be wondering how can I have a variable which can accept any value? Is there any way to declare such a variable in Typescript? The good news is YES, there is a way to declare such a variable.

let giveMeAnyValue: any = 1;
giveMeAnyValue = "Two";
giveMeAnyValue = [1,"Two"];
giveMeAnyValue = {
    one: 1,
    two: "Two"
}

The above code snippet will work fine because we specified its type as any, which means this variable can have any type.

This also works for Tuple

let arrayOfUnknownTypes: [any, any, any] = [1,2,3];
arrayOfUnknownTypes = ["One", 2, "Three"]

If you are not sure about the type, you can use any.

Never

One other type, we can use is never which means no value.

let dontGiveMeValue: never = 1;

The above example will give you an error Type '1' is not assignable to type 'never'.. That's because it will not accept any value at all.
This never is used as the return type for those functions which always throw an error or which goes into an infinite loop.

function dontWork (): never {
    throw Error("You FAILED!")
}

This was all about Typescript Data Types. You can take advantage of these static types to avoid javascript coercions if you don't like them.

๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ
khattakdev
Arsalan Khattak

Posted on August 8, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

ยฉ TheLazy.dev

About