Typescript Data-types Complete

There are several data-types in typescript those are

1. String
2. Number
3. Boolean
4. Array
5. Tuple
6. Enum or enumeration
7. Any
8. Null or undefined
9. Void
10. Never

If you don’t know variable declaration click_here

Let see in detail

1. String

A group of character that are enclosed in single quotes(‘’) or double quotes(“”).

If the string elements are too long, you can enclose in grave or back quote (` `)

Declaration of String

let [var_name] : string= "string value";

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="">
</head>
<body>
    <script src="./datatype.js"></script>
</body>
</html>

datatype.ts

let username: string = "Name";
let email: string;
email = "name@one.com"
// console.log("Username and email",username,email);
// You cant enter number elements because type annotation is string
// username = 123;

username="Noname";
username="123"
username = "Name";

// if you want to place one variable value another variable 
// inside the string you use ${variable_name}
let fullName: string = `${username} and ${email}`

console.log("Strings :-",username,email);
console.log(fullName);

// Some basic operation in string
let subject: string='Computer science'

// Finding index
console.log("Index of s",subject.indexOf('s'));
console.log("Last Index of s",subject.lastIndexOf('s'));

// Concatination of two string
console.log("Concat ",subject.concat(username));

// Finding what element is placed on that index
console.log("Character at",subject.charAt(9));

// Convert to upper or lowercase
console.log("Lowercase",subject.toLowerCase());
console.log("Uppercase",subject.toUpperCase());

// Querying the string element
console.log("Substring ",subject.substring(0,8));

Output of datatype.js on console.log

Strings :- Name name@one.com
Name and name@one.com
Index of s 9
Last Index of s 9
Concat  Computer scienceName
Character at s
Lowercase computer science
Uppercase COMPUTER SCIENCE
Substring  Computer

2. Number

A value that may be integer, float, binary, octal, hexadecimal.

Declaration of Number

let [var_name] : number= 033;

index.html

<!-- Same as before -->

datatype.ts

let integer: number= 33;
let floating: number=0.33;
let binary: number=0b111;
let octal: number=0o12;
let hexa: number=0xc;

console.log("Numbers are :-",integer,floating,binary,octal,hexa);

Output of datatype.js on console.log

Numbers are :- 33 0.33 7 10 12

3. Boolean

You can set either true or false.

Declaration of String

let [var_name] : boolean= true;

index.html

<!-- Same as before -->

datatype.ts

let likeExercise: boolean = false
let likeFootball: boolean = true

console.log("Boolean :-",likeExercise,likeFootball);

Output of datatype.js on console.log

Boolean :- false true

4. Array

A group of value that are enclosed in square brackets [].

Declaration of Array

let [var_name] : string[]= ["string", "value"];
let [var_name] : number[]= [0,3,3];
let [var_name] : any[]= ["coder",033];

index.html

<!-- Same as before -->

datatype.ts

// Number array
let num: number[]=[1,2,3,4,5,6]
console.log("Array is ",num);

// String array
let str: string[]
str =['a','b','c','d','e','f']

// Boolean array
let bool: Array<boolean>=[true,true,false,true,false]
console.log(bool);

// Array contain both types number and string
let str_num: (number | string)[] = [1,'a',2,'b',3,'c']
console.log(str_num);

let any = [1,'a',2,'b',3,'c']
console.log("any ",any);

// Array can contain any type string number boolean
let any1: any[] = ['Name',27,false]
console.log("any1 ",any1);

let str1: string[]
str1 =['a','b','c','d','e','f','g','h','e']
console.log(str1);
console.log(str1[0]);
console.log(str1[3]);

// Loop through array
for(let i in str1){
     console.log("Loop",str1[i]);
}

// Finding index
console.log("Index of e ",str1.indexOf('e'));
console.log("Index of e ",str1.lastIndexOf('e'));

// Concatination of array
console.log("Concat ",any.concat(str));

// Join in between array
console.log("Join ",str1.join('-'));

// Remove last element
console.log("before pop",any);
console.log("pop",any.pop());
console.log("after pop",any);

// Remove first element
console.log("before shift",any);
console.log("pop",any.shift());
console.log("after shift",any);

// Join on last element
console.log("before push",any);
console.log("push",any.push('c'));
console.log("after push",any);

// Join on first element
console.log("before unshift",any);
console.log("pop",any.unshift(1));
console.log("after unshift",any);

// Reverse array element
console.log("before reverse",any);
console.log("after reverse",any.reverse());

// Sort array element
console.log("before sort",any);
console.log("after sort",any.sort());

// Converting array element to string
console.log("before string conversion",any);
console.log("after string conversion",any.toString());

Output of datatype.js on console.log

