TypeScript Properties

Key Takeaways

all right now this implementation has a tiny problem we can set the initial coordinate of this point and we can also draw it but there is no way for us to read the coordinate so I cannot access point that the X here so display to the user what's the workaround well one simple solution is to define a method like this yet X and here we simply return this that eggs because in this class we do have access to all the private members of this class but we cannot access them from the outside ok now here I can always call point that get X to get the x value and display to the user now let's talk about another use case maybe we want to give the user the ability to set the initial coordinate here but we also want them to be able to change this coordinate later only if they provide a value within a given range what do you mean by that let me show you I'm gonna define another method here set X now this method is gonna get a value that's the new value for the eggs field let me scroll down now here first we can do some basic validation so if value is less than zero you want to throw an error throw new error value cannot be less than zero otherwise we want to set this well x2 this new value okay now with this implementation we can always change the value of the X field like this point that set X we set it to a new value now if you have a use case like that in your applications you can use what we call a property so in typescript and in a lot of object-oriented programming languages we have a concept called property which is exactly for this very use case so look at how I can define a property here we start with a keyword which is get or set and then the name of the property which is in this case X and after that we're gonna have parentheses just like a method okay now similarly I'm gonna change this to set with a space so we have the set keyword and here it's like we have a function and method now what is the difference the difference is that we can use these properties like fields so here I can read X like this dot note the icon of X is the same icon we have for fields it's not a metal anymore so we can read X and we can also set it like this point that eggs are set it to 10 we don't have to call a method like this it's a cleaner syntax okay so this is what properties are for if you have private fields that you want to give maybe a read-only access to the outside or if you want to give the consumer of your classes the ability to set the values but you want to have some basic validation that's when you use a property now in this case if I want to give only the read-only access to this underlying field I can simply comment out the setter so we call this method a setter and the other method a getter okay I now look at this compilation error we cannot change the value of x now let's bring this back one last thing before we finish this lecture so here I have used a capital X for the name of my X property in JavaScript and in types crib we use camel notation to name our fields so that's why earlier we define this private field here using camel casing notation camel casing means the first letter of the first word is lowercase and the first letter of every word after is uppercase now what should we do to use camel casing notation for our properties if I name this the lowercase eggs it clashes with the existing field so let me revert this back a convention we use to solve this problem is to prefix the name of the underlying field with an underline so let's rename this using f2 and prefix it with an underline okay similarly for the Y parameter or the Y field I'm also going to use underline Y then we can rename this property from capital X to lowercase X once again we press f2 lowercase X and note that both instances was the getter and the setter are updated now we can work with this X property exactly the same way we use the X field so here's the lesson a property looks like your field from the outside but internally it's really a method in the class well more accurately it's either one method which is a getter or a setter or a combination of a getter and a setter hi thank you for watching my angular tutorial if you enjoyed this video please like it and share it with others also you can subscribe to my channel for free new videos every week this video is part of my complete angular course with almost 30 hours of high quality content where you learn everything about angular from the basic to the advanced topics all in one course so you don't have to jump from one tutorial to another in case you're interested you can get this course with a big discount using the link in the video description and if not that's perfectly fine continue watching as the next section is coming up