Using Classes in TypeScript | TypeScript Tutorial

in this lesson we will learn about classes in  typescript in detail let's understand classes   with examples so here in my demo in the app  directory i have created another file picture.ts   and added some code to it   we will learn about classes from this file i'll  close this sidebar because we don't need it now   so here i have defined a class named picture  the syntax to define a class is to use the class   keyword followed by the class name and this  entire piece of code is the body of the class   i have defined three field properties for the  class our title owner and price here i have used   price with the underscore you will know why the  definition of the field property uses the same   syntax as we had seen in the interface however we  can use the accessor methods the getter and setter   methods to access and modify this property in the  typescript class thus they provide implementations   which the interface don't the class members can  also have the ss modifiers we can use this to   control the accessibility of the class members  by default all the class members are public   however you can explicitly use the public keyword  as well like i have done here for the art title so here are the ss specifiers public  protected and private the protected   members can only be assessed inside the class  or any class that inherit from this class   whereas the private members cannot  be assessed outside the class   so this was about the ss specifier next i  have been telling about the accessor methods   this is the getter and setter method which i  am using to update the private members price   price is my private member here this are basically  like any general functions except the get and set   keyword that are used with a function here  in the getter function there is this get   keyword in the function definition the name of the  function is the name of the property price for me   the getter function should not take any parameter  and return the value of the property the property   underscore price here similarly the setter method  is defined with the set keyword with the name of   the property as the function name it takes  one parameter this parameter is the value to   be assigned to the property here i am taking the  parameter new price and storing it in the backing   variable this underscore price here is my backing  variable which i am using for the private property   now for a read only property we can just implement  the getter and not the setter for example here   if i make this price property read only here  you can see i get the error in my setter method   so with the read only modifier the field cannot  be assigned a new value in the setter method   for now i'll remove it now another thing  to note here is the use of this keyword   to refer to a class member in a class we  need to use this keyword followed by a dot   and the member name now class methods are  defined in the same way as general functions   one difference here is we don't use the function  keyword in class method definition so like any   other function this is the order picture it takes  one parameter returns void and i have just added a   log statement here for the demo purpose so now we  are familiar with the class members in typescript   let me briefly show you something about the  private fields in the typescript classes let's see   here if i create a new instance of a picture class  say new picture now here this private specifier   restricts the assets of the members at the design  time we cannot access it from outside the class   so if i try to assess this price  property from outside the class   i won't be able to i don't get the property in the  list of options here even if i do it explicitly   i get an error but now if i try to assess it using  the bracket notation in the typescript itself   i will be able to do it you see i get  the option for the private property   and now i can assign a value to it so  this is called soft private in typescript   a private property can be accessible  using the bracket notation in typescript   this can be a drawback but this is helpful at  times like unit testing also after compilation   in the output js code it will be a plain class  property without ss specifier hence it can   be accessed by any other piece of code now to  create a private field which won't allow any of   such access in typescript or in javascript compile  code we can define the variable to be hard private   to define a hard private property i just  need to add a pound sign in front of the   property declaration let's say new  price which will be of number type and now when I try to assess the variable using  any of these three ways i'm not allowed to do it   using the simple conventional method or using  the pound sign or using the bracket notation   so this is a hard private declaration of  typescript and this keeps the property   truly private now what type of private we need  to define the variable to depend on the use of   the code and the javascript runtime support  so this was basically an overview of class   we can simply define a class using  the class keyword followed by the name   the body of the class is enclosed within the curly  braces we can define the class property with the   ss specifier there are two types of private  in typescript soft private and hard private we can also have the accessor methods in the  class the getter and setter methods and then we   define the methods of the class members like any  other function but without the function keyword   we can also create new instances of the class   let us now see how can we extend  classes and implement the interface

Channel: Smartherd

Views: 565

Keywords: smartherd, what is interface, what is class, structural type system in typescript, constructor functions, readonly properties, typescript demo web app, math problem project, creating custom types in typescript, extending class, implementing interface, static members, typescript demo, typescript tutorial for beginners, angular with typescript, annapurna agrawal

Id: rkR-7a_ramc

Length: 7min 7sec (427 seconds)

Published: Mon Jun 06 2022