TypeScript Tutorial for Beginners | Introduction to TypeScript Basics

TypeScript Tutorial for Beginners | Introduction to TypeScript Basics

In this TypeScript tutorial video will provides in-depth knowledge about typescript and its basics and fundamentals. it also talks about the different advantages and features of Typescript and explains each concept with an example. Below are the topics covered in this TypeScript Basics Video:

In this TypeScript tutorial video will provides in-depth knowledge about typescript and its basics and fundamentals. it also talks about the different advantages and features of Typescript and explains each concept with an example. Below are the topics covered in this TypeScript Basics Video:
1:28 Introduction to TypeScript
6:54 Types of TypeScript
7:31 Variables
9:50 Operators
21:47 Loops
33:17 Functions
36:52 Strings
42:38 Arrays
46:36 Interfaces
47:42 Classes
50:27 Objects
51:28 TypeScript use case

Learn TypeScript | TypeScript Crash Course | TypeScript Tutorial for Beginners

Learn TypeScript | TypeScript Crash Course | TypeScript Tutorial for Beginners

Learn TypeScript | TypeScript Crash Course | TypeScript Tutorial for Beginners: My goal with this courses is just give your the fundamentals of the language, show you what TypeScript is and how to use it. We as developers don't have time neither can we afford to spend too much time on any tehcnology.

TypeScript is a superset of JavaScript, which means that is language that was created to add features to JavaScript. You might be asking yourself why it was created and why not just add those features directly to JavaScript.

Sometimes language foundatons take time to implement features because the committee has to approve it, test and get feedback before requests are answered. The soultion for that is to create another language that adds functionality to the language we need, and thats where TypesScript comes in.

TypeScript has many advanced features that plain JavaScript doesnt have yet but the good news is that we can start using it now since TypeScript compiles JavaScript ES5 which at this moment is the most compatible version of JavaScript for all browsers.

Most people that want to learn TypeScript its because they need the skills to use with some Frameworks like Angular.

My goal with this courses is just give your the fundamentals of the language, show you what TypeScript is and how to use it. We as developers don't have time neither can we afford to spend too much time on any tehcnology.

Thanks for reading

If you liked this post, please do share/like it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading about JavaScript and TypeScript

The Complete JavaScript Course 2019: Build Real Projects!

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

JavaScript Bootcamp - Build Real World Applications

The Web Developer Bootcamp

New ES2019 Features Every JavaScript Developer Should Know

Best JavaScript Frameworks, Libraries and Tools to Use in 2019

Using Typescript with modern React (i.e. hooks, context, suspense)

WebSocket + Node.js + Express — Step by step tutorial using Typescript

From Javascript to Typescript to Elm

Angular + Typescript = Powerful Web Apps

React + TypeScript : Why and How

How to use TypeScript with Vue.js

What is Enum in Typescript?

What is Enum in Typescript?

In this post, you will learn about Enum in Typescript

Introduction

In this article you will learn about Enum in Typescript in detail. This article will help beginners to understand the concept.

What is Enum?
  • The short form of enumeration is enum.
  • It is used as a type with some set of values called a named constant.
  • Inernally it holds numeric type values or in some cases we can create heterogeneous enums.
  • The enum keyword is used to define the enums.
  • We can create a distinct case so it makes it easy to document.
  • It forces us to use all possible values.
  • Access the enums using index or use dot operator after the enum name & named constant.
  • Initial value starts from 0 if we do not set any value.
  • Auto incremental is the best approach to use because we do not need to worry about the values.

Syntax

enum enumName{  
constant1, constant2, constant3...  
}  

Example

Consider  traffic signal lights as an example.

We can access the elements using index or by constant name:

enum signalLights{  
   red, yellow, green  
}  
let result: string = signalLights[signalLights.red];  
console.log(result);  
console.log(signalLights[1]);  
let output: signalLights = (<any>signalLights)["yellow"];  
console.log(output);  

Output

red
yellow
1

Types of enums Numeric enum
  • It is commonly used in all languages.
  • Initial value starts from 0 if we do not set any value.
  • Takes only numeric values.
  • enum keyword is used to declare the numeric type enum.
  • We can assign any value as per our requirements.
  • If our function returns any numeric value then we can use this function to initialize the constant.

Consider that in the below rainbowColors is enum & we have not initialized any constants, so it will starts with 0 value and the rest of the constants have auto increamemtal values.

**Example **

enum rainbowColors {  
    Red,  
    Orange,  
    Yellow,  
    Green,  
    Blue,  
    Indigo,  
    Violet,  
}  
console.log("color & index value is as follows");  
for (let item in rainbowColors) {  
    if (isNaN(Number(item))) {  
        console.log(item + " : " + < rainbowColors > rainbowColors[item]);  
    }  
}   

Output

color & index value is as follows:

Red : 0
Orange : 1
Yellow : 2
Green : 3
Blue : 4
Indigo : 5
Violet : 6

Consider the below example, rainbowColors is enum & the second element is initialized with value 1000. So it will be auto incremental to the  remaining constants. It will print on the console.

**Example **

enum rainbowColors {  
    Red,  
    Orange = 1000,  
    Yellow,  
    Green,  
    Blue,  
    Indigo,  
    Violet,  
}  
console.log("color & index value is as follows");  
for (let item in rainbowColors) {  
    if (isNaN(Number(item))) {  
        console.log(item + " : " + < rainbowColors > rainbowColors[item]);  
    }  
}   

