Quick Start 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, constructors, properties, and functions.
Supports error handling.
Supports advanced programming language features such as collections, generics, and lambdas.

TypeScript to JavaScript

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

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

TypeScript Playground

On this URL, we have the option to write typescript code and you can see the same JavaScript code on 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.

let isAuthor: boolean = true
let ArticleCount: number = 100
let AuthorNmae: string = "Shiju"
let ArrayList: number[] = [100, 101.102]
let GenericArrayList: Array < number >= [10, 20, 30]
The“
let” keyword is using instead of “
var” keyword

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.

let articles: [string, number]
articles = ["shiju", 10]
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
let dynamicdataType: any
dynamicdataType = true;
dynamicdataType = "shiju";
dynamicdataType = 100;

Using void, undefined, and null.

An example of a function with string return type is as follows.

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

Create a class in TypeScript

class Author {
public AuthorName: string = "Shiju";
}
let authordetails = new Author();
let authorName: string = authordetails.AuthorName

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.

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

Methods in TypeScript

The following is an example of a method of a TypeScript class.

class Author {
public AuthorName: string;
isActiveAthour(authorId: number): boolean {
return true;
}
}

Inheritance in TypeScript

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() {}
}

Constructor of a class

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

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

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

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 the Visual Studio version. Click the EXE file.

Now, the installation is complete.

Create a TypeScript Project

Create a new project in Visual Studio.

Select the Empty Project.

Add a new TypeScript file.

Click Yes here.

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

Add a new HTML page to our project.

Add the script, mentioned below on the HTML page.

Run the Application.

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 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 a new Typescript file called Company, which is using the export keyword.

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

Add new system.js reference in the 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 of how to install TypeScript, create a TypeScript app, create classes and their members, and how to import and export class functionality.

8 Comments

Join the conversation! Your thoughts help the community grow.

suhel ahmed7y ago
How systemjs file is created??
olivermode8y ago
Thank you!!!!!!!!!!!!!!!!!!!!!!!!!!
ajmal9y ago
I can create Company object in Author class without import and export. It is not showing error ?? , it is working??. could you please elaborate it little more
Parminder Pal Singh9y ago
Very nice and clear article to start with TypeScript. Good Job
Sourabh Somani9y ago
Very nice and clear Explanation :)
- Shiju Joseph9y ago
  Thanks for the comments :)
Bikesh Srivastava9y ago
Very nice article ,good job
- Shiju Joseph9y ago
  Thanks for the comments :)