Constructors and Access modifiers in TypeScript/Angular
What is Angular (Part 6.4) / What is TypeScript?
How it works… | How to start…
Fundamentals of TypeScript👇
- Type annotations
- Arrow functions
- Access modifiers
Look down the code below...👇
- Define a class (
Point) — at line no. 2
- Class properties — at line no. 3 and 4
- Class methods — at line no. 7 and 13
- Created an object (
point) of Class (
Point) — at line no. 18
- Set values of properties (
b) to object (
point) — at line no. 19 and 20
- Call method of class to draw a line (
drawNewLine) — at line no. 25
⭐️ Now, what if we have so many properties in class to set for an object?? — look at line no. 19–24
We have better solution then setting values of each property. By using concept of Object-oriented-programming called Constructors.
So every class we have a constructor which is basically a method and that is called automatically when we create an instance of that class. So in above case constructor method will call at line no. 18 | that is at the execution of this code 👉
let point = new Point();
constructoris a reserved keyword in TypeScript.
constructoris actually a class method which can have parameters — look below code at line no. 7 — we have parameter
bof type number.
thiskeyword allow access to members of current object — look below code at line no. 8 and 9 — here we set the values of class properties.
- When we create an instance of class we need to pass these values of params
b— look below code at line no. 21 — we passed values (1, 2) these values go into the constructor method.
- Note: In TypeScript we can have only one
constructormethod into the class — but we can have optional parameters in constructor — look at line no. 7 — we can make
boptional by using
? question markafter the parameter name and this makes these parameter optional.
- Rule: when a parameter is made optional all other parameter at right side of the parameter should also be optional — its a rule. Look if
b?is optional then
d?has to be optional.
constructor(a: number, b?:number, c?:number, d?:number)
Now we can create an instance of class by skipping optional values — look below👇 at line no. 21 — passing value of param
a and skipping value of
⭐ Now, how to prevent values to be change after initializing from constructor.
// create a point object - by passing values of 'a' and 'b' for initializationlet point = new Point(1, 2); 👈 this will set values of 'a' and 'b' by calling constructorpoint.a = 3; 👈 this will change value of 'a' AND WE WANT TO PREVENT THIS.
We can prevent changing values of
b after initialization by using Access modifiers.
6.4 Access modifiers
An access modifier is a keyword that we can apply to a member of a class to control its access from the outside.
- In TypeScript we have three keywords for access modifiers:
- By default all members (properties/fields and methods/functions) of classes are Public — accessible from outside of the class.
- Access modifiers are used to control the access of class members (properties/fields and methods/functions) from outside of the class.
- We can apply access modifier keywords to class properties/fields and methods/functions.
⭐ Using (Public and Private) Access Modifier:
Look at the code below👇 — an example of using Access modifiers … (also read comments properly to understand more clearly)
Above code at line no. 21 and 23 is invalid — because private members are not allowed to access from outside of the class.
Typescript code prevents the direct access of private fields but we have a indirect way to access… using Properties!
Properties allow access to private members outside of the class using get keyword and set keyword. To understand how, click over this link👉 Properties and Modules in TypeScript/Angular
⭐ Using (Protected) Access Modifier and Class extends another Class:
- Declare two parameter:
b(protected) — look below👇 at line no. 2 and 3
- Note: In class
Point— the property
bis of type 'protected' — which means it can be accessible within the class
Pointor the class that extend it.
- Create another class
Draw- and class
Point— look below👇 at line no. 14
Constructorof this new class
Drawhas to call parent
superkeyword — look below👇 at line no. 19
- We also have access to protected member (property
b) of parent class
Point— look below👇 at line no. 20
- At the end we create an object/instance of class
Drawwhich is responsible to call constructor of class
Drawand from within the constructor of
Drawthis will call parent class
(Point) constructor using super() — look below👇 at line no. 27 then line no. 19
Please carefully read all the comments in the image below...👇👇
⭐ Next, how to Less code in TypeScript:
We use parameters (
b?:number ) in
constructor to initialize fields in the class — look below👇 at line no. 5 - 7
⭐️ We can initialize class fields with less code in TypeScript — after modifying above code.
- Delete class field declaration from
class Point- delete line no. 2 and 3 from above code👆
- Also delete field value assignments — delete line no. 6 and 7 from above code👆
- Then in constructor prefix parameter with Access Modifier that is prefix parameter with
privatekeyword - look line no. 2 in code below👇
Things to remember before 👋👋
Class extends another Class (covered in this👇 article)
Class implements an Interface (covered in this👇 article)
Interface extends another Interface (covered in this👇 article)
So this is it’s about Constructors and Access modifiers — see you in the next part 👋👋 to cover another concept Properties and Modules.
If you wouldn’t mind giving it some claps 👏 👏 since it helped, I’d greatly appreciate it :) Help others find the article, so it can help them!
Always be clapping…