Output

color & index value is as follows,

Red : 0
Orange : 1000
Yellow : 1001
Green : 1002
Blue : 1003
Indigo : 1004
Violet : 1005

Using function in enum

Consider the below example. We can use function in enum if we are returning the value from the function. It is used when the user needs to do any calculation. Suppose we need to calculate the total minutes like 1 hour = 60 minute, 2 hour = 120 minute, then it will create one function which will do a calcuation & return values to enum constant:

Example

function Totalminute(hr: number): any{  
return 60 * hr;  
}  
enum hours  
{  
One = Totalminute(1) ,  
Two = Totalminute(2),  
Three = Totalminute(4),  
}  
console.log(hours.One);  
console.log(hours.Two);  
console.log(hours.Three);  

Output

60
120
240

String enum

It is same as the numeric enums,  we are just passing string values/literals to our enum constant. enum keyword is used to declare the enums.

Consider the below example, our vehicle is taking different kinds of turns, and we will define the enum as:

Example

enum vehicleTurn {  
    Left = "Left",  
        Right = "Right",  
        UTurn = "UTurn"  
}  
console.log(vehicleTurn.Left);  
console.log(vehicleTurn.Right);  
console.log(vehicleTurn.UTurn);  
}   

Output

Left
Right
UTurn

Heterogeneous enums

Typescript allows us to create a mixed type of enums.

This means we can assign numeric & string type values to enum.

Consider the below example, circleInfo has heterogeneous enum values.

Example

enum circleInfo {  
    Area = "area of circle",  
        Pie = 3.112,  
        Radius = 20  
}  
let result = circleInfo.Pie * circleInfo.Radius * circleInfo.Radius;  
console.log(circleInfo.Area + " is :" + result); 

Output

area of circle is :1244.8

Point A - Function & interface using enum

Consider the below example, clothSize is enum which contains some constants. IClothSize is an interface which contains two properties, key & value, having string & number type respectively.

Function is taking enum as a parameter & will print the data on the console.

Example

enum clothSize {  
    small,  
    medium,  
    large  
}  
interface IClothSize {  
    key: string,  
        value: number  
}  
  
function getClothSize(size: clothSize): IClothSize {  
    switch (size) {  
        case clothSize.small:  
            return {  
                key: clothSize[clothSize.small], value: 10  
            };  
        case clothSize.medium:  
            return {  
                key: clothSize[clothSize.medium], value: 20  
            };  
        case clothSize.large:  
            return {  
                key: clothSize[clothSize.large], value: 30  
            };  
    }  
}  
console.log("cloth is " + getClothSize(clothSize.small).key + " & value is " + getClothSize(clothSize.small).value);  
console.log("cloth is " + getClothSize(clothSize.medium).key + " & value is " + getClothSize(clothSize.medium).value);  

Output

cloth is small & value is 10

cloth is medium & value is 20

Point B - const enum
  • Typescript allows us to declare const enum.
  • const keyword is used.
  • It has a inlined values.
  • We can access enum using enum['ConstantName']

Example

const enum myColor {  
    Red = 10,  
        White = Red * 4,  
        Blue = White + 10,  
        Yellow,  
}  
console.log(myColor.Red)  
console.log(myColor.White)  
console.log(myColor.Blue)  
console.log(myColor['Yellow'])   

Output

10
40
50
51

We will not be able to access enum using index in const enum like myColor[0], it will give us an error.

Point C

ES6 allows us to use map enum keys.

Example

enum classes {  
    I,  
    II,  
    III,  
    IV,  
    V  
}  
const ClassNames = new Map < number,  
    string > ([  
        [classes.I, '100'],  
        [classes.II, '200'],  
        [classes.III, '300'],  
    ]);  
console.log(ClassNames);   

Output

Map(3) {0 => "100", 1 => "200", 2 => "300"}

We will modify the above example, we can use this into a classes as below.

Note

User can modify the code as per their requirement.

Example

enum classes {  
    I,  
    II,  
    III,  
    IV,  
    V  
}  
const ClassNames = new Map < number,  
    string > ([  
        [classes.I, '100'],  
        [classes.II, '200'],  
        [classes.III, '300'],  
    ]);  
class AllStandards {  
    public allNames: object;  
    constructor() {  
        this.allNames = ClassNames;  
    }  
}  
let obj: AllStandards = new AllStandards();  
console.log(obj.allNames);   

Output

Map(3) {0 => "100", 1 => "200", 2 => "300"}

Point D - export enum
  • typescript allows us to export the enum.
  • export keyword is used before the enum.
  • import is used to import that enum file.

We can declare the enum like this:

export enum sportActivities {Football, Cricket,Badminton, Tennis}  

To import the enum in .ts,  i.e.; typescript file looks like this:

import {sportActivities} from '../enums'  
Summary

In this article, you learned about enum in Typescript. Thanks for reading!

TypeScript Course for Beginners 2020 - Learn TypeScript from Scratch!

TypeScript Course for Beginners 2020 - Learn TypeScript from Scratch!

TypeScript Course for Beginners 2020 - Learn TypeScript from Scratch! Free TypeScript Introduction for Beginners: Get Started with TypeScript, learn the Basics, its Features, Workflows and how to use it!

TypeScript Course for Beginners 2020 - Learn TypeScript from Scratch!

Free TypeScript Introduction for Beginners: Get Started with TypeScript, learn the Basics, its Features, Workflows and how to use it!