Interfaces in Angular 2 Video Lecture | Angular 2 tutorial - Front-End Programming

this is part three of angular 2 tutorial
in this video we'll discuss water
interfaces and when to use them in
angular so what is an interface in
typescript if you have experience with
any object-oriented programming language
like C sharp Java or C++ then you know
an interface is an abstract type it only
contains declarations of properties
methods and events the implementation
for the interface members is provided by
a class that implements the interface if
a class that implements the interface
fails to provide implementation for all
the interface members the respective
language compiler raises an error
alerting the developer that something
has been missed in general an interface
defines a contract that is the shape or
structure of an API that an implementing
class must adhere to even in typescript
we use the interface for the same
purpose we know typescript is a strongly
typed language this means every class
property and method parameters we define
in a typescript class has it type
associated with it as you know by now
typescript has several built-in
predefined data types like string number
boolean etc however the business objects
that we usually create in real-world
applications like employee customer
order invoice etc does not have a
predefined type in this case we can use
an interface to create a custom type for
our business object let's understand
this with an example this is the same
project that we have been working with
so far in this video series look at this
employee's property within our Employee
List component class at the moment we
have defined it as an array of any type
that's because at the moment we do not
have a type for our employee object so
this array right here is not strongly
typed though typescript is a strongly
typed programming language because we
don't have a type associated with our
employee object we have defined it as an
array of any type and because of this
line of code will lose the strongly
type the feature of typescript
programming language there are two
problems with this line of code first we
don't get any intelligence look at this
right here
we are within our employee object and as
I start to type the property of the
employee object notice I don't get any
intelligence because we don't get any
intelligence it's very easy to make
typographical errors at a moment I have
misspelled name property and Visual
Studio is not able to contain that we
have made a mistake and we will not come
to know about these type of
typographical errors at compile time
we'll only come to know about them at
runtime and the same is true even right
here so here we are filtering the list
of employees and we know in this case e
is an employee object notice when I type
e dot because the employee object is not
strongly typed
we don't get any intelligence because we
don't get intelligence it's very easy to
make typographical errors again here we
have misspelled gender and again which
usually is not able to complain us about
that error so let's see what happens
let's save our changes and free load of
web page notice the male gender count
right here it's zero and look at the
name of the first employee it is
undefined and it's because of the type
of graphical errors we just made it
would have been much better if we knew
about these errors at compile time
rather than at run time so let's see how
to achieve this by defining a type for
our employee object to define a time for
an employee object we are going to make
use of typescript interfaces we'll have
the interface in its own file so first
to our employees folder let's add a new
type script file I'm going to call this
employee dot TS and within this file we
will have our interface for the employee
object first let's use the export
keyword so this interface can be
exported and other components can import
and use it if required and then we use
the interface keyword to create an
interface
and then the name of the interface it's
a very common convention to perfect the
name of the interface that kept the
letter I and then the name of your
interface in our case we are defining an
interface for our employee object so I'm
going to call it AI employee one thing
to keep in mind is that not all
developers follow this convention of
prefixing the interface name that kept
the letter AI in angle AIDS have there
are few interfaces which doesn't follow
this convention for example there is an
interface called on in ed so let's type
the name of the interface this is
present in angular core so on the net
and when we right-click on this and go
to the definition as you can see it's an
interface but its name is not perfect
with capital letter I I personally
prefer to use the I naming convention
now let's complete of our interface so
if you look at our employee object it
has all these properties code name
gender annual salary date of birth so
but in our interface let's include the
property names and their types code this
is going to be of type string similarly
let's include the other properties as
well name gender annual salary and date
of birth with this interface in place we
can now import it from our employee list
component and use it as a type for our
employees property so first let's import
I employee interface from employee and
instead of using any as the type for our
array let's use I employee as the time
and look at this as soon as this change
is done look at these two typographical
errors that we made the property names
have immediately flagged as errors and
we even get intelligence purgatives as I
start to type it shows name property
button
intelligence and here also we get
intelligence EE dot and we see all the
properties of the employee object and we
want to use gender property so let's
save our changes and free loader webpage
notice now everything works as expected
now let's discuss a few concepts related
to typescript interfaces at a moment we
only have an interface let's now create
a class which is going to implement this
interface now to create a class I'm
again going to use the export keyword so
other components can import and use this
class is required and then the class
keyword and then the name of our class
let's call our class employee and to
make this class implement this interface
we use the implements keyword and in the
name of the interface that we want to
implement we want to implement I
employee interface notice we already
have it red squiggly indicating that we
have an error and look at what the error
message says class employee incorrectly
implements interface I employee
so let's include declarations for all of
our mandatory interface properties
within our class and the moment we do
that the error goes away now let's
create a constructor to initialize these
public fields that we have that cannot
last to create a constructor we use the
constructor keyword and then let's
include parameters for the constructor
using these parameters of the
constructor we are initializing the
public fields of our class and to do
something so common look at the amount
of code that we have to write with
another class to reduce this code
typescript provides us a shorthand
syntax with the shorthand syntax we
don't need all these public properties
here so we can get rid of them and
similarly within the constructor we
don't need these lines of code and for
each property we use the public key word
because we want these properties to be
public so let's do that for all the
properties
let's bring annual salary and date of
birth to the next line and use public on
those two properties as well and notice
the error goes away this shorthand
syntax is not limited to just public
properties of the class it can also use
it with private and put
to class properties played yeah we have
another class with two private
properties first name and last name and
here they're using the constructor
parameters to initialize these two
private properties first name and last
name to reduce the amount of code we can
use it's shorthand syntax so we don't
need these two lines right here and that
in the constructor we don't need these
two lines either and only constructor
parameters since we want these
properties to be private for at last we
use private access modifier like that
and we can also use this shorthand
syntax that protected members if
required now this class is included just
to demonstrate this we don't need this
anymore so let's delete that an
interface can also contain methods at
the moment our interface has only
properties let's include a method within
our interface so we're calling the
method compute monthly cell D which
takes in and its salary as a parameter
and returns monthly salary which is also
a number and look at this we already
have a red squiggly here underneath the
employee class that's because we have an
interface method but the class has not
provided the implementation for that
method yet so let's go ahead and provide
implementation for that method so all we
want this method to do is written
monthly salary so let's divide annual
salary by 12 and return whatever we get
so now notice the red squiggly goes away
an interface in typescript can also have
optional properties let's look at an
example now let's include a new property
department now this department property
here is not optional it's mandatory and
look at the error right away so employee
class incorrectly implements interface I
employee property department is missing
in type employee but let's make this
property within our interface optional
by including a question mark and the
moment we do that the error goes away
notice we don't have that red squiggly
that means for an optional property we
don't have to
provide the implementation within the
implementing class for our example to
work we do need this optional
departments property we don't need this
compute monthly salary method and we
don't need this class either so let's
delete all of them say oh it changes
I've included all those to explain some
of the concepts related to interfaces in
typescript
in typescript use the interface keyword
to create an interface it is common to
prefix the interface name with capital
letter I however some interfaces in
angular does not have the prefix I for
example on in it interface interface
members are public by default and does
not require an explicit access modifier
it is compiled time error to include an
explicit access modifier so if you look
at the interface members right here
notice we haven't specified any access
modifier if we specify an explicit
access modifier like this we get a
compile time error notice we have a red
squiggly public modifier cannot appear
on a type member so we don't require an
explicit access modifier on an interface
member they are public by default a
class that implements an interface must
provide implementation for all the
interface members unless the members are
marked as optional using the question
mark operator use the implements keyword
to make a class implement an interface
typescript interfaces exist for
developer convenience and are not used
by angular at runtime during translation
that is during the process of converting
the typescript code to JavaScript where
TD browsers can understand no JavaScript
code is generated for an interface it is
only used by typescript for type
checking during development to reduce
the amount of code you have to write
consider using shorthand syntax to
initialize class properties with
constructor parameters thank you for
listening and have a great day