In Typescript, by default, the visibility of all properties or methods in Typescript classes is “public“. A method with which is public can be accessed from anywhere, it has no restrictions. There are three types of member visibilities: public, private and protected.
Example 1: Class with public member visibility
Public functions and properties can be accessed from anywhere. By default, all methods and properties are ‘public‘. In this example, we create a class student which has two properties and a method. We use the public keyword to represent that the function has public visibility, but by default all properties and methods are public and we don’t need to specify that.
Javascript
class Student { name: string; id: number; constructor(name: string, id: number) { this.name = name; this.id = id; } public student_details() { console.log( "my name is : " + this.name + " my roll no is : " + `${this.id.toString()}` ); } } let obj = new Student("rahul", 367236); obj.student_details(); |
Output: An obj is created and student_details() method is called.
my name is : rahul my roll no is : 367236
Example 2: Class with protected member visibility
Members or properties which have “protected” visibility are accessible only in their class or their subclasses. In this example, the protected keyword is used while declaring the function and before the property ‘name’. Class classRepresentative is derived from class Student. when we try accessing “name” from outside, it returns an error as we can use it and access it only in that class or its subclasses. name is also used in student_name() function but the error is not raised as it’s within the class. As student_details() is protected, it cannot be accessed from outside.
Javascript
class Student { protected name: string; id: number; constructor(name: string, id: number) { this.name = name; this.id = id; } protected student_details() { console.log( "my name is : " + this.name + " my roll no is : " + `${this.id.toString()}` ); } student_name() { console.log("My name is : " + self.name); } } class classRepresentative extends Student { detail() { console.log("I am the class representative, my name is :" + this.name); } } let obj = new Student("rahul", 367236); let obj1 = new classRepresentative("samuel", 287636); obj.name; // Error as name is protected obj.student_name(); // No error obj.student_details(); // Error obj1.detail(); // No error obj1.student_details(); //Error |
Output:
error TS2445: Property 'name' is protected and only accessible within
class 'Student' and its subclasses.
obj.name; // error as name is protected
~~~~
two.ts:131:5 - error TS2445: Property 'student_details' is protected and only accessible
within class 'Student' and its subclasses.
obj.student_details(); //error
~~~~~~~~~~~~~~~
two.ts:133:6 - error TS2445: Property 'student_details' is protected and only accessible
within class 'Student' and its subclasses.
obj1.student_details(); //error
~~~~~~~~~~~~~~~
Example 3: Class with private member visibility
Private is similar to protected, but it also prevents subclasses from accessing the member. A derived class can’t improve its visibility because private members aren’t visible to derived classes. In the previous example derived class uses the property this.name in the detail() function and no error is raised as the property can be used in the subclasses, but when its visibility is set to private, it cannot be accessed in the subclasses or derived classes anymore.
Javascript
class Student { private name: string; id: number; constructor(name: string, id: number) { this.name = name; this.id = id; } private student_details() { console.log( "my name is : " + this.name + " my roll no is : " + `${this.id.toString()}` ); } student_name() { console.log("My name is : " + self.name); } } class classRepresentative extends Student { detail() { console.log("I am the class representative, my name is :" + this.name); } } let obj = new Student("rahul", 367236); let obj1 = new classRepresentative("samuel", 287636); obj.name; // Error as name is private obj.student_name(); // No error obj.student_details(); // Error obj1.detail(); // No error obj1.student_details(); // Error |
Output:
error TS2341: Property 'name' is private and only accessible within class 'Student'.
console.log("I am the class representative, my name is :" + this.name);
~~~~
two.ts:161:5 - error TS2341: Property 'name' is private and only accessible
within class 'Student'.
obj.name; // error as name is protected
~~~~
two.ts:163:5 - error TS2341: Property 'student_details' is private and only accessible
within class 'Student'.
obj.student_details(); //error
~~~~~~~~~~~~~~~
two.ts:165:6 - error TS2341: Property 'student_details' is private and only accessible
within class 'Student'.
obj1.student_details(); //error
~~~~~~~~~~~~~~~
Reference: https://www.typescriptlang.org/docs/handbook/classes.html#public-private-and-protected-modifiers
