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. 



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



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.

let isAuthor: boolean = true //boolean data type
let ArticleCount: number = 100 // number data type
let AuthorNmae: string = "Shiju" //string data types
let ArrayList: number[] = [100, 101.102] // array list example
    //Generic arraylist example
let GenericArrayList: Array < number >= [10, 20, 30]
The“
let” keyword is using instead of“
var” keyword

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.

// Tuple
let articles: [string, number]
articles = ["shiju", 10]
    //Enum
enum Technologies {
    SharePoint,
    SQL,
    ASP
}
let Tech: Technologies = Technologies.ASP
enum TechnologiesUsed {
    SharePoint = 1, SQL = 2, ASP = 3
}
let Techs: TechnologiesUsed = TechnologiesUsed.SharePoint

Examples for “any “ are as follows.

“
any” is a dynamic data type.once you declare a variable as any type, you can assign any type of data into that variable
    // Any
    // Here the value will assigned dyanamicallay
let dynamicdataType: any
dynamicdataType = true; //boolean type
dynamicdataType = "shiju"; //string Type
dynamicdataType = 100; // number type

Using “Void”, “undefined” and “null”.

Example of function with string return type is as follows. 

// Function
function ArticleNotification(): string {
    let message: string = "This is my New article";
    return message;
}
// Function with void type
function ArticleNotification(): void {
    alert("This is my New article");
}

Create a class in TypeScript

// Exmaple of class
class Author {
    public AuthorName: string = "Shiju";
}
// Create the object of the class
let authordetails = new Author();
let authorName: string = authordetails.AuthorName

Access modifiers in TypeScript are as 

 

• Publicfollows.
• private
• protected

Property of the class

// Exmaple of class properties
class Author {
    private _AuthorName: string;
    public set AuthorName(value: string) {
        this._AuthorName = value;
    }
    public get AuthorName(): string {
        return this._AuthorName;
    }
}

Methods in the class

// Example of method in the class
class Author {
    public AuthorName: string;
    isActiveAthour(authorId: number): boolean {
        return true;
    }
}

Inheritance

To inherit the class in TypeScript, use the “extends” keyword. See the example, mentioned below.

class Author {
    public AuthorName: string;
    isActiveAthour(authorId: number): boolean {
        return true;
    }
    inheritExample(): void {
        alert("Inheritance1")
    }
}
class inheritanceOfClass extends Author {
    inheritExample(): void {
        alert("Inheritance example 2")
    }
}

Interface in TypeScript

Use the keyword “implements” for the interface implementation in TypeScript.

interface ITopAuthor {
    GetTopAuthor()
}
class Author implements ITopAuthor {
    public AuthorName: string = "";
    GetTopAuthor() {
        //Implimentation here ...
    }
}

Constructor of a class

The example, mentioned below indicates how to create a constructor of a class in the TypeScript.

class Author {
    public AuthorName: string;
    constructor(name: string) {
        this.AuthorName = name;
    }
}
let authorName = new Author("shiju");

npm Insatll

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



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. 





Now, the installation is complete. 



Create a new project in Visual Studio.



Select Empty project. 



Add a new TypeScript file.



Click Yes here. 



Now, we created the typescript file and create a class “Author”.



Add a new HTML page in our solution.



Add the script, mentioned below in HTML page. 



Run the Application. 



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



Import our new Company class into our Author class.  Add export keyword into Author class. 



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. 



Run the Application. 



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.