Array is  [ 1, 2, 3, 4, 5, 6 ]
[ true, true, false, true, false ]
[ 1, 'a', 2, 'b', 3, 'c' ]
any  [ 1, 'a', 2, 'b', 3, 'c' ]
any1  [ 'Name', 27, false ]
[
  'a', 'b', 'c',
  'd', 'e', 'f',
  'g', 'h', 'e'
]
a
d
Loop a
Loop b
Loop c
Loop d
Loop e
Loop f
Loop g
Loop h
Loop e
Index of e  4
Index of e  8
Concat  [
  1,   'a', 2,   'b', 3,
  'c', 'a', 'b', 'c', 'd',
  'e', 'f'
]
Join  a-b-c-d-e-f-g-h-e
before pop [ 1, 'a', 2, 'b', 3, 'c' ]
pop c
after pop [ 1, 'a', 2, 'b', 3 ]
before shift [ 1, 'a', 2, 'b', 3 ]
pop 1
after shift [ 'a', 2, 'b', 3 ]
before push [ 'a', 2, 'b', 3 ]
push 5
after push [ 'a', 2, 'b', 3, 'c' ]
before unshift [ 'a', 2, 'b', 3, 'c' ]
pop 6
after unshift [ 1, 'a', 2, 'b', 3, 'c' ]
before reverse [ 1, 'a', 2, 'b', 3, 'c' ]
after reverse [ 'c', 3, 'b', 2, 'a', 1 ]
before sort [ 'c', 3, 'b', 2, 'a', 1 ]
after sort [ 1, 2, 3, 'a', 'b', 'c' ]
before string conversion [ 1, 2, 3, 'a', 'b', 'c' ]
after string conversion 1,2,3,a,b,c

5. Tuple

Value arrangement should be same as type annotation

Get Narayanan’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

for example, If you mention type annotation like [string,number] then value should be [“first string”, ”second number”] [“coder”,033].

Declaration of Tuple

let [var_name] : [string,boolean]= ["coder 033",true];

index.html

<!-- Same as before -->

datatype.ts

let tup1: [number,string] = [1,'a']
console.log("tup1 ",tup1);

let tup2: [string,number,boolean] = ['Name',27,false]
console.log("tup2 ",tup2);

let tup3: [number,string] = [0,'str']
console.log("before ",tup3);

tup3[0]=6
tup3[1]='name'
console.log("after ",tup3);

Output of datatype.js on console.log

tup1  [ 1, 'a' ]
tup2  [ 'Name', 27, false ]
before  [ 0, 'str' ]
after  [ 6, 'name' ]

6. Enum

Enum is special kind of data-type which hold set of value, We can directly access the value or we can use index of that value, and on set of value we can hold some elements.

Declaration of Enum

enum [var_name] {value}

index.html

<!-- Same as before -->

datatype.ts

enum Alphabet {a,b,c,d,e,f,g,h,i,j}
console.log(Alphabet.g);
console.log(Alphabet[5]);

// Changing index from 0 to 1
enum Alphabet {a=1,b,c,d,e,f,g,h,i,j}
console.log(Alphabet.g);

// You can change index to string also but string should be in starting 
//or ending of set.
// Shows error and show js file
// enum Alphabet {a=1,b,c,d,e='v',f,g,h,i='9th element',j}
// console.log("pop error",Alphabet.g);

//string element should add first or last 
enum Alphabet {e='v',i='9th element',a=1,b,c,d,f,g,h,j}
console.log(`a is in ${Alphabet.a} g is in ${Alphabet.g}`);

enum Alphabet {a=1,b,c,d,f,g,h,j,e='v',i='9th element'}
console.log(`a is in ${Alphabet.a} g is in ${Alphabet.g}`);


let i:Alphabet = Alphabet.i
console.log("i index is ",i);

let e:Alphabet = Alphabet.e
console.log("e index is ",e);

let c:Alphabet = Alphabet.c
console.log("c index is ",c);

Output of datatype.js on console.log

6
f
7
a is in 1 g is in 6
a is in 1 g is in 6
i index is  9th element
e index is  v
c index is  3

7. Any

In Any data-type you can store any value.

Declaration of Any

let [var_name] : any= any_data_type_value;

index.html

<!-- Same as before -->

datatype.ts

let anydata: any = 6
let anydata1: any = "six"
let anydata2: any = false
let anydata3: any = [6,'six',false]
console.log("any :-",anydata,anydata1,anydata2,anydata3);

Output of datatype.js on console.log

any :- 6 six false [ 6, 'six', false ]

8. Null and Undefined

When there is no value or empty or non-existent we can set as null and when variable is installed but didn’t represent any value then its undefined

Declaration of null and undefined

let [var_name] : undefined= undefined;
let [var_name] : null= null;

index.html

<!-- Same as before -->

datatype.ts

let und: undefined = undefined
console.log(und);

let num1: number;
console.log(num1);

let nl: null = null
console.log(nl);

Output of datatype.js on console.log

undefined
undefined
null

9. Void

Function that does not return any value.

Declaration of Void

function [var_name](): void{}

index.html

<!-- Same as before -->

datatype.ts

function hello():void {
    console.log("Hello World");
    // if i try to return it will popup error
    // return("one")
}
hello()

Output of datatype.js on console.log

Hello World

10. Never

We can set never for exception(error) handling or when an function should not-stop on that place you can use never.

Declaration of Never

function [var_name](): never{}

index.html

<!-- Same as before -->

datatype.ts

function popError(message: string): never {
    throw new Error(message);
}
let b1:number=15
console.log("b1",b1);
if(b1<=10){
    // showError("Value is higher")
    console.log("lower");
}
else{
    popError("Value is higher")
}
showError("Reading error")

Output of datatype.js on console.log

b1 15
/tmp/main.ts:3
    throw new Error(message);
          ^

Error: Value is higher
    at null.popError (/tmp/main.ts:3:11)
    at Object.<anonymous> (/tmp/main.ts:12:5)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47

See the full course on Skillshare, click the link below, and get 1 month free subscription.

https://www.skillshare.com/en/r/profile/Coder033/26410885?gr_tch_ref=on&gr_trp=on

Follow for more interesting topics :-)

Follow us on
Youtube:= https://www.youtube.com/@coder033
Github:- https://github.com/Coder033
Skillshare https://www.skillshare.com/profile/Coder033/26410885