In this section of the course we're going to get into how to work with classes in typescript. Now if you are new to JavaScript development then the concept of classes may seem a little bit foreign because for years and years JavaScript has not had a true object oriented kind of structure. You had to create work arounds like using prototypes and different systems like that. And that was very different from languages such as Ruby or java or python that had a full class inheritance based kind of structure. However typescript brings us much closer to making JavaScript a true object oriented language and then this guide we're going to start and get a feel for how to create a class in typescript.

Now I'm going to start by creating a class for a Invoice I'm going to say class and then invoice and this is the syntax.

class Invoice {
}

If you're coming from Ruby you will notice that this is very similar to Ruby syntax. And now this is where it starts to get a little bit different. Now we're going to use curly braces an inside of the curly braces. This is where we can put our methods and are any different data that we want specifically dedicated to this class. I'm going to start by creating and declaring one variable and I'm going to call this variable a company profile and it's going to be of type string. And the next thing I'm going to do is use a word that might be foreign to you. Unless you're coming from a language that has this name I'm going to call what's called a constructor and a constructor is an initializer for the class which means that whenever we instantiate this Invoice class whenever we go in we use this Invoice blueprint to create a real world object. This constructor method is going to automatically be called an inside of this. I mean a pass in a few arguments. Now any arguments that I pass to the constructor are now going to be required. But when the invoice is created and I'll show you what that means here in a second. And if you use the public key word then this is also going to create setters and getters for the values and if you're not familiar centers and getters they are simply the background functions that allow you to be able to set the data and to get the data and kind of on a method basis so instead of having to go and create methods that say what is your name again. Or let me make a change and edit the company name. Things like that. This will do that for you.

class Invoice {
  companyProfile : string;

  constructor(public name, public city, public state)
}

So now I'm going to create and say a public city value. And lastly one that says public and state. Now notice the syntax here is just a set of comma separated items. There are no colons or anything like that either. And now I'm going to have some curly braces and inside of this this is where we put any behavior we want. So you notice how in line 2 I created a company profile. So here I'm going to set the company profile. I'm going to say this dot company profile and what this means is this is going to reference the specific instance that's created. So in other words if I go and create an invoice for Google then it's going to refer to the Google instance if I go and create one for Yahoo. It's going to create an invoice for Yahoo and it's going to be talking about the instance that it's created for, and when I go through and show you how to instantiate a class then that should also make sense. Ok so I have this company profile equals and I'm just going to concatenate these items together. So yes a name plus and I'm going to separate these out by a comma and a space. Name city and state and just normal concatenation like we've done before and now. In coming to instantiate it create a variable called Google invoice and set it equal to new in news a reserved keyword. A new invoice and then inside of the invoice. I'm going to pass in these values so I'm going to pass in the company name and typescript with sublime is helping me out. Right here it's telling me I pass in the name and then pass in the city and lastly pass in the state. If you notice I didn't declare any specific data type so by default it's going to say any. But eventually when we get into real programs we're going to declare which data type each when these are going to be. But right now I'm through enough at you with the syntax for creating a class and constructors and this and that kind the thing that I don't want to throw all of it at you at once.

So now that we have called this what we've done here is we've instantiated this invoice and I'm going to duplicate this and I'm going to make one for Yahoo. And I don't know where Yahoo is based they're somewhere up in Silicon Valley so I'll just say SF. And so now what we've done is we've taken the blueprint of our Invoice and we've created two real world objects with it now just creating that is all we've done and it's stored inside of a variable. Now we, in order to get this working so that we can see we can do things like calling the company profile. So if I come down here and console log Google invoice I can say Google invoice.company profile because we have access to that. And also notice the company profile is simply a piece of data. It is not a function. So we don't have to call it with parens or anything like that. So say you call invoice and then do the same thing with Yahoo invoice. And now let's see if all of this is accurate. Run the code.

Class Invoice {
  companyProfile : string;

  constructor(public name, public city, public state) {
    this.companyProfile = name + “, “ + city + “, “ + state;
  }
}

var googleInvoice = new Invoice(‘Google’, ‘Mountain View’, ‘State);
var yahooInvoice = new Invoice(‘Yahoo’, ‘SF’, ‘State’);

console.log(googleInvoice.companyProfile);
console.log(yahooInvoice.companyProfile);

OK node 020_classes. And there you go. You can see that that printed those out. So this is really cool. We are now starting in JavaScript early in typescript to be able to work with classes so we have the ability to encapsulate all of our data and our behavior all into a single blueprint into a single design that we can call from any other place. And this is going to be a really key concept and it will be used extensively especially if you're going to take your typescript knowledge and apply it to building angular 2 projects or anything like that you're really going to want to have the concept of object oriented programming and classes down.

So this is a basic introduction to how classes work in typescript in the next guide. We're going to talk about the concept of inheritance.

Resources

• Source code