Properties
Properties
you can
also draw it but there is no way for us to read the quantity so I cannot access point that the X here to
display to the user what’s the workaround one simple solution is to define a method like this yet X and
here we simply return this dot X 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 I’m here you 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 value within a given range what do you mean by that let me show
I’m going to define another method here set X this message is gonna get value that’s the new value for
the X Scroll down up here first we can do some basic validation so if value is less than 0 wanna throw an
error throw new error value cannot be less than 0 otherwise you wanna set this for X to this new value
OK now with this implementation can always change the value of the X field like this point that X set it to
a new value if you have a use case like that in your applications you can use what we call 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 you start with the
keyword which is get or set and then the name of the property which is in this case X and after that
we’re going to have parenthesis just like a method similarly I’m going to change this to set with a space
so we have the set keyword and here it’s like we have a function meta now what is the difference the
difference is that we can use these properties like fields so here and read eggs like this God note that the
icon of X it’s the same icon we have or fields it’s not a method anymore so we can read X and we can
also set it like this point that X is tend to 10 you don't have to call a method like this it's a cleaner syntax
OK so this is what properties are for if you have private fields that you want to keep 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 property now in this case if I want to keep
only the read only access to this underlying field simply comment out set up we call this method as
setter and the other method together OK and now look at this compilation error we cannot change the
value of X let's bring this back one last thing before we finish this lecture so here I have used a capital X
or the name of my ex property in JavaScript and in TypeScript we use camel notation to name our fields
that’s why earlier with the finest private field here in camel case notation how many casing means 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 my name is the lower case X it clashes with the
existing field so let me revert this back a conventional we used 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 OK similarly for the Y parameter or the Y field I’m also going to use underline then we can
rename this property from capital X to lowercase x once again we press F2 and note that both instances
both together and the setter are updated no and work with this property exactly the same way use the X
field so here's the lesson property looks like a 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 setter or a combination of a
getter and a set right I’ve simplified definition of the point class I remove the properties so we have a
simple constructor draw method and you’re using this point class below each definition this is a very
simple program with only one file but the real world application consists of 10s or hundreds of files we
don’t want to write all the code in one file like main dot X so ideally I want to move the definition of this
point class somewhere else in a file like point dot TS the hearing this project I’m going to add a new file
point at yes I can mean that yes I’m gonna select all this code that’s it and move it to point TS now in
TypeScript we have this concept called modules now what the module is requires a little bit more
explanation but for now let me give you a simple pragmatic definition in TypeScript we can think of each
file as a module so in this program you can see we have two modules but this is not quite accurate
because these files are not modules yet so in point of TS you have to find this class called point but this is
not accessible anywhere outside this far that this file defines his own school in order for us to use this
class somewhere else in our program we need to export this the outside so we had the export keyword
here and now this is visible outside this file now that we’re exporting something on top of this file from
TypeScript ‘s point of view this file is a module now we need to go back to our main dotts and import this
class so we can use go back in may the TS look we have a compilation error and not find name point
because we have not imported this into main thoughts either you’re actually import in curly braces you
add the name of the types you want to import in this case point nice there are multiple types you want
to import separate them using, OK so we import point from and here we put the name of the module
cool what is the name of the module it's the relative path to that module from this file so both these files
are in the same folder you can use. Slash which refers to the current folder and then oint is the name of
our module so it’s not point that TS look you got a compilation there so the name of our module is point
now we no longer have a compilation error here and we can create an instance of this point class and
use now there’s a lot more to talk about when it comes to modularity in TypeScript but that's all you
need to know for now in order to start building applications with angular because in angular framework
we have a lot of types that are exported so we need to import these into our TypeScript files and use
you're gonna see a lot in this course the only difference is that angular modules are defined in a different
way so we don’t add the relative paths to this module files because these files are the operating part of
our application there’s somewhere inside node underline modules folder so when it comes to importing
types defined in angular we use the library name as the module name for example one of the libraries is
at angular 4 OK so here’s the list in TypeScript it divide our program Into multiple files in each file we
export one or more types these types can be classes functions simple variables or objects and wherever
we need to use these types we need to import them first when we have an import or export statement
on top of the file that’s fine is a module from TypeScript point of view in angular we also have the
concept of modules but angular modules are a little bit different they’re not about organizational code in
different files they are about organization of your application into smaller optional areas you’re going to
learn about angular modules in the next section.