TypeScript

TypeScript has lot of useful features not available in JavaScipt  which helps in developing complex applications.One such feature is Automatic Assignment of Constructor Parameters in TypeScript .This is also called Parameter Property.

TypeScript automatically manages the class variables when we have constructor arguments.When we declare a class we normally declare variables and constructor arguments separately.We declare a class as:

class Employee
{
_name:string;
_id:string;
_age:number;

constructor(Name: string, Id: string,Age:number) {
this.Name = _name;
this.Id = _id;
this.Age=_age;
}
}

This is common pattern whether we are using C# ,Java or any other programming language.

But when we declare parameters in TypeScript with some access modifier such as private then TypeScript handles the parameter differently.TypeScript automatically generates new variable for the constructor arguments.Equivalent code using the automatic parameter assignment will be

class Employee
{
constructor(private Name: string, private Id: private string,Age:number) {

}
}

This TypeScript constructor will create three new instance members corresponding to the three constructor arguments.The three instance variables will be initialized with the values of the three constructor arguments.This feature called Parameter properties helps solve the common problem when we need to declare and initialize instance variables separately.

The modifiers which we can use for Parameter properties are:

• public
• protected
• readonly

Follow on:

This tutorial will help you understand the basics of TypeScript if you don’t have any experience with TypeScript.

TypeScript

TypeScript is a language which is used for building  large JavaScript applications.JavaScript is not suitable for developing large scale enterprise applications like other programming languages,such as Java or C#.

TypeScript helps in developing large JavaScript applications in the following ways.

It adds language features which were missing in JavaScript and which are required for developing large scale applications.These features are:

Object Oriented language features such as:

• Classes
• Interfaces
• Inheritance

Optional Static typing.TypeScript is a strongly typed language.This means that the type checking is performed at compile time instead of run time.

Compilation.TypeScript is a compiled language.JavaScript is an interpreted language.This means that type errors are caught at compile time instead of runtime unlike JavaScript.

Intellisense support

Main features of TypeScript can be depicted with the following diagram:

For understanding what is TypeScript Overview of TypeScript

Creating a simple application using TypeScript

For developing TypeScript applications we can use:

• Visual Studio 2013(update 2) and Visual Studio 2015
• Visual Studio Code
• Any Text Editor

If you are using text editor you can install TypeScript using the following Node.js npm command:

npm install -g typescript

Since TypeScript is a superset of JavaScript so a JavaScript program is also a valid TypeScript program.Following is a simple JavaScript program which is also a valid TypeScript program:

function Hello(message) {
document.body.innerHTML = message;
}

Hello("Hello TypeScript");

Save above code in a file Hello.ts.TypeScript files have .ts extension by convention.

Compiling a TypeScript program

If you are using text editor you can compile the above code using the TypeScript transpiler as:

tsc greeter.ts

Classes in TypeScript

A real world TypeScript application consists of classes and interfaces.To understand the basics of classes in TypeScript :Class in TypeScript

Classes in TypeScript are similar to classes in Java and C#.Classes are declared using the keyword class.Following declares an Employee class:

class Employee{
constructor(public Name) {
this.fullName =Name;
}
}

Important point to consider in the above code is Name argument is declared as public.When a constructor argument as declared as public in TypeScript then property with the same name is automatically created by TypeScript.Here Name property is created automatically.

Type Annotations

Annotations are used declare variables and function parameters in TypeScript.We declare a variable using annotation as:

varName:TypeName;

We declare a string variable as:

firstName: string;

In function arguments we use annotations as:

function Hello(message:string) {
document.body.innerHTML = message;
}

Variable declaration in TypeScript

Variable Declaration in TypeScript

Arrays in TypeScript

Arrays in TypeScript

Interface in TypeScript

Interface in TypeScript is similar to interface in Java and C#.Interface is declared using interface keyword.

interface CommonInterface {
Name: string;
Address: string;
}

An important feature of interfaces in TypeScript is that interfaces in TypeScript doesn’t need to be implemented explicitly.So the following class implicitly implements the above interface.This is because in TypeScript if the structure of a class is similar to structure of interface then it implicitly implements it.

class Employee {

constructor(public Name, public Address) {

}
}

 

 

Follow on:

TypeScript

TypeScript is a programming language.It is superset of JavaScript.This means that any valid JavaScript program is a valid TypeScript program.It is open source programming language developed by Microsoft.It is the prefered language for developing Angular 2 applications.
TypeScript adds some useful features which are missing in JavaScript.Some of these features are:

• It adds type checking at compile time
• It adds object oriented features to JavaScript
• JavaScript is not suitable for developing large applications because of the complexity of large applications.TypeScript allows the developers to develop large applications by using object oriented principles.

Please refer TypeScript Overview for more

Installing TypeScript

