FRONTEND DEVELOPMENT

( WITH ANGULAR )
TYPESCRIPT

LEARN. DO.
 Topics
Topics covered in this module:

1. Functions.
2. Generics.
3. Constructor.
4. this keyword.
5. Getter and Setter.
6. Static Properties.
7. Using JavaScript library with Typescript.

TYPESCRIPT #1
Functions
What are functions ?
- Functions are the basic building block of an application
- Functions are the way we build up layers of abstraction, mimicking classes, information hiding and modules.
- With the help of function we can follow Don’t Repeat Yourself ( DRY ) principle.
- There are 4 different ways of creating a functions.
- Named Functions.
- Anonymous Functions
- Fat Arrow or Lambda Functions
- Class Functions

TYPESCRIPT #2
Functions
- Named Functions
- It is similar to writing a function in JavaScript, the only difference being the parameters should have assigned data types.
- By assigning a type to the parameters it will only accept arguments of the defined data types.
- For example, if a parameter is of data type string, only a string can be provided as an argument to the function.
- The benefit to using a named function is that if you have a stack trace, which means if you have an error and you want to
figure out, where did this go wrong, sometimes a line number as to where it happened isn’t very helpful, so you need to
know actually the name of the function that it got called in.
- The function does not retain the scope of the caller inside the function, you need to create self = this closures or use bind.

function letPlaySport(sportName: string, place: string) {

console.log(`Come to play ${sportName} in ${place}`);
}

letPlaySport("Footbal","Childrens Park");

TYPESCRIPT #3
Functions
- Anonymous Functions
- In this function, we will not give a name to the function but we will assign function to the variable.
- We need to call the function by the variable name.
- Anonymous function will not give us very good stack traces.
- The function does not retain the scope of the caller inside the function, you need to create self = this closures or use bind.

let favMovie = function(movieName : string) {

console.log(`My fav movie name is ${movieName}`);
}

favMovie("Black");

TYPESCRIPT #4
Functions
- Fat Arrow or Lambda Function.
- In this function, we do not write the keyword “function” and after parenthesis “ ( ) “ we use “ => “ fat arrow.
- We can able to do inline function with “=>” .
- Fat arrow functions are anonymous function.
- The benefit of using => function is it allow you to retain the scope of the caller inside the function, you don’t need to
create self = this closures or use bind.

let favBike = (bikeName: string) => { console.log(`My fav bike is ${bikeName}`) }

favBike("Hayabusa");

TYPESCRIPT #5
Functions
- Class Function.
- The function which we write in class is known as class function. The way we write a function in a class is without writing
the keyword “function”.

class Cricket {

batting(battingOrder: number) {
console.log(`The player who is batting is ${this._playerName} and Batting Order is ${battingOrde
r}`);
}
}

TYPESCRIPT #6
Generic
- Generics allows code reuse along with type safety at compile time.
- Code reuse is mostly done by creating generic type-safe abstractions to classes and methods.
- Generics relies on type<T> where T can be the generic data type.
- By using Generics we can follow (Don’t Repeat Yourself) DRY principle for multiple types of data.
- To minimize the use of 'any' datatype we can use Generics.
- Code is in Session3\Typescript2 - Code\2.Generics

TYPESCRIPT #7
Constructor
- A constructor is a special function of a class.

- It’s an instance function that usually has the same name as the class.

- We can set the value of the members of an object, either to default or to user-defined values.

- Every class has one constructor. To call the constructor you must call by using new keyword.

class MoviesClass {
class MoviesClass {
private movieName: string;
movieName: string; // Parameterized constructor
constructor(movie : string) {
// Default constructor
this.movieName = movie
constructor() { }
}
}
}

let getMovies = new MoviesClass(); let getMovies = new MoviesClass("Faana");

getMovies.movieName = "Hero";
console.log(getMovies);

TYPESCRIPT #8
this Keyword
What is “ this ” keyword?
- this keyword is used when you want to access member variable or methods.
- 'this' is a reference to the function that is currently being executed. In simple terms, it is a reference to the
object which consists the executing function.- The location from which 'this' is called determines the object
reference for the keyword.

1. If it is called from a constructor, function or property, 'this' keyword provides a reference to the class
instance.

2. If it is called from a static function or static property, 'this' keyword provides a reference to the
constructor function of that class.

3. If it is called from a function, 'this' keyword provides reference of that function and has type Any.

TYPESCRIPT #2
Getter and Setter
- Getter and setter are known as accessors.

- As the name suggest the getter and setter are the accessors for getting the value and setting the value.

- The keyword use for getting the value is “get” and for setting the value is “set”.

- The setter takes a parameter of a type and the getter has no parameter it just returns a type.

- We can have validation logic in getter and setter.

- By using this accessor we can get the private field and set it without displaying to the real world.

- Code is in Session3\Typescript2 - Code\4.Accessors

TYPESCRIPT #9
Static Properties
- The function or member of the class which is declared using static keyword does not have to create an instance of a class.
- Static properties can be called directly by accessing it from class name without instantiating the class.
- The difference between instance member and static properties is that the instance member belong to each instance while
static members are shared across the application.

class BikeFeatues{

static getFeatures() : string {

return "The bike is having 320cc horsepower";
}
}
console.log(BikeFeatues.getFeatures);

TYPESCRIPT #10
Using JavaScript Library with Typescript
- There are 2 ways we can use JavaScript libraries in our Typescript project.
- Using typed definition file for the library. To get Typed Definition - https://github.com/DefinitelyTyped/DefinitelyTyped
- Install typings.
npm install --g typings@latest

- Install library from typings and add reference to .ts file.

typings install jquery --save

/// <reference path="jquery/jquery.d.ts" />

- Add the 3rd party libraries file in the <script> and using declare keyword.

declare let library : any;

TYPESCRIPT #11
Interview Questions

1. How Interface have zero runtime JavaScript impact?

2. What is the difference between an interface and class?
3. What does super( ) keyword is use for ?
4. What is type Assertions ?
5. What is the use of declare keyword ?

TYPESCRIPT #12
THANK YOU
LOREM IPSUM DOLOR EL TU
Support - +91 9000000000
Email us at - [email protected]

LEARN. DO. EARN