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.

Pre-requisite:  Basic knowledge of JavaScript, OOPs concept.

What is Typescript?

The Typescript language is a typed super set of JavaScript, means any program written using Typescript Language will be compiled into plain JavaScript.

What does Typescript solve over JavaScript? And Why Typescript Language is so much 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 this link for more information
For via Npm, enter this command in command prompt:

1. npm install -g typescript  

save file with name as a .ts extension. Then compile it:

1. tsc helloworld.ts  

The result will be helloworld.js file. It will return 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 changed on each assignment. String variable to a number, an object, or even a function. The development tool keeps guess 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 write 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 element that helpful to organize function & variable within Typescript. It can be implemented as class-based object oriented programming. Let’s see simple example of class:

1. class Student {  
2.     // parameterize constructor  
3.     constructor(private name: string, private 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 sub-classes. Access from anywhere else is not allowed.
• Public - which 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.