Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
( 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.
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.
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.
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() { }
}
}
}
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.
- By using this accessor we can get the private field and set it without displaying to the real world.
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{
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
- Add the 3rd party libraries file in the <script> and using declare keyword.
TYPESCRIPT #11
Interview Questions
TYPESCRIPT #12
THANK YOU
LOREM IPSUM DOLOR EL TU
Support - +91 9000000000
Email us at - help@acadgild.com