7- Angular - Type Scripts (OOP)
7- Angular - Type Scripts (OOP)
Framework
Sayed Taha, PhD
Contents
• What is the Angular?
• Single-Page-Applications
• Angular Development Timeline
• IDE and tools.
• TypeScript-in-action
• Angular-in-action.
TypeScript as Object Oriented Programming
• In TypeScript you can :-
• Define classes
• Define Interfaces
• Apply OOP concepts: encapsulation, inheritance, and
polymorphism
• Define abstract methods, and abstract classes
Classes
• Classes are defined as below:
class <name>{
//constructors
//attributes
// member methods
}
• File name may not match the class name.
Classes
• Constructers are defined using constructor() method.
• Refer to the member attributes and methods using this.
• Create new instance/object using new
• Refer to the object members via (dot) operator.
Classes
Classes: Access Modifiers
• TypeScript access modifiers are:
• public: default and make property/method accessible anywhere.
• Protected : make property/method accessible within the class and its Childs
• Private: make property/method accessible only within the class.
Classes: Access Modifiers
Classes: Access Modifiers
Encapsulation : using accessors
• Accessors typically are performing the setter/getter methods job
for private attributes
Encapsulation : using accessors
• Accessors allow accessing the attributes directly without
the use of set/get methods.
• Private attribute may take any name;
• Setters have no return types even void
• Conventionally, attributes starts with ( _ ).
Encapsulation : using accessors
• Compilation errors
tsconfig.ts
• Compilation errors
Encapsulation : using accessors
Accessors are available on ES5 +
tsconfig.ts configurations file
Holds are compilation options for your project
Generate it via tsc - - init
Now you can set all options right here and compile wohle project files using tsc command
Parameter Properties
• Allows defining the member attributes by passing
them as parameters to the constructor
• Minimizes the code
Parameter Properties
• Complete example
Modularizing Our Code
• Till now we’re using our classes in the same file
• In real-time projects, files are used in different files
Uses
Product
ShoppingCart
Uses
Category
Modules
• This is going to achieved by:
• Export the source class
• Import it in the user file (use relative path + file name without extension)
Sub-classing
• Type script supports sub-classing / inheritance.
• Define the super class contains the common attributes and behavior
• Only single class inheritance are supported using extends keyword
• Calling super class members is possible using super keyword
• Implementing multiple interfaces is allowed
• Super constructor call MUST be the first line in the sub-class
constructor.
Sub-classing
Sub-classing
Sub-classing
Sub-classing
Sub-classing
• Array of super type can store any of its sub-types
Abstract Class
• Same in other OOP
• Abstract class is defined using abstract keyword.
• Contains at least one abstract method which defined also using
abstract keyword
• You cannot instantiate an abstract class
• Any class extends abstract class must implements its abstract methods
Abstract Class
Abstract Class
Abstract Class
Interfaces
• Interface is a contract that contains only abstract methods
• Class can implement an interface using implements keyword
• Class must implement all methods of the interface to be
concert otherwise it will be abstract
Interfaces
End of TypeSctipt In-Action