Constructors and Access modifiers in TypeScript/Angular

What is Angular (Part 6.4) / What is TypeScript?

Ankit Maheshwari
Nov 18 · 6 min read

How it works… | How to start…

If you haven’t covered Part — 6.3 of this series, I recommend you to check this link → Interfaces and Classes in TypeScript

Fundamentals of TypeScript👇

  1. Type annotations
  2. Arrow functions
  3. Interfaces
  4. Classes
  5. Constructors
  6. Access modifiers
  7. Properties
  8. Modules

6.4 Constructors

Look down the code below...👇
  • Define a class () — at line no. 2
  • Class properties — at line no. 3 and 4
  • Class methods — at line no. 7 and 13
  • Created an object () of Class () — at line no. 18
  • Set values of properties ( and ) to object () — at line no. 19 and 20
  • Call method of class to draw a line () — 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 👉

  • is a reserved keyword in TypeScript.
  • is actually a class method which can have parameters — look below code at line no. 7 we have parameter and of type number.
  • keyword 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 and — 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 method into the class — but we can have optional parameters in constructor — look at line no. 7 we can make and optional by using after 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 is optional then and 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 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 and 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:, and
  • 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: (public) and (protected) — look below👇 at line no. 2 and 3
  • Note: In class — the property is of type 'protected' — which means it can be accessible within the class or the class that extend it.
  • Create another class - and class extends — look below👇 at line no. 14
  • of this new class has to call parent using keyword — look below👇 at line no. 19
  • We also have access to protected member (property ) of parent class — look below👇 at line no. 20
  • At the end we create an object/instance of class which is responsible to call constructor of class and from within the constructor of this will call parent class ) 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 ( , ) in 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 - 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 keyword - look line no. 2 in code below👇

Things to remember before 👋👋

Class extends another Class (covered in this👇 article)
https://medium.com/@AnkitMaheshwariIn/constructors-and-access-modifiers-in-typescript-22a2d6188780#09ed

Class implements an Interface (covered in this👇 article)
https://medium.com/@AnkitMaheshwariIn/interfaces-and-classes-in-typescript-part-6-3-7fee77b7518b#ebd8

Interface extends another Interface (covered in this👇 article)
https://medium.com/@AnkitMaheshwariIn/interfaces-and-classes-in-typescript-part-6-3-7fee77b7518b#0b2d


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 haven’t covered Part — 6.3 of this series, I recommend you to check this link → Interfaces and Classes in TypeScript

Stay tuned for Part — 6.5
https://medium.com/@AnkitMaheshwariIn


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…

JavaScript in Plain English

Learn the web's most important programming language.

Ankit Maheshwari

Written by

I rather enjoy coding because it gives me an experience of complete absorption, almost like meditation — If Truth Be Told.

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade