TypeScript Basics

Nowadays, there are so many JavaScript frameworks (Angular, React) written and used to develop frontend UI by Typescript. It very important to every developer has very basic knowledge about Typescript. So, in this article we will look into Typescript Basics for getting started with it.

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:
  1. npm install - g typescript   
Save the file with a name and a .ts extension. Then, compile it.
  1. 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.
  1. const name: string = 'Jayesh';  
  2. const active: boolean = 100;  
  3. const score: number = 100;  
  4. const names: string[] = ['Jayesh''Arvind''Deep''Sanjay'];  
  5. let student: {  
  6.  name: string;score: number;  
  7. };  
  8. student = {  
  9.  name: 'Jay',  
  10.  score: 99  
  11. };  
  12. enum days {  
  13.  Saturday = 1, Sunday  
  14. }  
  15. const day = days.Saturday;  
  16. let accounts: [number, boolean, string];  
  17. accounts = [1, true'Saving'];  
  18. 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,
  1. let getHello(name: string): string {  
  2.  return 'Hello ' + name;  
  3. };  
  4. let printHello(name: string): string {  
  5.  console.log('Hello ' + name);  
  6. };  
  7. let printHello(name: string, score = 90): string {  
  8.  console.log('Hello ' + name + ' Score ' + score);  
  9. };  
  10. const sum = (a: number, b: number) => {  
  11.  return a + b;  
  12. }   

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,
  1. interface customer {  
  2.  name: string;  
  3.  printName(): void;  
  4. }   
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,
  1. class Student {  
  2.  constructor(private name: string, private rollNo: string) {}  
  3.  print() {  
  4.   console.log('Student Name: ' + this.name + ' RollNumber: ' + this.rollNo);  
  5.  }  
  6. }  
  7. class Attendence {  
  8.  constructor(private students: Student[]) {}  
  9.  getAttendance() {  
  10.   const student = this.getStudent();  
  11.   student.print();  
  12.  }  
  13.  private getStudent() {  
  14.   const studentCount = this.students.length;  
  15.   const studentIndex = Math.floor(Math.random() * studentCount);  
  16.   return this.students[studentIndex];  
  17.  }  
  18. }  
  19. const students = [new Student('Jayesh', 1), new Student('Arvind', 2), new Student('Deep', 3), new Student('Sanjay', 4)];  
  20. const attendance = new Attendence(students);  
  21. 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.