Downloaded from git.ir
[Music]
in order to build applications with
angular you need to be comfortable with
typescript so in this section i'm going
to introduce you to the fundamentals of
typescript and object-oriented
programming principles so by the end of
this section you will have a good
understanding of type annotations arrow
functions interfaces classes
constructors access modifiers properties
and modules if you are familiar with
this concept and know how to implement
them in typescript feel free to skip the
section and move on to angular otherwise
you really need to watch every lecture
in this section so now let's get started
so what is typescript typescript is not
an entirely new language it's a superset
of JavaScript so that means any valid
JavaScript code is also valid typescript
code but typescript has additional
features that do not exist
in the current version of JavaScript
supported by most browsers out there for
example in typescript we have this
concept of strong or static typing if
you have worked with languages like C
sharp and Java you know that in these
languages when we define a variable we
need to specify the type of that
variable now in time script typing is
optional so we don't have to use this
feature but using this feature makes our
applications more predictable and it
also makes it easier to debug them when
something goes wrong
typescript also brings quite a few
object-oriented features that we have
missed in JavaScript for a long time we
have the concept of classes interfaces
constructors access modifiers like
public and private filled properties
generics and so on you're going to learn
about this in this section
another benefit of using typescript is
that with typescript we can catch errors
at compile time instead of at runtime
well of course not all kinds of errors
but a lot of errors so there is a
compilation step involved and when we
compile our typescript code we can catch
these errors and fix them before
deploying our application and finally
another benefit of using typescript is
that we get access to some great tools
out there one thing that I personally
love about typescript is the
intelligence that we get in our code
editors again you're gonna see that in
this section so typescript is a
beautiful language and it's basically a
superset of JavaScript so any valid
JavaScript code is also valid typescript
code now the browser's out there they
don't understand typescript and it's
very unlikely that they're going to
support it in the future
so we need to compile or more accurately
transpile our typescript code into
JavaScript so this is part of building
our application whenever we build our
application typescript compiler kicks in
and it transpires our typescript code
into JavaScript code that browsers can
understand
now that's enough introduction next I'm
going to show you how to install
typescript and write your first
typescript program in this lecture I'm
going to show you how to install time
script and write your first typescript
program so here we're in the terminal
we're not gonna work with angular in
this section we're gonna purely focus on
typescript so first we need to install
typescript globally on our machine so
npm install dash G which stands for
global typescript and of course if
you're on Mac you need to put sudo at
the front all right beautiful
so I've installed the latest version of
typescript which is currently version
2.3.4 now we can type T SC which stands
for typescript compiler - - version
again you can see that I'm running type
scrape 2.3.4 alright now I'm going to
create a new folder for this section so
let's call this TS hello let's go to
this folder now here I'm gonna create a
new file and open it with vs code so
code main TS so now I'm gonna write some
plain JavaScript code and I want to show
you that all this JavaScript code is
also valid typescript code so first I'm
going to define a function let's call
this log that takes a message and here
we simply log that message on the
console like this then I'm gonna declare
a global variable let's call this
message and set it to this string hello
world and finally call our log function
message so this is just plain JavaScript
code right now save back in the terminal
we need to transpile this type script
file into JavaScript so TSC or table
script compiler main dot yes now if you
look at the files in this folder look we
have main degeus and main dot yes
now this transpilation or a compilation
step when you're building an angular app
happens under the hood so you don't have
to manually call the typescript compiler
in fact when you run your application
using ng serve angular CLI calls
typescript compiler under the hood to
transpile all our typescript code all
right now let's open our main the J's
file so code main the Jas so it's
exactly the same code that we wrote but
now it's in JavaScript file so all
JavaScript code is also valid typescript
code now back in the terminal I can
execute this code using node so node
main is and we got the hello world
message on the console so from the next
lecture we're going to look at specific
features of typescript that we don't
currently have in JavaScript all right
let's explore typescript by looking at
variable declarations so in typescript
there are two ways to declare a variable
we can use the VAR keyword which you
have seen in JavaScript like var number
we set it to one or we can use the let
keyword so let count to be two now
before I explain the difference I need
to clarify that the let keyword is also
being added to the javascript so
javascript has a few different versions
we have es5 or Okemo script five which
is the version of javascript supported
by pretty much all browsers out there
it's been around for a long time now we
have es6 which is a newer version and it
was introduced in year 2015 and from
that point the eggman script team which
is the team extending Java Script
decided to use the year number instead
of the version number so we have a
common script 2015 2016 and 2017 now in
eggman script 2015 which is basically
es6 we also have this led keyword but in
case you are not familiar with it let me
explain how it works so I'm gonna define
a function let's call it do something it
doesn't really matter
now here I'm gonna define F
block so VAR we said I to zero and as
long as I is less than five let's
increment it here we have a block and
then log it on the console now finally
at the end of this function I'm gonna
log this I one more time but with the
label finally and then I'm gonna call
this function here so in the terminal
I'm gonna compile this file main dat TS
and also at the same time run it with
node main J s note that the value of I
at the end is 5 so this is the issue we
have when declaring a variable using the
VAR keyword so we have declared I here
inside this for block but it's also
meaningful and available outside the for
block now if you have worked with
languages like C sharp or Java you know
that we don't have this concept in those
languages in JavaScript a variable
declared with the VAR keyword is scoped
to the nearest function so in this case
the nearest function is do something so
once we declare I inside this for block
it's available anywhere in this function
now let's see what happens when we
declare this variable using the let
keyword so let now look we immediately
got a red underline here which indicates
a compilation error and this is one of
the beauties of typescript when you're a
writing typescript code you can catch
these errors at compile time before you
run your application before you deploy
it
now let's hover our mouse here so this
is the error cannot find name I so now I
is scoped to the nearest block instead
of nearest function and this is the
proper way to declare variables which
prevents a lot of issues later down the
road now I want to clarify something
let me see you this file back in the
terminal first I'm gonna remove main Jas
now I'm gonna recompile
our main dot es okay we got our error
here cannot find name I however
if you look at the files in this folder
we do have mainland je s so even though
we have a compilation error the
typescript compiler still generated main
dejay s let's have a look at the content
of this file so this is the code that is
generated so by default typescript
compiler compiles our typescript code to
es 5 or a comma script 5 which is the
older version of JavaScript that is
supported by all browsers out there now
there we don't have the lead keyword so
that's why our compiled code now uses
the VAR keyword and this is perfectly
valid JavaScript code so I can go into
terminal and simply run this code and
get the same output as before so what I
want to clarify here is the typescript
compiler reports these errors but it
still generates valid JavaScript code so
here's a takeaway for this lecture from
now on anywhere we want to declare a
variable we use the let keyword once
again this does not stop the compilation
step but at least we can catch the
issues earlier during the compile time
next we're going to look at different
types we have and in typescript in this
lecture I'm gonna show you different
types we have in typescript so let me
start by declaring a variable called
count and set it to 5 now if I set this
to say a character or a string like a
note that I immediately get a
compilation error here telling me that
this a string or a character is not
assignable to type number now we can
perfectly do this in JavaScript because
in JavaScript we can change the type of
variables on the fly but in typescript
we get a compilation error now once
again I want to clarify that we can
perfectly compile this using typescript
compiler and we will get valid
JavaScript code so if I go to terminal
and type typescript compiler main the TS
now look this is our main de Jas so we
have this count variable and we have
changed its value we can perfectly
execute this no problem
however code like this is very likely
that it's going to break at some point
in the future because chances are we're
gonna use this count variable inside a
four-block so our program is gonna break
at run time we don't want this to happen
right that's one of the reasons it's
better to write the same code in
typescript so at least we can get a
warning during the compilation step now
if you hover your mouse over this count
variable look at the tooltip you can see
a colon and number after a discount so
this indicates the type of count
variable in our program so here
typescript compiler infer that the type
of this variable should be a number
because we set it to number of 5 now
what if I declare a variable without
initializing it let's look at its type
its type is now any and that's exactly
like the variables with declare in
JavaScript so I can set a to 1 then I
can change the value to true and then
set it to your string even typescript
doesn't complain about this so what's
the solution if you don't know the value
of a variable ahead of time that's when
we use type annotations so here we add :
and after that we set the type of this
variable like number and then look on
the third and fourth lines we got
compilation errors now in typescript we
have a few different types so we have
number which can include any integer or
floating-point numbers we have boolean
which can be true or false
we have strings we have any that you saw
earlier we have array so let's say we
want to declare an array of numbers we
would use a number with square brackets
now we can optionally initialize this to
an array like this or we can declare an
any array and with this we can set this
to an array with these values one true a
and false of course it's not a good
practice we want to avoid this but I'm
telling you what is possible with
typescript
now we also have another type that I
absolutely love and that's inna so let's
say we're working with a group of
related constants like colors so in
plain old or vanilla JavaScript we would
define constant colors like this so
color red we can set this to zero
constant color green we set this to one
and constant color blue set it to two
now this is a little bit verbose in a
lot of object-oriented languages we have
this concept called enum so we can put
all these related constants in a
container so in typescript we can
declare an enum like this enum
all lowercase we give you the name like
color now curly braces and here we set
the values so red green and blue then we
can declare a variable like background
color and set it to color dot now look
we have intellisense here
so this tooltip you see here allows us
to complete this code without
remembering all the details this is one
of the things I love about typescript
so let's set the background color to
color dot red now in terms of the values
the first element here automatically
gets the value of zero and each
subsequent element gets an incremented
value so we don't have to explicitly set
these but as a best practice it's better
to do so because chances are sometime in
the future someone might come here and
add a new color here like purple and
then purple would automatically become 2
and the value of blue would change to 3
so this may break parts of our
application so let me revert this by
explicitly setting the values if
somebody adds a new color here like
purple then it will not change the value
of blue now let me show you something
let's compile this code and see how we
get enum in JavaScript so at a script
compiler main dot TS
look at this piece of code here this is
how we can implement the concept of
enums in JavaScript we can see it's very
complicated now compare this with how we
declare it an enum here it's much
cleaner so the more you work with
typescript the more you're gonna love
this language
in this lecture I'm going to show you
the concept of type assertions in
typescript so I'm gonna start by
declaring a variable like message and
sitting into your string now here we can
type message dot I look we get this
beautiful intellisense and in this
tooltip we can see all the things we can
do with a string so all these items with
this purple icons are functions for
example we have this function called
ends with we can call this and see if
this message and let's say we'd see and
this returns a boolean so we can store
the result in another variable like ends
with C however sometimes typescript may
be a little bit confused about the type
of a variable for example I'm gonna
remove this initialization here and
initialize this variable on the second
line
ABC now look at the type of this message
variable it's any because by default
when we don't set a value the type is
any now the problem here is that if I
delete this and type period look we
don't get that intellisense anymore
because ends waste is something that we
can do with a string not with an object
of type any so what should we do in this
case we need to explicitly tell
typescript compiler that this message
variable is actually a string and this
is what we call type assertions now how
do we do type assertions there are two
ways one way is to prefix this variable
with angle brackets and here we put the
type like string now we need to enclose
both these parts in parenthesis like
this then if you press period we get our
beautiful intellisense with all the
functions or methods available on string
objects now there is also another way to
do type assertion so let's change the
name of this variable to alternative way
and here instead of angle brackets
use message as string they're exactly
the same the approach to shoes is purely
your personal preference but the first
approach is what you see more in a lot
of tutorials and code bases out there I
just want to clarify something here this
type assertion does not change the type
of this variable at runtime in fact it's
not going to restructure that object in
memory it's purely a way to tell
typescript compiler about the type of a
variable so we can access the
intellisense another concept you need to
know when using typescript to build
angular applications is the concept of
arrow functions so in JavaScript we can
declare a function like this let log we
set this to a function this function
takes a message object and simply logs
it on the console like this now in
typescript there is a shorter way to
define this function so let's call the
other one do log now we don't need the
function keyword anymore we can simply
add the parameters in this case message
then we add this arrow and that's why we
call this an arrow function and finally
the code block so consulate log message
now if our function has only one line we
can even exclude these curly braces so
we can make this code a little bit
shorter and cleaner like this if you
have worked with c-sharp you have seen
this before
and c-sharp we call this a lambda
expression in typescript we call it an
arrow function it's exactly the same
thing now if you have one parameter here
you can even exclude the parentheses but
I personally don't like this because I
think it makes the code a little bit
less readable so I always like to put my
parentheses here to indicate to the
reader of this code that these are the
parameters now what if you don't have
any parameters we just add empty
parentheses but of course here you don't
have the message so if you have not seen
this before get used to it it's a really
nice and clean way to do
functions
all right now let's see how we can use
custom types in typescript so I'm going
to start by declaring a function like
draw point so this function takes an x
and a y and simply draws it on the
screen now we don't want to worry about
the actual drawing algorithm we just
want to focus on the signature of this
function now this function is not too
bad here we have only two parameters but
sometimes when working with more complex
concepts we may end up with a function
that has so many parameters like this
this is really really bad and it's
something you should avoid at all times
in those situations it's very likely
that a group of these parameters maybe
all of them belong to a single concept
as an example think of a car the car has
so many different properties we don't
want to pass all those properties to a
function like drive car instead you want
to encapsulate them inside an object and
only pass that one object here so in
this example instead of passing x and y
here it's better to pass a point object
and then we can call this function like
this draw a point we give it an object
with two properties x and y so now our
function has a cleaner syntax however
there is a problem with this
implementation instead of a point object
I can pass a person object that has a
name property and nowhere here we are
getting a compile time error but we know
that this code is gonna break at runtime
because the algorithm in our draw point
function is expecting x and y properties
so what's the solution
well let me revert this back ok we've
got x and y so there are two solutions
to solve this problem one way is to use
what we call in-line annotation so just
like we can annotate this parameter with
a type like number we can annotate it
with a custom type or custom object so
here we add curly braces to indicate an
object this object is going to have a
property called X which is a number and
also
another property called wine which is
again a number so this is what we call
inline annotation it works fine for
simple cases but the problem with this
as you can see is that this is a little
bit verbose also
chances are somewhere else we might have
another function that expects a point
object we don't want to repeat this
object literal in multiple places so in
those cases a better approach is to use
an interface if you worked with
object-oriented programming languages
like C sharp and Java you know the
concept of interfaces we have the same
concept in typescript now if you have
never worked with interfaces let me show
you how they work so on the top I define
an interface and I'm gonna call this
point curly braces then I add X it's a
number and Y is a number so with this
interface I'm defining the shape of an
object and then I can simplify this
declaration and set the type of this
parameter to point this is much cleaner
and we can also reuse this in multiple
places just one thing note the naming
convention I have used here so because
I'm introducing a custom type I've used
Pascal naming convention so the first
letter of every word in the name of the
interface should be capitalized so here
we have our per case P not a lowercase P
okay so when using interfaces always use
Pascal naming convention so in the last
lecture we use an interface to define
the shape of a point object but there is
a problem with this implementation in
object-oriented programming languages we
have this concept called cohesion which
basically means things that are related
should be part of one unit they should
go together
this is what we call cohesion now back
to this example on the top we have used
an interface to define the shape of a
point object and below that we have a
standalone function and this is where we
have violated the
Haitian principle so the concept of
drawing a point is highly related to the
structure of a point it should not be a
separate function now if you're going to
build a utility library for working with
points chances are you're going to
create another function like get
distance that calculates the distance
between two points so point a of type
point and point B of type point and this
goes to is code block again we have
violated the cohesion principle we have
two functions hanging in the air
separate from the point object since
these concepts are highly related they
should be part of one unit in
object-oriented languages we call that
unit a class so a class groups
properties and functions that are highly
related now in this implementation
unfortunately we cannot move these two
functions inside our interface because
interfaces are purely for declarations
they cannot include an implementation in
other words we cannot have the algorithm
for calculating the distance between two
points or drawing a point inside this
interface what we can do instead is to
add a function here a function
declaration so we're gonna have a draw
function that takes no parameters and
returns void which means it doesn't
return anything now you might be asking
why don't we have this point parameter
here because if all these members X Y
and draw are part of one unit we don't
need to pass x and y as parameters to
the draw function this function can
directly access these properties x and y
in the same unit so we don't need this
parameter here now in interfaces as I
said we cannot have implementation we
can only have the signature of a
function so with this interface we are
telling typescript compiler that our
point objects should have two properties
x and y and a function called draw the
implementation of that is somewhere else
so what should be
to apply the cohesion principle here we
need to use a class instead of an
interface so on the top I'm going to
change the type to class and here I'm
going to replace is comma with semicolon
so our point class has three members the
first two members are what we call
fields that we use for storing data and
the third member is a function now here
in this class we can have the actual
implementation of this draw function so
we can simply define it like this draw
and then add all that logic for drawing
a point now similarly we can have
another function get distance that
returns the distance between this point
and another point like this again all
that logic will end up here now with
this restructuring you can see that
everything about a point is in one unit
in one class so we have the coordinate
which includes x and y and two functions
draw and get distance now in
object-oriented programming terms we
refer to these members as fields and to
these functions as methods so when a
function is part of a class we call it a
method alright now with this new
implementation we don't want these two
functions hanging in the air so delete
this is a much better structure also
you're not gonna call draw a point like
this anymore so here's our point class
in the next lecture I'm gonna show you
how to create an object of this type and
call the draw method
all right so here's our class now let's
declare a variable of this type so let
point be of type point and then we can
type point dot look we have this
beautiful intellisense we have two
methods draw and get distance and two
fields x and y now in time script we
also have a concept called property
which is different from a field but a
lot of people use these terms
interchangeably later in this section
you're gonna learn the difference
between fields and properties now if you
wanna call the draw method I simply call
it like this so this draw method is now
part of the concept of a point it's not
a function hanging in the air polluting
the global namespace now for this demo
I'm gonna add a simple console dot log
here and display the coordinate at this
point so X now here I want to add the X
field what we cannot use it like this we
need to prefix it with this dot so that
refers to this field in this class and
then I'm gonna add Y is once again this
dot Y now let us compile and run this
program and see what happens
so TSC what should we type here main the
TS and we can shortcut by adding this
pipe here type node and then main ajs
okay you got a runtime error cannot read
property draw of undefined so this is
the problem when we call this draw
method this point object was undefined
because here unlike the basic types we
have in typescript like numbers strings
billions we're dealing with a custom
type when defining an object of a custom
type we need to explicitly allocate
memory to it how do we do that well here
where we declare the point object or the
point variable we initialize it using
the new operator so this object is a new
point and here we add parentheses this
is the syntax now you can see that we
have repeated this point here twice so
we can make this code a little bit
cleaner by removing this type annotation
because typescript compiler can infer
from this assignment here that the type
of this object is a point object and
let's verify that so look you're working
with a point object now one more time
save so back in the terminal typescript
compiler main dot TS and then note main
that is okay we didn't get an error but
you can see that these x and y fills
don't have a value because by default
they are undefined so we can get back
here and set point that X to let's say 1
and point out y - 2 now back in the
terminal typescript compiler main dot TS
i actually made a mistake earlier so
instead of this pipe operator we need to
use double ampersand on Mac I don't know
the Windows equivalent so with this we
can combine multiple commands so note
main that is all right beautiful X is 1
and Y is 2 so this is how we use the
classes that we define in our programs
that one highlight something here this
point here is a class but this point
here is an object an object is an
instance of a class as a metaphor think
of the concept of a human human could be
a class but let me create instances of
this class like John Bob Mary these are
all objects so that's the difference
between a class and an object next we're
gonna look at constructors
all right so I've simplified the code
from the last lecture I simply remove
the method get distance because we're
not going to use it later in this
section so here on the top we define a
point class and then below that we
initialize a point object now this code
is a little bit verbose because we have
three lines to create a point object and
put it in a valid State what if this
point object had a few other properties
that we had to initialize like this and
maybe a few more here
is there a cleaner way absolutely so let
me delete this first all right in
object-oriented programming languages we
have this concept called constructor so
every class can have a constructor which
is basically a method that is called
when we create an instance of that class
so let me show you how it works in the
class I'm gonna add a method the name of
this method is constructor this is a
reserved keyword in typescript now this
method can have parameters so X which is
a number and Y which is also a number
and then here in this method we can
initialize these fields so what should
be right here this dot X we set it to
this X argument that we get here and
similarly this that Y we set it to Y now
look we got the compilation error here
because when creating a new point object
we need to supply these values look at
the error supplied parameters do not
match any signature of call target so
here we need to supply the values for X
on Y one and two and with this we can
simplify this code and get rid of these
two extra lines and here's the end
result now what if somewhere else in our
program we don't know the initial
coordinate of a point in other words
what if I want to create a point object
without setting these values is that
possible yes absolutely
but it's a little bit different from how
you have seen that in other languages
like C sharp and Java
in c-sharp we can have multiple
constructors in typescript we can't so
the solution for this is to make these
parameters optional so here after X I
add a question mark and that makes X
optional and similarly Y should be
optional as well because once you make
it parameter optional all the other
parameters on the right side of that
parameter should also be optional this
is a rule by typescript and a lot of
other programming languages so now look
we don't have a compilation error when
creating a point object without initial
values
all right so here I've created a point
object with an initial coordinate now
what do you thin our program you want to
have this rule such that when we
initialize a point object we should not
be able to change the X or Y values with
this implementation I can always come
here and set point that X to a different
value how can we avoid this sometimes we
need this feature in our programs
because it will make them more
predictable it reduces the chance for
bugs so how should we prevent the
coordinate of this point object to
change after it's initialized well in
object-oriented languages we have this
concept called
access modifiers an access modifier is
basically a keyword that we can apply to
a member of a class to control its
access from the outside so in typescript
we have three access modifiers public
private and protected public and private
are the most common and by default all
members are public let me show you what
I mean so here in our point class we
have three members right
we have two fields and one method so let
me create a pointer object and type
point dot look these are the members of
the class and because they are all
public we can access them here and
that's why we can see them in the
intellisense
however I can go here and prefix this
field with the private key word now once
we create this point object if I type
point dot look X is not in the list it's
not accessible it's private so if we try
to set point at X 2 3 look we have a
compilation error in typescript it says
property X is private and only
accessible within class point now with
this technique I can go here and I
applied the private keyword on the Y
field as well and now once I initialize
a point object I can no longer change is
quite innate I can only call the draw
method ok so this is why we use
it's modifiers to control access to
certain members of a class from the
outside you can apply these access
modifiers on field properties and
methods now by default if you don't set
an access modifier is assumed to be
public so here the draw method as you
know is public I can also add the public
key word here but this is redundant it's
just making my code noisy so you don't
really need to add this it's better to
keep your code short and clean and use
the private access modifier only when
you need to next I'm gonna show you one
of my favorite features of typescript
around access modifiers as you write
code with time script you see
constructors that follow a pattern like
what you see here so here we have two
parameters in our constructor and we use
these two parameters to initialize the
fields in this class the code looks a
little bit redundant this that x equals
x and this dot y equals y time script
has a fantastic feature that helps you
achieve the same thing with less code so
here we can delete these two fields here
and in our constructor we can prefix our
parameters with an access modifier so
here I want to have two private fields x
and y I can simply prefix these with the
private keyword like this so typescript
compiler will generate these fields for
us and also you don't need these ugly
repetitive assignments either so if he
prefix a constructor parameter with an
access modifier with a private or public
typescript compiler will generate a
field with the exact same name and it
would also initialize that field with
the value of this argument it's one of
my favorite features and you're gonna
see that a lot in this course now
clarify something before we finish this
lecture in this case our fills were
private but if they were public we would
use the public key word here so this
means when we create a point object we
can access the X field
so I'm gonna revert this back to the
private
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 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 okay
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 inertial
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 I 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 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 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 a
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
it's the same icon we have for fields
it's not a method anymore
so we can read X and we can also set it
like this point that eggs we set it to
ten 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 then 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
and I 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 typescript
we use camel notation to name our field
so that's why earlier we define this
private field here within 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 a 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 or case 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
all right I've simplified the definition
of the point class I remove the
properties so we have a simple
constructor and draw method and we're
using this point class below its
definition now this is a very simple
program with only one file but the real
world application consists of tens or
hundreds of files we don't want to write
all the code in one file like main the
TS so ideally I want to move the
definition of this point class somewhere
else in a file like point the TS so here
in this project I'm gonna add a new file
point a TS now back in Maine the TS I'm
gonna select all this code cut it and
move it to point a TS now in typescript
we have this concept called modules now
what a module is requires a little bit
more explanation but for now let me give
you a simple pragmatic definition in
typescript you can think of each file as
a module sorry in this program we can
say we have two modules but this is not
quite accurate because these files are
not modules yet so in pointer TS we have
defined this class called point but this
is not accessible anywhere outside this
file so this file defines its own scope
in order for us to use this class
somewhere else in our program we need to
export this to the outside so we add the
export keyword here and now this is
visible outside this file now that we're
exporting something on top of this file
from type scripts point of view this
file is a module now we need to go back
to our main de TS and import this class
so we can use it so back in main the TS
look we have a compilation error cannot
find name point because we have not
imported this into main the TS so on the
top we write import in curly braces we
add the name of the types we want to
import in this case point now if there
are multiple types you want to import we
separate them
using comma okay so we import point from
now here we put the name of the module
in quotes what is the name of the module
it's the relative pass to that module
from this file
so both these files are in the same
folder we can use period slash which
refers to the current folder and then
point is the name of our module so it's
not point that TS look we get a
compilation error 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
it now there is 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 them
you're gonna see that 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 path to this module files
because these files are not really part
of our application they're somewhere
inside note 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 slash core okay
so here's the lesson in typescript we
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 a file
that file is a module from type scripts
point of view in angular we also have
the concept the modules but angular
modules are a little bit different
they're not about organization of code
in different files they are about
organization of your application into
smaller functional areas you're going to
learn about angular modules in the next
section
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
you