TypeScript Tutorial for Beginners

Free TypeScript Tutorial For Beginners

In this TypeScript tutorial for beginners,  we will be discussing the basics of TypeScript language, its installation, and setup.

Then we will write our first program using typescript and will learn the data types and other features of the language.

In case you are interested in a step by step typescript tutorial then navigate to our tutorial space:

👉 TypeScript Tutorial

👨‍🏫What is TypeScript? – A Quick Intro

TypeScript is an open-source object-oriented programming language developed and maintained by Microsoft. It’s a superset of JavaScript.

TypeScript is designed for the development of large applications and transpiles to JavaScript.

GitHub Markgithub.com/Microsoft/TypeScript

🤷‍♀️Why TypeScript?

Before learning or using any programming or scripting language you should always be aware of the need.

Why do we need to learn TypeScript?

As we already know that TypeScript transpiles to JavaScript as browsers can only understand JavaScript.

So you might be thinking that what’s the need of adding an extra layer if the executable code is going to be JavaScript itself?

⭐There are many benefits of using TypeScript, listing down a few of them.

👉 TypeScript integrates well with React, Vue, and Angular.

👉 TypeScript is a statically typed language and this makes the code easier to refactor. Statically typed programming languages are those in which the type of a variable is known at compile-time instead of at run-time.

👉 TypeScript is easier to read and access. Helps in code maintainability.

💡 In my previous project, we were using TypeScript with React and our files were having .tsx extension and not .jsx. Also, the compiler we used to transpile TypeScript code to JavaScript was Babel.

ReactJS with Redux Certification Trai 09

⏩TypeScript vs JavaScript

The difference between TypeScript and JavaScript are mentioned below:

TypeScript JavaScript
Object-oriented programming language Object-based scripting language
Statically typed Dynamically typed
Has interfaces No concept of interfaces
Can declare variables with data types variables are declared with the ‘var’ keyword
File extension: .tsx or .ts File extension: .js

😎TypeScript Tutorial – Installation

There are two ways to install typescript:

  1. Using npm (Node Package Manager)
  2. Install the TypeScript plugin in your IDE

✅Install typescript using npm

You must have node.js installed on your machine. If you don’t have it installed, you can install it from here.

Now, to install typescript just head over to the command prompt and type the following command:

> npm install -g typescript

-g stands for the global level. We are installing typescript at the global level on our machine.

You can check the version of TypeScript and verify if it is installed on your machine with the help of the command below:

> tsc -v

✅Install the TypeScript plugin in your IDE

You can also install a typescript plugin available for your IDE. You can use IDE of your choices such as VS Code, Visual Studio, Atom, or Sublime Text.

Sharing the links for plugins for the above-mentioned code editors:

  1. VS Code
  2. Visual Studio
  3. Atom
  4. Sublime Text

For most of the IDEs, you can install typescript by opening up the package manager and then search for ‘typescript’ and install it boom!! 💣

You can download typescript from the official site:

👉 https://www.typescriptlang.org/#download-links

🎲TypeScript Playground

Suppose you want to try out some TypeScript code without having to worry about installing it on your system. You may use the online playground for that.

👉 TypeScript Playground

💻Your First TypeScript Program

Let’s start with our first program. Open any editor of your choice and type the code given below:

function greeting(input){ 
 return "Hello, " + input;
} 
let user = "DotNetCrunch"; 
console.log(greeting(user));

This will result in displaying “Hello DotNetCrunch” in the browser’s console.

Hello DotNetCrunch

✍Declaring a variable in TypeScript

TypeScript follows the same rules as JavaScript for variable declarations. Variables can be declared using: var, let, and const.

Examples:

var x = 10;

let user = "DotNetCrunch";

const PI = 3.14;

🧿TypeScript Tutorial – DataTypes

Types can be divided into 3 categories – Any, Built-in, and User-defined.

To assign a type in Typescript, you need a colon: then the name of the type, an equal sign =, and the value of that variable.

For example:

let name: String = "DotNetCrunch";

1. Any

This is the superset for all the data types available. It means that the variable could be of any type. It will override the type checking.

We need to define the type of the variable but at the time of writing the application, we might not be sure about the value. The value might come from dynamic content.

let dynamicValue: any = 4;

In the above example, I have just assigned 4 but the value might come dynamically and it could be a String or boolean instead of a number.

2. Built-in

The Built-in types include string, number, boolean, undefined, null, and void.

String

String in TypeScript is similar to those in JavaScript. They are defined with single or double quotes.

let x: string = "Welcome to DotNetCrunch";

let y: string = 'Learn TypeScript Basics';

Number

The number represents the integer data type. It supports decimal, hexadecimal, octal, and binary literal.

let x: number = 0.789;
let y: number = 0xdnet;
let z: number = 0b0110;

Boolean

Boolean data type represents true or false similar to that of JavaScript.

let isAdmin: boolean = true;
let isError: boolean = false;

Undefined & Null

The undefined value is a primitive value used when a variable has not been assigned a value.

The null value is a primitive value that represents the null, empty, or non-existent reference.

TypeScript Tutorial - Undefined & Null
source: Imgur