It is available as a package and can be installed as:

npm install -g typescript

Before installing TypeScript, using the above command ,ensure if Node.js is installed.

Extension of TypeScript files

By convention TypeScript files have an extension of .ts.

Compiling TypeScript Code

Converting TypeScript code to JavaScript is called transpiling.TypeScript transpiler is called tsc.To transpile a file using the TypeScript compiler execute the following command:

tsc  hello.ts

TypeScript transpiler is integrated with Visual Studio.

tsconfig.json

This is a TypeScript configuration file. tsconfig.json defines the compiler settings and the TyepScript files to be included in a TypeScript application.

Which Editor can be used for developing TypeScript applications

TypeScript applications can be developed in Visual Studio as well as Visual Studio Code.Visual Studio Code is a free code editor from Microsoft.

Object Oriented features of TypeScript

TypeScript is a Object Oriented Language.It supports the Object Oriented Concepts such as:

• Classes
• Modules
• Interfaces
• Types

TypeScript includes primitive types such as Number,Boolean,String and Enum and allows creation of custom types such as classes and interfaces.

Variable Declaration in TypeScript

variables are declared in TypeScript as:

var identifier: type= value;

for example to declare a variable of type number called x we write:

var x:number=1;

Throwing exceptions in TypeScript

To throw an error in our TypeScript program we use the throw keyword as:

throw new Error('error occured');

In the above throw statement we can pass any string value.

Catching exceptions in TypeScript

try {
throw new Error("error");
} catch (errorObj) {
//handle error
}

Arrays in TypeScript

Please see Arrays in TypeScript

Annotations

Annotations describe variable and function parameters.

For example to declare a variable we use the annotation as:

message:string;

and to declare a method parameter we use the type annotation as:

function Hello(message: string) {
return "Hello, " + person;
}

 

Follow on:

TypeScript is a strongly type language.This means that variables and expressions are type checked at compile time.But if required we can turn off this behavior.

Variable declaration in JavaScript

In JavaScript variables are not strongly typed.This means that following statements are valid:

var var1 = 'string value';
var1 = 64;

We can assign different types of values to the same variable in JavaScript.

Variable declaration in TypeScript

Declaring variables in TypeScript is similar to variable declaration in JavaScript.But there is one important difference.Unlike JavaScript ,TypeScript is a strongly typed language.

In TypeScript when we declare a variable we assign a type to it.For example we declare a string variable as:

stringValue: string = "some value";

The variable stringValue above is declared as string using type annotation.
Similarly we can declare number and boolean values as:

boolValue: boolean = false;
numericValue: number = 6;

If we required we can opt out of the strict type checking by using the  “any”  keyword.If we declare a variable as any type then it is not type checked at compile time.
This behavior is similar to the behavior of variables in JavaScript.

let tempVariable: any = 53;
tempVariable = "string value";

 

Follow on:

Decorators are a powerful feature in TypeScript. Decorators in TypeScript allows us to use declarative programming.In Declarative programming we don’t need to specify all the steps to achieve a task.We just specify what we want achieve without explicitly specifying all the steps.

Decorator is what it name means.It is used to decorate a class or a class member.Decorator attaches meta data to the program element it is attached with.So decorator adds information to the program element such as class.

Decorators in TypeScript are very similar to filters in MVC. Both are used for implementing cross cutting concerns.It is also useful to learn about TypeScript decorators if you are planning to learn Angular 2.Since Angular 2 applications uses TypeScript decorators , so learning about decorators will help learn Angular 2.

We can apply decorators to class, property ,method and parameter.So we can have different types of decorators such as a class decorator or method decorator.

Applying a decorator in TypeScript

To specify decorator for a class or method we write the @ character followed by the name decorator.So if we want to apply a decorator called verify to a class called Employee then we can write:

@verify
class Employee {
name: string;
department: string;

constructor(name:string, department: string) {
this.name = name;
this.department = department;
}
}

To apply multiple decorators to an entity such as class or method we specify all the decorators sequentially

@decorator1
@decorator2 @decorator3
class ClassName

To create a new decorator we need to define a function with the same name as the name of the decorator.This function can accept multiple parameters depending upon the
type of component being decorated.For example to decorate a class we need to specify a single parameter which specifies the constructor.

function verify(target: any)
{
// decorator logic
}

The above is a class decorator.The target argument refers to the class constructor.If we apply the above decorator to a class then the decorator logic will override the constructor logic.It is similar to the action filters in MVC.

Class decorators are useful when working in Angular 2.Angular 2 uses components which are created by using class decorators.

Since target argument refers to class constructor we can call the original constructor from within the decorator function.

Similarly we can create and apply decorators for methods and properties.

Decorators are not specific to TypeScript but rather are a part of ES2016 specification.

Follow on: