Chapter 1
1. What is type script ?
1. What is type script ?
Its devloped by microsoft to opt the feature of OOPS into javascript code. extension for type script is .ts it refer to type script. It is Superset of javascript, or say as Strong typing in javascript
2.
Types : Their are different type of data type to over come the type safe problem of var in javascript.
Primitive :
number,
string ,
Boolean,
any
number,
string ,
Boolean,
any
Custom
interface
classes.
interface
classes.
3.
Compile to plain javascript.
4.
Allows use of existing Js library. Like Angularjs
5.
Getting started ts with vs2013
a)
Create a VS 2013 with typescript html project
b)
Got to the project nugget and searched for below
project and installed.
c)
You can see the list of file in script folders.
Now run your application it will give the result as:
6.
Type script function vs Javascript functions;
Look below for javascript functions;
/* Java script functions for mutiplication */
function multiply(x, y) {
console.log('Normal js method ');
console.log('x', x);
console.log('y', y);
return x * y;
}
// Anoynomus method
var anMethod = function (x, y) {
console.log('Anoynomus JS method ');
console.log('x', x);
console.log('y', y);
return x * y;
}
|
Calling of methods
|
console.log(multiply(2, 10));
console.log(anMethod(2, 10));
|
7.
Defining the same method by using and passing
the types into the script.
See in below type
function multiply
|
(x: number, y: number)
|
: number
|
Function name
|
Passing Parameters by passing type
|
Returning the value as number;
If you return string it will error.
|
/* Adding type to the funcation is javascript
(typescript )*/
function multiply(x: number, y: number): number {
//return "hi";///// it will give the error
return x * y;
}
// Anoynomus method
var anMethod = function (x: number, y: number): number {
return x * y;
}
|
Calling of methods
|
console.log(multiply(2, 10));
console.log(anMethod(2, 10));
|
8. Defining class in
typescript
- Class
: Type script defining the class and declaring the constructor as like
below;
class Person {
Firstname; string;
LastName: string;
Age: number;
constructor(firstname:
string,
lastName: string, age: number) {
this.Firstname =
firstname;
this.LastName =
lastName;
this.Age = age;
}
display()
{
console.log("First Name " + this.Firstname + ", Last
Name " + this.LastName + ",
Age ", + this.Age );
}
}
window.onload = () => {
var el =
document.getElementById('content');
var greeter = new Person("satya","prakash", 30);
greeter.display();
};
|
-
Inheritance
in Type script : Derived class is inheriting base class using the Extends keyword. And if you doing the
inheritance you need to call the constructor of base class using the super
keyword.
You can call the base class method also using the super
keyword, please see the example below.
class Shape {
Color: string;
constructor(color:
string)
{
this.Color = color;
}
display()
{
console.log("Color is : "
+ this.Color
);
}
}
class Rectangle extends Shape {
private Height: number;
private Width: number;
constructor(color:
string,height:
number,
width: number)
{
super(color);
this.Height = height;
this.Width = width;
}
display() {
super.display();
console.log("Size of rectangle
is" + this.Height * this.Width);
}
}
window.onload = () => {
var el =
document.getElementById('content');
var value = new Rectangle("Blue",20,30);
value.display();
};
|
-
Accessors
Method in typescript : Writing the
get and set method similar to the properties in C#. See the below example for
setter method.
class Person {
_firstname; string;
_lastName: string;
_age: number;
get Firstname(): string {
return this._firstname;
}
set Firstname(firstname: string) {
this._firstname =
firstname;
}
get LastName(): string {
return this._lastName;
}
set LastName(lastName: string) {
this._lastName =
lastName;
}
get Age(): number {
return this._age;
}
set Age(age: number) {
this._age = age;
}
constructor(firstname:
string,
lastName: string, age: number) {
this._firstname =
firstname;
this._lastName =
lastName;
this._age = age;
}
display() {
console.log("First Name ::" + this.Firstname + ", Last Name :: " + this.LastName + ",
Age ::", + this.Age);
}
}
window.onload = () => {
var el =
document.getElementById('content');
var greeter = new Person("satya", "prakash", 30);
greeter.display();
};
|
-
Static
Data : static data of the class is the piece of data
that will share all by the class which can be access throughout the other
class. You can access it by classname.variablename
class Employee {
Firstname; string;
LastName: string;
Age: number;
static company: string;
constructor(firstname:
string,
lastName: string, age: number) {
this.Firstname =
firstname;
this.LastName =
lastName;
this.Age = age;
Employee.company = "XYZ";
}
display() {
console.log("First Name ::
" + this.Firstname + ", Last Name :: " + this.LastName + ",
Age :: " + this.Age + ",
Company :: " + Employee.company
);
}
}
window.onload = () => {
var el =
document.getElementById('content');
var greeter = new Employee("satya", "prakash", 30);
greeter.display();
};
|
9. Defining Interface on Typescript :
It can be done by the keyword interface it
defining the variable inside of it.
As in below interface having the location as parameter, We can pass the more parameter instead of
one but should have the location as in parameter. If we don’t have Location than it will give
error.
|
interface Address {
location: string;
}
function ShowAddress(obj:
Address) {
console.log(obj.location);
}
window.onload = () => {
ShowAddress({
location: "Hyderbad", State: "TS" });
};
|
Optional
Parameter in Interface: Defining the optional parameters in interface, Even
if you are not passing the value you will not get any error. Variable? : datatype
interface Address {
State: string;
location: string;
country?: string;
}
function ShowAddress(obj:
Address) {
console.log("Location :: "
+ obj.location);
console.log("State :: " +
obj.State);
if (typeof(obj.country) != 'undefined') {
console.log("Country :: " + obj.country);
}
}
window.onload = () => {
ShowAddress({
location: "Hyderbad", State: "TS" });
ShowAddress({
location: "Hyderbad", State: "TS", country : "India" });
};
|
Function
in Interface : defining the function in interface, typescript
allow to define the function into
interfaces.
interface Address {
( State: string, location: string ): string;
}
var newAddress : Address;
newAddress = function (st: string, lo: string): string {
return "State : " + st
+ " Location : " + lo;
}
window.onload = () => {
var str = newAddress("TS", "Hyderbad");
console.log(str);
};
|
Classes
in Interface: Typescript allow to implement the interface into the classes,
Classes can implement the multiple
interfaces. It will implements using
the implements keyword. If implements the interface need to implement all the
variable into derived class.
interface Shape {
color: string;
}
class Rectangle implements Shape
{
private Height: number;
private Width: number;
color: string;
constructor(color:
string,
height: number,
width: number)
{
this.Height = height;
this.Width = width;
this.color = color;
}
display() {
console.log("Size
of rectangle is" + this.Height * this.Width + " Color" + this.color);
}
}
window.onload = () => {
var str = new Rectangle("blue", 10,
20);
str.display();
};
|
Chapter 2 : Setting Up AngularJS Apps Using TypeScript
Angularjs
dependencies with Typescript
1.
Please see the chapter 1 there are list of the
item that we need to install before installing the angularjs with type script.
After taking the nugget package if you are getting error as
100+ more error
Need to install the latest type script compiler for vs 2013
If working in vs2015;
Download the typescript complier from.
http://www.typescriptlang.org/#download-links
2.
Now you need to refer all the important flies
into index.html to work with it, you HTML page will be look like below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML
App</title>
<link rel="stylesheet"
href="app.css" type="text/css" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>Angular HTML App</h1>
</body>
</html>
|
You can see that we have app.ts but we are referring
to app.js into our html page.
3.
Now in app.ts you need to take the reference as
like below.
///
<reference path="scripts/typings/angularjs/angular.d.ts" />
After doing that your angular application
will be behave like the type script compatible and now you can create the
Angularjs application with the type script code.
4.
Now you can use the angular object
angular.module("app", ['ngroute'])
.config(function ($routeProvider)
{
console.log("in config()');
});
|
Now if you see that code we are defining
the same way of angularjs module as we
defined into javascript.
5.
Now creating the angularjs module using the type
script module.
Lets see how the index.html page will look.
If you see below we are defining the ng-app and ng-controller and two scope
variable as greeting1 and greeting2
Code Snippet :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML App</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="app">
<div ng-controller="MainController">
<h1>{{greeting1}}</h1>
<h2>{{greeting2}}</h2>
</div>
</body>
</html>
|
Ts file will be like below:
Defining the modules and associated with
the controller
/// <reference
path="scripts/typings/angularjs/angular.d.ts" />
class MainController {
static inject = ['$scope'];
constructor($scope)
{
$scope.greeting1 = "Hello
Angular with TS";
$scope.greeting2 = "Welcome to
first application";
}
}
var app =
angular.module("app", [])
app.controller("MainController", ["$scope", MainController]);
|
Output you will get as:
Creating angularjs Controller using type
script.
1.
Let’s create one more type
script file as main.ts, where we will
keep our controller code.
2.
In app.ts we will defined the angular
modules.
3.
Need to give the reference of
js file in index.html
Code snippet
App.ts : take the reference of angular.d.ts; Creating the module for app.project and
export it so we can use it out side.
|
/// <reference
path="scripts/typings/angularjs/angular.d.ts" />
module AppProject
{
angular.module('AppProject', ['ngRoute']);
export var getModule: () => ng.IModule = () => {
return angular.module('AppProject');
}
}
|
Main.ts :: need to take the reference of app.ts
|
/// <reference path="app.ts" />
module Main
{
var app = AppProject.getModule();
interface MainScope extends ng.IScope
{
greeting1: string;
greeting2: string;
}
class MainController {
static inject = ['$scope'];
constructor($scope: MainScope)
{
$scope.greeting1 = "Hello Angular with TS";
$scope.greeting2 = "Welcome to first application";
}
}
app.controller("MainController", ['$scope', MainController]);
}
|
Index.html, need to take the reference of main.js
and app.js
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML App</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="app.js"></script>
<script src="main.js"></script>
</head>
<body ng-app="AppProject">
<div ng-controller="MainController">
<h1>{{greeting1}}</h1>
<h2>{{greeting2}}</h2>
<input type="button" onclick="display()" value="submit" />
</div>
</body>
</html>
|
No comments:
Post a Comment