Quick Start On TypeScript In 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

  • Support standard JavaScript codes.
  • Encapsulation through classes and modules.
  • TypeScript supports interface and enum.
  • Constructor, properties and functions.
  • Error handling features.
  • Generics and lambda.

TypeScript to Javascript

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

TypeScript

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

TypeScript

TypeScript Playground

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

Basic Data Types in TypeScript

  • 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

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

Examples for Tuples and enum data types are as follows.
  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 are as 

 

  • Publicfollows.
  • private
  • protected

Property of the class

  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 the 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

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 the 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 in 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 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 created the typescript file and create a class “Author”.

data types

Add a new HTML page in our solution.

data types

Add the script, mentioned below in HTML page. 

data types

Run the Application. 

data types

Using Import and Export (Module operations)

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

The variable, class, functions, interface etc. are declared in one module and they are not available in the outside of this module without export, using the export keyword. Once it's exported, it has to be imported, using import keyword and these are available for that imported module. Let's see the example, how we can export and import from the different classes. Add new Typescript file Company, which is using export keyword

data types

Import our new Company class into our Author class.  Add export keyword into 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 to create an Application, using TypeScript in Visual Studio and basic step to create class, different data types declaration etc.

 

Recommended Free Ebook
Similar Articles