Defining Interface in TypeScript | TypeScript Tutorial

interfaces in typescript interfaces are  basically contracts that define a structure   and a syntax which an implementing class should  follow an interface can be implemented by a class   such classes will be the implementing classes  now this is the syntax to define an interface. to   define an interface the interface keyword is used  followed by the name of the interface the body of   the interface is surrounded by curly braces and in  the body, we define the properties the fields and   the methods so this was about the syntax of the  interface let us check out an interface in action so here i am in the vs code editor in our demo  app i am continuing with our demo app which we had   created in the previous chapter i have only added  a new file person.ts here in my app directory   i have simply created a  simple basic interface here   i have added two properties to  the interface a string type name   and a number type age we don't need the let or var  keyboard to define the properties in the interface   now any object that implements this interface  will have to inherit these two properties   now let's see a slightly more complex example  i have added another interface here developer   this developer interface has two properties domain  and experience i have used the extends keyword   to specify that this interface will extend  the person interface which means the developer   interface will inherit all the members of the  person interface as well as have its own property   it is not explicitly listed here but it is known  that we have the name and age property as well   in the developer interface i can also add a method  to this developer interface let's say develop   the method in the interface just have the  signature and no implementation also notice   that we don't need a function keyword  while defining a method in the interface   the develop method takes one parameter which is  of string type and then it returns void so here   we have just defined the shape of the object  which will implement the developer interface   the object will have four properties name  age domain and experience and one method   develop let us now see how we can use  the structural type system of typescript   this uses the structure of the object as type  let's see how now i'll paste a piece of code here   and this code has defined a player object this  player object has three properties name age and   score now looking at the person interface that we  have here it has two properties name and age and   this object literal also has these two properties  name and age and here the third property score   is not on the person interface but it implements  all the property that the person interface has   so even if it is not explicitly mentioned here  this player object implements the person interface   it can be used anywhere where  a person interface is expected   so i can declare a variable like this as well here  this variable another person is of person type   and i have assigned an object literal to it which  implements the person interface this player object   so this is basically the structural type system  of typescript as long as the structure matches   we can treat an object as that structural  type this is called duck typing in typescript so now let us create some interfaces  that we will use in our demo app we will now use more than one file in our demo  for each interface and class that we create   we will have a new file this is actually  a good practice to structure our project,   to begin with I'll just clear all  the code in this person.ts file   but before moving forward to  add the interface in this file   we need to make few changes in our configuration  to support multiple files I'll temporarily stop   using webpack to compile the code we will  run the compiler from the terminal from now   so in the webpack config file I'll first change  the entry point to main.js from the js folder   and then I'll comment out everything else in the  configuration file except for the section at the   bottom that configures the devweb server I'll use  this dev server to serve the app to the browser   next in the index.html file I'll have to update  the reference to the javascript file to be main.js done so that's all we need to set up  to run the compiler from the terminal   now let's begin with creating interfaces and here is my Person interface i have defined one  property name notice here i have added question   mark with the property name this like the function  parameter marks the property as optional the   objects which implement this person interface  are now not required to implement this member   on hovering over it the compiler also marks  the type as string or undefined if i remove   this question mark the tooltip now gives me  the type of this property as only string i'll   keep this as a required property now the other  thing in this interface is the function member   format name it takes no parameter and returns  a string this member is not optional so the   implementing object has to implement this  function now i'll create another interface   a result interface for that i'll create a new file  result.ts this result interface will represent the   result obtained for a game this again is a basic  interface it has three properties and no methods   i want objects that implement this interface  to be able to store the name of the player   the score they got in the game and the  number of problems they solved in the game   i'm using this simple example just for the  demo just to clear out the underlying concepts   i could have created a class with the  same property but since i don't have   any methods to implement and i'll be using  object literals to implement the interface   i don't really need the additional features  offered by the classes so here my result interface   is ready and the person interface is ready we will  see how to implement the interfaces in classes   but now we will just use the object literals  until we learn about classes in the next lesson   so let me first create an object literal for  this result interface i'll do it in this file   itself i'll create a new variable say new result  and annotate its type to be off result interface   now when i initialize this to an empty  object literal you see i get an error here   the compiler tells me the object is missing  the following properties from type result   player name score and number of problems  now you see if i mark this as optional   i just need the score and number of problems  and not the player name in the object literal   i'll remove this i will add the properties  to this result object so let me add them player name anna score 5 and number of problems  4. we are good to go now coming back to the person   interface I'll define another object literal  here which implements the person interface   I have declared a new variable called  newPlayer and defined it to be of Person type   I have implemented the two members of the person  interface the name and the formatName() function   the formatName() function will return  a trimmed version of the name I've hard   coded it here for now so this is how the  object literals can implement the interface   this is just for the demo to show you how it  works I have created the object literals in   the interface file itself, however, this is not  the correct place to have these implementations interface in typescript is a development time tool   this means the compiler uses the  interface for type checking during   compilation but does not compile the interface  to anything in javascript I'll show you how now when I open the terminal control  plus backtick and create a new terminal   I'll go to the app folder and compile this new  interface file which I have created tsc person.ts now I have this person.js file created here  and this code is just for the object literal   which I had created here in my person.ts file  however the code for this interface person   is not mentioned anywhere in my javascript file  thus we can say the interface is compiled but   has no work in the runtime so I'll delete this  person.js file, for now, it was just to show you   how this works so this was all about interfaces  we will use this in our demo application   however we do not need this objects  which we have created for our demo app   so I'll remove it from the interface files from  the result as well as from the person file and   now we are good to go let us now check out classes  in typescript and take our demo app a step further

Channel: Smartherd

Views: 1,594

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: b4JcqJuV4rM

Length: 11min 23sec (683 seconds)

Published: Sun Jun 05 2022