Introduction and Basics about TypeScript
In this article, I am going to walk through
on setting up TypeScript in Visual Studio and describing basics about
it.
TypeScript script can be installed in Visual Studio 2012, but it was included by default from Visual Studio 2013
Update 2 and higher versions. You can download the TypeScript for your
respective Visual Studio from below button:
TypeScript
Setup
After download and installing the
TypeScript from the above download button, create a new ASP.NET web project in your
Visual Studio as shown below.
Note: In this article I am showing the TypeScript examples using ASP.NET
web project application in Visual Studio 2015. You can create any other
applications like MVC, ASP.NET Core applications.
After words, create a new folder under
project and name it Scripts. You can
have your own name.
Next, right click on the Scripts folder and choose Add -> New
Item.
Select TypeScript
File from the available templates under Web category and add the file with
default name app.ts
The outcome of the TypeScript file will be producing
the compiled version of JavaScript file from TypeScript.
Now again right click on Scripts folder and choose Add -> New
Item
Choose the TypeScript JSON Configuration File from the available templates
list under Web category and add it with default name tsconfig.json
Now your solution in visual studio look
like this:
If you want to compile the TypeScript file
automatically upon saving it, set the compileOnSave
key to true value in tsconfig.json
file as shown below:
TypeScript
Basics
TypeScript allows the developers to write
the object oriented style of code and compiles it into JavaScript structured
format.
Here is the basic example of the TypeScript code, which shows you how to write a class in TypeScript and defining it's class members (variables, properties, constructors and methods).
Here is the basic example of the TypeScript code, which shows you how to write a class in TypeScript and defining it's class members (variables, properties, constructors and methods).
//TypeScript class
class Employee
{
//variables
private firstName: string = "";
private lastName: string = "";
//get & set property
get FirstName(): string
{
return this.firstName;
}
set FirstName(value: string)
{
this.firstName =
value;
}
//get & set property
get LastName(): string {
return this.lastName;
}
set LastName(value: string) {
this.lastName =
value;
}
//constructor
constructor(fName: string, lName: string)
{
this.FirstName =
fName;
this.LastName = lName;
}
//method
GetDisplayName(): string
{
return this.FirstName + " " + this.LastName;
}
}
As you noticed in the above code, TypeScript programming is very similar to other high level programming languages like .NET/JAVA.
Now, if you save the TypeScript file app.ts which automatically compiles and produces the app.js JavaScript file in the same location.
Now, if you save the TypeScript file app.ts which automatically compiles and produces the app.js JavaScript file in the same location.
Next steps is to create a new UI page,
refer the app.js JavaScript file and call the functions from JavaScript file as shown
below:
When you run the about code, it will alert
the display name of the Employee as shown below:
Hope this helps you to get start with TypeScript. If you have any queries let’s discuss them from below comment box.
No comments: