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.

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 very basic knowledge about 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 a variable.

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

  1. //string - a sequence of UTF-16 code units  
  2. const name: string = 'Jayesh';  
  3.   
  4. // boolean - true or false  
  5. const active: boolean = 100;  
  6.   
  7. //number - a double-precision 64-bit floating point value    
  8. const score: number = 100;  
  9.   
  10. // array type  
  11. const names: string[] = ['Jayesh''Arvind''Deep''Sanjay'];  
  12.   
  13. // object type  
  14. let student: { name: string; score: number; };  
  15.   
  16. // Implementation of a student object  
  17. student = { name: 'Jay', score: 99 };  
  18.   
  19. // enumerations type    
  20. enum days { Saturday = 1,Sunday }  
  21. const day = days. Saturday;  
  22.   
  23. // Tuple Types  
  24. let accounts: [number , boolean , string];  
  25.   
  26. // Tuple Types - OK  
  27. accounts = [1, true'Saving'];  
  28.   
  29. // Tuple Types - Error: 'string' is not assignable to 'number'  
  30. 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. // function with parameter type & return type    
  2. let getHello(name: string): string{    
  3.    return 'Hello ' + name;    
  4. };    
  5.     
  6. // void - if function isn’t return any values.    
  7. let printHello(name: string): string{    
  8.    console.log('Hello ' + name);      
  9. };    
  10.     
  11. // default parameters    
  12. let printHello(name: string, score=90): string{    
  13.    console.log ('Hello ' + name + ' Score ' + score);    
  14. };    
  15.     
  16. // arrow functions    
  17. const sum = (a: number, b: number) => { return a + b; }   
Code Organization
 
Interfaces

Interfaces are not only used as 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.   
  3. // Properties  
  4. name: string;  
  5.   
  6. // Methods  
  7. printName(): void;  
  8.   
  9. }  

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.     // parameterize constructor  
  3.     constructor(private name: stringprivate rollNo: string) {  
  4.     }  
  5.     //  function - default public   
  6.     print() {  
  7.         console.log('Student Name: ' + this.name + ' RollNumber: ' + this.rollNo);  
  8.     }  
  9. }  
  10.   
  11. class Attendence {  
  12.     constructor(private students: Student[]) {  
  13.     }  
  14.     // function - default public   
  15.     getAttendance() {  
  16.         const student = this.getStudent();  
  17.         student.print();  
  18.     }  
  19.     // private function  
  20.     private getStudent() {  
  21.         const studentCount = this.students.length;  
  22.         const studentIndex = Math.floor(Math.random() * studentCount);  
  23.         return this.students[studentIndex];  
  24.     }  
  25. }  
  26.   
  27. const students = [  
  28.     new Student('Jayesh', 1),  
  29.     new Student('Arvind', 2),  
  30.     new Student('Deep', 3),  
  31.     new Student('Sanjay', 4)  
  32. ];  
  33.   
  34. const attendance = new Attendence(students);  
  35. 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.