TypeScript 101: Tools to Hello World
TypeScript is super-set of JavaScript created by Microsoft that “lets you write the way you really want and compiles to JavaScript.”
Join the DZone community and get the full member experience.
Join For Freethis post by dhananjay kumar of the infragistics.com community blog , syndicated by permission.
this post will help you get started with typescript by setting up the development environment for typescript in visual studio and sublime text. at the end of the post, we will create a simple typescript program in visual studio.
typescript features
includes:
support for standard javascript |
static typing and annotations |
encapsulation using classes and modules |
support for constructors, properties, and functions |
syntax checking |
does:
syntactically sugar-coat javascript as a super-set of ecmascript 5 and with various proposed features of ecmascript 6 |
compiles with module code generation which can be loaded statically or dynamically |
works with type inference |
does not reorder variable declaration |
typescript in visual studio
prerequisites
to work with typescript in the visual studio, download the typescript package for your version of visual studio from http://www.typescriptlang.org and install as needed ( figure 1 , right).
more recent versions of visual studio include typescript.
to create a typescript project in visual studio
-
find
html application with typescript
inside the typescript section of installed templates, as shown in ( figure 2 ), below. -
create a project using the
html application with typescript
template. after making the project, find the files app.ts in the solution explorer ( figure 3 ) and app.js in the project folder:
-
app.ts
a typescript file. whenever you save this file, visual studio will create a javascript equivalent of it with the name app.js . -
in index.html
( figure 4 ), you will notice a reference to the compiled app.js ; however the file is not included in the project by default. you can add it to the project manually.
-
you can add more than one typescript file with opening a context menu with a right click, selecting "add new item," and then "typescript file." after adding the new source file, visual studio will create a corresponding javascript file in the same folder. you need to manually add references to those javascript files in your html.
the file app.ts contains a reference code to print the current time in typescript. without changing anything, go ahead and run the application in your favorite browser and you will have the current time printed in the browser using typescript, shown in figure 5 , below:
typescript in sublime text
prerequisites
-
a syntax highlighter
-
a custom build system
to install typescript syntax highlighting
-
git clone this package to
\appdata\roaming\sublime text 2\packages
as shown in figure 6 , below: -
once installed, create a new .ts file in sublime text and you will find that typescript syntax is working ( figure 7 ):
to create the typescript build system
-
tools → build system → new build system
-
in the new build system window, paste the code below and save the file with a name like "typescriptbuild."
{
"selector": "source.ts",
"cmd": ["tsc", "$file"],
"file_regex": "^(.+?) \\((\\d+),(\\d+)\\)(: .+)$"
}
after custom build creation, select tools → build system → typescriptbuild and you should able to use ctrl+b to build typescript into a javascript file.
a simple example
-
using typescript, let's create a class. typescript allows us to create a class using simple syntax. a class can be created using the
class
keyword. we can define variables with the types, and a constructor can be created using the keyword constructor. -
below, we are creating a student class with two properties, constructor and a method. the class can be created as:
class student {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
print() {
alert(this.name + " is " + this.age + " years old !!");
}
}
window.onload = () => {
var stud1 = new student("dj", 33);
stud1.print();
};
we can create an object using the new keyword. in the student class print method, we are displaying the age and name of the student.
when you run the application you will get an alert message as shown in the image below:
i hope you find this post useful to get started with typescript - have something to say? leave a comment!
Published at DZone with permission of Josh Anderson, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments