Understanding Basic types in Typescript Tutorials

Basic types include Boolean (bool), Number, String, Array, Enum etc. in TypeScript. We will be exploring them to know that TypeScript is ‘typed superset’ of JavaScript.

JavaScript - Optional types & its effect

  • JavaScript is dynamically typed; variables do not have an associated type, so no type restrictions can be applied to operations.
  • We can assign a value of one type to a variable and later assign a value of a completely different type to the same variable (Comment 1 in code block below).
  • We can perform an operation with two incompatible values and get unpredictable results (comment 2 in code block below).
  • If we call a function, there is nothing to enforce that you pass arguments of the correct type and you can even supply too many or too few arguments(comment 3, 4 in code below).

Let’s see working example of this in JavaScript, I hope you have Setup Visual Studio Code for TypeScript tutorials. Create basictypes.js file and copy below code to explore ill effects of dynamically typed JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 1. Assignment of different types
var dynamic = 'A string';
dynamic = 52;

//2. Operations with different types
var days = '7';
var hours = 24;
var week = days * hours;

//3. 77 (concatenate 7 and 7)
var fortnight = days + days;


//4.Calling functions
function getVolume(width, height, depth) {
return width * height * depth;
}
// NaN (10 * undefined * undefined)
var volumeA = getVolume(10);
// 32 (the 8 is ignored)
var volumeB = getVolume(2, 4, 4, 8);

Now just copy the above JavaScript code into TypeScript file, create “basictypes.ts“. You would see similar screen shot of it

Type Checking

With this small example of how types is checked in TypeScript, lets learn basic types in this article.

Basic Types in TypeScript

Boolean This is most basic datatype which is has either TRUE or FALSE.

let isFamily: boolean = false;

Number As in JavaScript, all numbers in TypeScript are floating point values. These floating point numbers get the type number. In addition to hexadecimal and decimal literals, TypeScript also supports binary and octal literals introduced in ECMAScript 2015.

1
2
3
4
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

String There is no application, technology, language which does not deal with textual data or strings. Keyword ‘string‘ is used to represent textual data in TypeScript also. They are represented in double quotes or single quotes.
1
2
let firstName: string = "Mithun";
let lastName: string = "VP";

The concept of template strings, is widely used and esp in Angular 2 we can HTML written as template string in Component also. What is template strings? String which span multiple lines and have embedded expressions in them.

Template strings are surrounded by the backtick/backquote (`) character, and embedded expressions are of the form ${ expr }.

1
2
3
4
5
6
7
8
9
10
11
let fullName: string = `Mithun VP`;
let age: number = 31;
let sentence: string = `Hello, my name is ${ fullName }.

I'll be ${ age + 1 } years old next month.`

sentence = "Hello, my name is " + fullName + ".\\n\\n" +
"I'll be " + (age + 1) + " years old next month."

console.log(sentence);

Template String code & output

Arrays An array is simply marked with the [] notation, similar to JavaScript, and each array can be strongly typed to hold a specific type. Below code has different ways of using Arrays.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//Declare array in first way
let list: number[] = [1, 2, 3];

//Declare array in second way
let listNumber: Array<number> = [1, 2, 3];

console.log("Array length : " + listNumber.length);

// Empty array
var emptyArray: any[] = new Array();

//Delcare and reading array
var skills: string[] = ["TypeScript", "Angular 2", "ASP.NET Core"];

// standard for loop
for (var i = 0; i < skills.length; i++)
{
console.log("Standard for loop: " + skills[i]);
}
//for in loop way of reading array
for (var key in skills) {
if (skills.hasOwnProperty(key)) {
var element = skills[key];
console.log(element);
}
}

Enums Enums are a special type that has been borrowed from other languages such as C#, and provide a solution to the problem of special numbers. An enum associates a human-readable name for a specific number. By default, enums begin numbering their members starting at 0. You can change this by manually setting the value of one of its members or you can manually set all values in them.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
enum ContactType {Family, Friends, Professional};
console.log("Automatic Enum Value assignment");
console.log("Family Enum Value : " + ContactType["Family"]);
console.log("Friends Enum Value : " + ContactType["Friends"]);
console.log("Professional Enum Value : " + ContactType["Professional"]);

enum ContactManualType {Family =10, Friends, Professional};
console.log("Semi Manual Enum Value assignment");
console.log("Family Enum Value : " + ContactManualType["Family"]);
console.log("Friends Enum Value : " + ContactManualType["Friends"]);
console.log("Professional Enum Value : " + ContactManualType["Professional"]);

enum ContactTypeManualValues {Family =10, Friends=20, Professional=30};
console.log("Fully manual Enum Value assignment");
console.log("Family Enum Value : " + ContactTypeManualValues["Family"]);
console.log("Friends Enum Value : " + ContactTypeManualValues["Friends"]);
console.log("Professional Enum Value : " + ContactTypeManualValues["Professional"]);

In next article of TypeScript Tutorials series, we will explore in detail about “variable declarations, scoping using var & let keywords