💡 As a best practice, you should always use undefined and not null.

Void

In programming languages like C# or Java, we use void as a return type for the function that doesn’t return anything. It works similarly in TypeScript. It is a subtype of undefined.

💡 The ‘void’ type can have undefined or null as a value whereas ‘never’ cannot have any value.

Never

It indicates that the value will never occur. It is used when you are sure that something is never going to happen.

👉 Read more on never

3. User-defined

The user-defined types include array, enum, interface, class, union, and tuple.

Array

Arrays in TypeScript are similar to those in JavaScript. An array can be declared in two ways: using square brackets or using angle brackets.

Example:

let smiley: string[] = ['🙂','😃','🤣'];

OR

let smiley: Array<string> = ['🙂','😃','🤣'];

Enum

Enum is a way of giving more friendly names to the numeric values. They allow us to declare a set of named constants.

Example:

enum DayOfWeek { Mon, Tue, Wed, Thu, Fri, Sat, Sun }
let d: Day = DayOfWeek.Sat;

Interface

An interface defines how the data is being used. It is a way to define contacts within your code. We can define properties and methods inside an interface. In the TypeScript interface, arrow functions are also supported.

Example:

interface IStudent {
    studentId: number;
    studentName: string;
    getResult: (studentId: number) => number; // arrow function
    getBatchName(number): string; 
}

Class

TypeScript supports object-oriented programming. So, we can use classes and objects into typescript as we do it in any other object-oriented programming language like C# or Java.

Example:

class Student {
    studentId: number;
    studentName: string;

    constructor(id: number, name: string) {
            this.studentId = id;
            this.studentName = name;
    }

    getResult(studentId: number) : number {
        // logic to calculate & return result...
    }
}

Union

In TypeScript, we can use more than one data type for a variable or a function. This data type is known as the Union.

let iD: string | number;
iD = 123; // OK
iD = "D007"; // OK
iD = true; // Compiler Error

Tuple

A tuple is a data type that holds two sets of values of different data types. In the example given below, we are storing both number and string types of data in the same variable.

Example:

let city: [number, string] = [1, "Mumbai"];

TypeScript Tutorial – Modifiers

There are 3 types of access modifiers in TypeScript: public, private, and protected.

Public

By default, all the members of a class are public in TypeScript.

Private

When any of the class members are declared private, it is only accessible within the class scope.

Protected

The protected members are similar to private access modifiers, except that they are accessible in the derived class.

This is all as far as TypeScript Tutorial for Beginners is concerned.

As a beginner now you are well versed with TypeScript.

TypeScript Tutorial – Further Reading

If you want to learn more about TypeScript then please refer to these resources.

TypeScript Books

You may refer to any of these books in order to learn TypeScript in depth.

q? encoding=UTF8&ASIN=B07R86FL4K&Format= SL160 &ID=AsinImage&MarketPlace=IN&ServiceVersion=20070822&WS=1&tag=dshekhawat 21ir?t=dshekhawat 21&l=li2&o=31&a=B07R86FL4K q? encoding=UTF8&ASIN=B07WZXYTRH&Format= SL160 &ID=AsinImage&MarketPlace=IN&ServiceVersion=20070822&WS=1&tag=dshekhawat 21ir?t=dshekhawat 21&l=li2&o=31&a=B07WZXYTRH q? encoding=UTF8&ASIN=1492053740&Format= SL160 &ID=AsinImage&MarketPlace=IN&ServiceVersion=20070822&WS=1&tag=dshekhawat 21ir?t=dshekhawat 21&l=li2&o=31&a=1492053740 q? encoding=UTF8&ASIN=1484246578&Format= SL160 &ID=AsinImage&MarketPlace=IN&ServiceVersion=20070822&WS=1&tag=dshekhawat 21ir?t=dshekhawat 21&l=li2&o=31&a=1484246578 q? encoding=UTF8&ASIN=178913028X&Format= SL160 &ID=AsinImage&MarketPlace=IN&ServiceVersion=20070822&WS=1&tag=dshekhawat 21ir?t=dshekhawat 21&l=li2&o=31&a=178913028X

TypeScript Courses

Below are a few top-rated courses on TypeScript.

1. Understanding TypeScript – 2021 Editionicon

 

2. Typescript: The Complete Developer’s Guide

3.TypeScript: The Complete Developer’s Guide

typescript the complete guide

 

📢TypeScript For Beginners 2022

Learn all that you need to get started with TypeScript in a short time.

The course will help you learn TypeScript step by step. Sections are broken down into lectures, where each lecture contains several related topics that are packed with easy-to-understand explanations and real-world examples.

The course is designed for beginners and intermediate-level professionals who want to learn TypeScript and use it for building applications.

TypeScript for Beginners 2022

TypeScript Tutorial – Instagram

Refer to the post below to explore some other resources on TypeScript.

You can follow @dotnetcrunch on Instagram. I reply to the DMs fast 😉

👉 You may also refer to our post that will help you choose between React vs Vue vs Angular?

Happy TypeScripting {}

Share with your friends:

Leave a Comment

Your email address will not be published. Required fields are marked *