TypeScript Basics

Introduction

 

Nowadays, there are so many JavaScript frameworks (Angular, React) written and used to develop front-end UI by using TypeScript. It has become very important that every developer has a very basic knowledge of Typescript. So, in this article, we will look into Typescript Basics for getting started with it.

 

Prerequisites

• Basic knowledge of JavaScript
• OOPs concept

What is TypeScript?

 

The TypeScript language is a typed superset of JavaScript, which means any program written using TypeScript language will be compiled into plain JavaScript.

 

What does TypeScript solve over JavaScript and why is TypeScript so popular among developers?

• Types & Equality
• Scope
• OOPs Implementation
• Module management

Installing Typescript

 

There are two basic ways to install Typescript,

• Via NPM (Nodejs Package Manager)
• Typescript’s Visual Studio plugins.

Please see this link for more information

 

Via npm, enter this command in command prompt:

npm install - g typescript

Save the file with a name and a .ts extension. Then, compile it.

tsc helloworld.ts

The result will be the helloworld.js file. It will return an error if invalid type assignments or any.

 

TypeScript Variables

 

TypeScript variables must follow the JavaScript naming rules.

 

Types

 

In JavaScript, each variable has a type, but it changes on each assignment. String variable changes into a number, an object, or even a function. The development tool keeps guessing the type of variable.

 

TypeScript is optionally statically typed; this means that types are checked automatically to prevent accidental assignments of invalid values.

const name: string = 'Jayesh';
const active: boolean = 100;
const score: number = 100;
const names: string[] = ['Jayesh', 'Arvind', 'Deep', 'Sanjay'];
let student: {
 name: string;score: number;
};
student = {
 name: 'Jay',
 score: 99
};
enum days {
 Saturday = 1, Sunday
}
const day = days.Saturday;
let accounts: [number, boolean, string];
accounts = [1, true, 'Saving'];
accounts = ['my', true, 'Saving'];

Operators

 

All the standard JavaScript operators are available within our Typescript program.

 

Functions

 

Let’s see several ways of writing function in Typescript,

let getHello(name: string): string {
 return 'Hello ' + name;
};
let printHello(name: string): string {
 console.log('Hello ' + name);
};
let printHello(name: string, score = 90): string {
 console.log('Hello ' + name + ' Score ' + score);
};
const sum = (a: number, b: number) => {
 return a + b;
}

Code Organization

 

Interfaces

 

Interfaces are not only used as an abstract type that can be implemented by concrete classes. It will be also used to define any structure (defining the contracts) in our typescript. Let’s see Interfaces annotation as below,

interface customer {
 name: string;
 printName(): void;
}

Classes

 

Classes are structural elements that are helpful to organize functions & variables within Typescript. It can be implemented as class-based object-oriented programming. Let’s see a simple example of class,

class Student {
 constructor(private name: string, private rollNo: string) {}
 print() {
  console.log('Student Name: ' + this.name + ' RollNumber: ' + this.rollNo);
 }
}
class Attendence {
 constructor(private students: Student[]) {}
 getAttendance() {
  const student = this.getStudent();
  student.print();
 }
 private getStudent() {
  const studentCount = this.students.length;
  const studentIndex = Math.floor(Math.random() * studentCount);
  return this.students[studentIndex];
 }
}
const students = [new Student('Jayesh', 1), new Student('Arvind', 2), new Student('Deep', 3), new Student('Sanjay', 4)];
const attendance = new Attendence(students);
attendance.getAttendance();

Access Modifiers

• private
  The private modifier restricts the visibility to the same-class only
   
• protected
  The protected modifier allows the member to be used within the same class and within subclasses. Access from anywhere else is not allowed.
   
• Public
  Is the default for class members, allows access from all locations

Conclusion

 

In this article, we have learned very basic concepts of typescript. I hope that it will be helpful to everyone when getting started with Typescript.