In Focus

Quick Start With TypeScript Using Visual Studio

TypeScript is one of the modern superset of JavaScript. In this article, you will learn what TypeScript is and how to get started with TypeScript using Visual Studio.

What is TypeScript?


“TypeScript is a typed superset of JavaScript that compiles plain JavaScript”.

We can download this from the official Website.

Key Features of TypeScript 

  • Supports standard JavaScript codes.
  • Encapsulation through classes and modules.
  • TypeScript supports interfaces and enums.
  • Have object-oriented features such as classes, constructor, properties and functions.
  • Supports error handling.
  • Supports advanced programming language featuures such as collections, generics and lambdas. 

TypeScript to JavaScript


TypeScript compiler (TSC) will convert your TypeScript code into a JavaScript code. 

TypeScript

There are different types of examples in the Playground options, which we can choose from the dropdown list.

TypeScript

TypeScript Playground


On this URL, we have the option to write typescript code and you can see the same JavaScript code in the right hand side.

Basic Data Types in TypeScript 

TypeScript supports the following basic data types. 
  • Boolean
  • Number
  • String
  • Array
  • Tuple
  • Enum
  • Any
  • Void
  • Null and Undefined
  • Never

The code represents the basic data type declaration and syntax in Typescript.

  1. let isAuthor: boolean = true //boolean data type   
  2. let ArticleCount: number = 100 // number data type  
  3. let AuthorNmae: string = "Shiju" //string data types  
  4. let ArrayList: number[] = [100, 101.102] // array list example  
  5.     //Generic arraylist example  
  6. let GenericArrayList: Array < number >= [10, 20, 30]  
  7. The“  
  8. let” keyword is using instead of“  
  9. var” keyword  
ts

Tuples and Enums in TypeScript

 
Tuple types allows you to represent a value as a pair of a string and a number or any other combination.

Here is an example of using the tuples and enums in TypeScript. 
  1. // Tuple  
  2. let articles: [string, number]  
  3. articles = ["shiju", 10]  
  4.     //Enum  
  5. enum Technologies {  
  6.     SharePoint,  
  7.     SQL,  
  8.     ASP  
  9. }  
  10. let Tech: Technologies = Technologies.ASP  
  11. enum TechnologiesUsed {  
  12.     SharePoint = 1, SQL = 2, ASP = 3  
  13. }  
  14. let Techs: TechnologiesUsed = TechnologiesUsed.SharePoint  
data types

Examples for "any" are as follows.
  1. “  
  2. any” is a dynamic data type.once you declare a variable as any type, you can assign any type of data into that variable  
  3.     // Any   
  4.     // Here the value will assigned dyanamicallay  
  5. let dynamicdataType: any  
  6. dynamicdataType = true//boolean type   
  7. dynamicdataType = "shiju"//string Type   
  8. dynamicdataType = 100; // number type  
data types

Using void, undefined, and null.

Example of function with string return type is as follows. 
  1. // Function   
  2. function ArticleNotification(): string {  
  3.     let message: string = "This is my New article";  
  4.     return message;  
  5. }  
  6. // Function with void type  
  7. function ArticleNotification(): void {  
  8.     alert("This is my New article");  
  9. }  
data types

Create a class in TypeScript

  1. // Exmaple of class   
  2. class Author {  
  3.     public AuthorName: string = "Shiju";  
  4. }  
  5. // Create the object of the class   
  6. let authordetails = new Author();  
  7. let authorName: string = authordetails.AuthorName  
data types

 

Access modifiers in TypeScript

 
TypeScript supports the following access modifiers. 
  • public 
  • private
  • protected 

Properties in TypeScript 

Similar to any other class, TypeScript supports properties. The following is an example of an Author class that has a property, AuthorName. 
  1. // Exmaple of class properties   
  2. class Author {  
  3.     private _AuthorName: string;  
  4.     public set AuthorName(value: string) {  
  5.         this._AuthorName = value;  
  6.     }  
  7.     public get AuthorName(): string {  
  8.         return this._AuthorName;  
  9.     }  
  10. }  
data types

Methods in TypeScript

 
The following is an example of a method of a TypeScript class. 
  1. // Example of method in the class   
  2. class Author {  
  3.     public AuthorName: string;  
  4.     isActiveAthour(authorId: number): boolean {  
  5.         return true;  
  6.     }  
  7. }  
data types

Inheritance in TypeScript

To inherit the class in TypeScript, use the “extends” keyword. See the example, mentioned below.
  1. class Author {  
  2.     public AuthorName: string;  
  3.     isActiveAthour(authorId: number): boolean {  
  4.         return true;  
  5.     }  
  6.     inheritExample(): void {  
  7.         alert("Inheritance1")  
  8.     }  
  9. }  
  10. class inheritanceOfClass extends Author {  
  11.     inheritExample(): void {  
  12.         alert("Inheritance example 2")  
  13.     }  
  14. }  
data types

Interface in TypeScript

Use the keyword “implements” for the interface implementation in TypeScript.
  1. interface ITopAuthor {  
  2.     GetTopAuthor()  
  3. }  
  4. class Author implements ITopAuthor {  
  5.     public AuthorName: string = "";  
  6.     GetTopAuthor() {  
  7.         //Implimentation here ...  
  8.     }  
  9. }  
data types

Constructor of a class


The example, mentioned below indicates how to create a constructor of a class in TypeScript.
  1. class Author {  
  2.     public AuthorName: string;  
  3.     constructor(name: string) {  
  4.         this.AuthorName = name;  
  5.     }  
  6. }  
  7. let authorName = new Author("shiju");  
data types

npm Insatll

Download the file and install, Open Node.js command prompt. 

data types

Execute the command “npm install”.

For more details, refer 

Install TypeScript for Visual Studio

Download the install file here. Please download the appropriate EXE for Visual Studio version. Click EXE file. 

data types

data types

Now, the installation is complete. 

data types

Create a TypeScript Project

 
Create a new project in Visual Studio.

data types

Select Empty project. 

data types

Add a new TypeScript file.

data types

Click Yes here. 

data types

Now, we have created the typescript file. In this file, create a class “Author”.

data types

Add a new HTML page to our project.

data types

Add the script, mentioned below in HTML page. 

data types

Run the Application. 

data types

Import and Export Modules in TypeScript

 
JavaScript has a concept of modules that we can do with TypeScript. Import and export are used for this purpose.

The variables, class, functions, interfaces are declared in one module, but they are not available in the outside of that module without exporting them, i.e., using the export keyword. Once it's exported, it must be imported, using the import keyword and then these are available in the imported module.
 
Let's see an example, how we can export and import from different classes. 
 
Add new Typescript file called Company, which is using the export keyword.

data types

Import our new Company class into our existing Author class.  Add export keyword to the Author class. 

data types

Add new system.js reference in HTML page (This is one type of on demand module loader and I will explain this in my next article), Add the script, mentioned below. 

data types

Run the Application. 

data types

Conclusion

In this article, we learned basic steps of how to install TypeScript, create a TypeScript app, create classes and their members, and how to import and export class functionality.