Class constructors & ‘readOnly’ property | TypeScript Tutorial

in this lesson let us check out constructors and   how they are different from  normal class member functions the constructors are functions in the class  but however they are different from other   class methods the constructors are executed when  an instance of a class is created hence we can   use it as a place to perform any setup or special  initialization for the new instance of the class   let us implement constructors in our  demo here in the picture class now   since i haven't used constructor here it is  clear that constructors are not essential   and are optional let us add a  constructor and see how it works the name of the constructor function will always  be constructor followed by parentheses this   parenthesis will contain parameters and then  the body of the constructor here currently i   haven't passed any parameter to my constructor  function i'll simply add a log statement here so this my friends is a very  simple example of constructor   to look at a little more complex implementation  of constructor let us look at a more complex   class coming to our photograph class let me  add a constructor here for the photograph class here it takes one parameter which is of  string type and the name is new camera now   in the constructor body this is calling the super  class constructor from the child class constructor   the super class for my photograph class is the  picture class which is also called the base class   now since this base class picture has a  constructor i also need to call the base class   constructor from the child class the string value  which has come in the constructor i have assigned   it to the class member camera so initializing the  class member is one of the main purpose to use   constructor when i move a little further down you  can see i have got an error where i have created   the instance of the photograph class the error  says that the constructor for the photograph   expects one argument now since my constructor  has one parameter here i'll have to pass the   value for this so let's say i just add a default  string here say sony now you can see the error is   immediately gone so this was about constructor if  i want to change the value of the camera property   i can simply do it by calling it from this  object and assigning a new value to it   say canon g7x so even after a property is  initialized in the constructor i can re-initialize   it however i want to speak about another property  which i had shown in brief in the previous lesson   the read-only modifier now let's say i  made this camera property as read only   the read-only variables can be  initialized when they are declared   here itself or inside the constructor like we have  done here you can see i have got an error here it   says cannot reassign to camera because it is a  read-only property so this is another specifier   which you can use with the property depending  on its use so this was all about constructors   in classes so far in this chapter we have seen  interfaces interfaces implementing interfaces   we have seen classes we saw classes  extending classes and implementing interfaces   we learnt about the s specifies in class  members the variables and the functions   we saw static class members and we also saw  special class functions the constructor and its   users now let us use all of this concept and take  our demo app a step further towards completion i'll remove this picture.ts file  we don't need this for our demo   we already have this person interface and  here the result interface now i'll create   a new file player.ts and create a player class  there i'll add the code for the player class   i'll use this class to represent a player in the  game this class implements the person interface   so here the class member's name and format  name comes from this person interface and   the player class has high score property  of its own now coming to the main file   i'll refactor some code here i will move this  getinputval function to a new helper class   to do it i'll create a new helper.ts  file here i'll create the helper class   and then from the main.ts file i'll cut  this function and paste in my helper class so now here the get input val is the class member  so i'll have to remove this function keyword from   here and just set the alignment i want to be able  to use this function from anywhere in the app   without creating the instance of this helper class  so this function will written me the value of the   html input element so i'll remove this else block  and have it return just the input elements value   so with this change in the get input val function  when i go to the main dot ts file i have got an   error here i'll update this to call the  static function using the helper class name   i'll also remove this undefined  union type from player name variable   with this i got another error here it  says type string union undefined is not   assignable to type string so when i go to this  get input val function i'll also have to change   this return type of the function here to just  return the string value and now we are fine   in the main.ts file we have got multiple source  files in our project and all are interdependent we   need to make changes in our code and configuration  accordingly we have changed the configuration   in the webpack because we want to compile all the  files by ourselves and our entry point is main.js   in the js folder so now let us open  the terminal and compile the files so here in my terminal where my server is running  i have got an error it says cannot find name   helper the issue here is that this helper class is  defined in its own typescript file and compiled to   its own javascript file but the helper javascript  file is not referenced anywhere in my html   when dealing with multiple files i have the  option to mention each of the javascript   file in the script tag here but this is  not the correct way to do it in small   project like ours or in the large ones  let's see how we can deal with this

Channel: Smartherd

Views: 673

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: 9GW-s2U7uUs

Length: 7min 51sec (471 seconds)

Published: Thu Jun 09 2022