Getting started with typescript and angular 2

Anubhav Tarar
Trainee Software
Consultant
anubhav.tarar@knoldus.in
Getting Started
With
Typescript

Agenda
1. What is TypeScript
2. Benefits
3. Typescript Vs. JavaScript
4. New features of Typescript
5. Installation
6. How to compile Typescript file
7. How to compile multiple Typescript file into a single js file
8. Enable the Typescript Compiler
9. Demo

What is TypeScript ?
• Type Script is a superset of JavaScript
• Type Script is a free and open source programming language
developed and maintained by Microsoft.
• Type Script files are compiled to readable JavaScript

Benefits
• Big advantage of Typescript is we identify Type related issues
early before going to production
• You can even set the JS version that you want your resulting
code on.
• Typescript allows us to define new classes and new
• Typescript is statically typed

TypeScript Vs. JavaScript
• JavaScript has ambiguity because of having no datatype
declaration which is now possible in Type Script. It makes the
code more understandable and easy
• It allows us to use javascript as if an object oriented code which
is much more clear than javascript due to its syntax.
• Typescript include function overloading but javascript does not
• TypeScript is optionally typed by default
• For a large JavaScript project, adopting TypeScript might result
in more robust software, while still being deployable where a
regular JavaScript application would run.

Type Annotation
• The type annotation we can add to a variable we define, should
come after the variable identified and should be preceded by a
colon.
• var id:number = 123123;
• var name:string = "mosh";
• var tall:boolean = true;

Dynamic Type
• TypeScript is optionally statically typed programming language.
The types are checked in order to preventassignment of invalid
values in term of their types.
• We can optionally change the variable into a dynamic one.
var demo:any =5;
demo =''john”;
demo = new Object();

Automatic Type Inferring
• When assigning a variable, that was just created, with a value,
the TypeScript execution environment automatically identifies
the type and from that moment on the type of that variable is
unchanged.
• var demo = 1;
• demo ='abc' // result in compilation error

Type Eraser
When compiling the TypeScript code into JavaScript all of the
type annotations are removed.
App.ts
var a: number = 3;
var b: string = 'abc';
App.js after Compilation
var a = 3;
var b = 'abc';

Constructor
• When we define a new class it automatically has a constructor.
The default one. We can define a new constructor. When doing
so, the default one will be deleted.
• When we define a new constructor we can specify each one of
its parameters with an access modifier and by doing so
indirectly define those parameters as instance variables

Constructor
class Person {
constructor(public name:String)
{ this.name = name;}
greet():String={ return “my name is”+this.name);
}
}
var person = new Person(“john);
Console.log(person.greet);

Interfaces(ts file)
interface LabelledValue { label: string;}
function printLabel(labelledObj: LabelledValue)
{ console.log(labelledObj.label) }
let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);
The interface LabelledValue is a name we can now use to
describe the requirement in the previous example.
• It still represents having a single property called label that is of
type string.
• Notice we didn’t have to explicitly say that the object we pass
to printLabel implements this interface like we might have to in
other languages. Here, it’s only the shape that matters. If the
object we pass to the function meets the requirements listed,
then it’s allowed.

Function Overloading(.ts file)
class Customer {
name: string;
Id: number;
add(Id: number);
add(name:string);
add(value: any) {
if (value && typeof value == "number")
{ //Do something }
if (value && typeof value == "string")
{ //Do Something }
}
}

Function Overloading(.js file)
var Customer = (function () {
function Customer() {
}
Customer.prototype.add = function (value) {
if (value && typeof value == "number") {
}
if (value && typeof value == "string") {
}
};
return Customer;
}());

TypeScript Support Optional Properties
In JavaScript, every parameter is considered optional. If no value is supplied,
then it is treated as undefined. So while writing in TypeScript, we can make
a parameter optional using the “?” after the parameter name.
interface SquareConfig { color?: string;width?: number;}
function createSquare(config: SquareConfig): {color: string; area: number}
{ let newSquare = {color: "white", area: 100};
if (config.color) { newSquare.color = config.color; }
if (config.width) { newSquare.area = config.width * config.width; }
return newSquare; }
let mySquare = createSquare({color: "black"});

How Do You Compile TypeScript Files?
The extension for any TypeScript file is “.ts”. And any JavaScript
file is TypeScript file as it is a superset of JavaScript. So change
extension of “.js” to “.ts” file and your TypeScript file is ready. To
compile any .ts file into .js, use the following command.
tsc <TypeScript File Name>
For example, to compile “Helloworld.ts”:
• tsc helloworld.ts
• And the result would be helloworld.js.

Is It Possible to Combine Multiple .ts Files
into a Single .js File?
Yes, it's possible. While compiling add --outFILE
[OutputJSFileName] option.
• tsc --outFile comman.js file1.ts file2.ts file3.ts
• This will compile all 3 “.ts” file and output into single
“comman.js” file. And what will happen if you don’t provide a
output file name.
• tsc --outFile file1.ts file2.ts file3.ts
• In this case, file2.ts and file3.ts will be compiled and the output
will be placed in file1.ts. So now your file1.ts contains
JavaScript code.

How to install Typescript
1.Install git
2.Install nodejs
3.Install Typescript
npm install -g typescript

Working Example(func.ts)
class customer{
name:String;
constructor(name:String){
this.name= name;
}
}

Working Example(func1.ts)
class cust {
name:string;
Id:number;
add(Id:number);
add(name:string);
add(value:any){
}
}
tsc --outFile comman.js func1.ts func.ts

Working Example(comman.js)
var customer = (function () {
function customer(name) { this.name = name; }
return customer;
}());
var cust = (function () {
function cust() { }
cust.prototype.add = function (value) { };
return cust;
}());

Enabling the TypeScript Compiler
In order to develop code in TypeScript using the
PHPStorm or the WebStorm IDE we should perform following steps
• In the Default Preferences setting window, enable the
• TypeSciprt compiler, specifying the node interpreter and
• specify the main file we want to compile.

Getting started with typescript and angular 2

Designing a Demo.ts File
class Demo{
name:String;
constructor(name:String) {
this.name = name;}
display():String{
return "my name is"+name;
}
}
var demo = new Demo("anubhav");
console.log(demo.display());

Automatically Generated Demo.js File
var Demo = (function ()
{
function Demo(name) {
this.name = name;
}
Demo.prototype.display = function () {
return "my name is" + name;
};
return Demo;
}());
var demo = new Demo("anubhav");
console.log(demo.display())

Working demo
Angular 2 With TypeScript
you can clone it from repo
https://github.com/anubhav100/angular2.git
.

References
https://www.typescriptlang.org/docs/tutorial.html
http://stackoverflow.com/questions/12694530/what-is-typescri
https://www.youtube.com/watch?v=KGdxz9C6QLA

Getting started with typescript and angular 2

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Getting started with typescript and angular 2 (20)

More from Knoldus Inc. (20)

Recently uploaded (20)

Getting started with typescript and angular 2

Editor's Notes