In this guide we're going to talk about one of the most fundamental components of typescript, which is its list of types. Now here I have the most common types that you're going to be using when building typescript programs and later on angular 2 type programs. Now right here in this list of items these are specific types that you can use and any time you use them what your programs have or how you build the variables or the functions that are going to declare these are going to have to follow a set of rules. So one of the ways that typescript has become so popular is because as a very strict way of being able to say these are the rules that you need to follow in order to have this type of program almost kind of like you're writing a contract with the rest of the program saying that you have to follow these designations and these different things that we have in place and being able to manage the types is a great way of doing that.

Boolean

So starting off the list we've already seen a few of these but the boolean data type. This is one that's pretty common to all kinds of programming languages. Boolean stands for having a true or a false value.
So an example of how this would work would be we could create a let variable and say, paid account and give it the value of boolean and then if we are going to give it a default value we can say this is set to true or we could have it set to false. These are the two values that we can set for the bullion data type.

let paidAccount : Boolean = false;

Number

Moving down the line we have a number. Now numbers a nice inflexible data type because if you notice we don't have an integer a decimal and a float type number encapsulates all of those. So for a number I could do a couple of things I could say let age, have age be a type number and set this equal to 33. I also could create a variable and say tax rate. And the set this as a number and set it equal to 7.5. Notice how all of this still works we don't have a syntax errors even though this age variable is a number which is really an integer and the tax rate is a float. Number is going to be able to determine just by looking at it what type of value it is. So that is how you can use the number data type.

let age : number = 33;
var taxRate : number = 7.5;

String

Now in string, string is another one that's relatively straightforward. We've used it before. So I could say string of full name of type string and then pass and whatever value for string that you want to use.
Now we're going to get into a few that we've not used before at least in typescript. So with typescript not only do you have to declare or I should say not only should you declare that you're going to be using an array. You should also let the other developers know or let the program know what kind of an array you're going to be using. So here I could say that I have a list of ages so I have ages and in order to set this to an array I could type that in and then set this array [33 28 11] as you can see this is going to throw an error. And if I click on it, it says that a tuple type element list cannot be empty. And when it means tuple that means a collection and we're going to go into what a tuple actually is here. But in our case we're talking just about a basic array. And the way that we can give this a data type is by putting the data type in front of the array brackets. And notice when I did that our error went away. So that is how you can do that.

var fullName : string = “Jordan Hudgens”;

Arrays

Now we also have another data type called any that we can use with arrays as well and we're going to go into how we can use arrays with different types of values here shortly.

var ages : number[] = [33, 28, 11];

Tuples

But before we do that we're going to go into tuples, now tuples if you have never use them before. Sounds like a really weird type of word and it is. A tuple allows you to have an array or some type of collection. When you know the number of elements first. And you know they're data types. So I'll give you a good example. Say we're building now a baseball program and we want to have a player variable. Now in this we don't have to give a data type outside like we did per the array. We can actually declare just the brackets and then inside of it we can give the data types. And then from there we can close this out. So we're not even declaring anything quite yet. But then if we want to set this player a variable we could say player is equal to 3, which is a number and then their name. And as you can see right there we don't have any errors. And this would work properly. So the rules when using a tuple is you have to be working with a collection of data where you already know how many elements are going to be in the array. So this is this is something that comes in really nice and handy because you it gives you complete control over what each one of these items would be. So you could even extend this out a little bit more. This is like the player's jersey number. This is a player's name but you could also do you know batting average and home runs and you can see that that has rendered this variable as a bad variable here and it says that is not assignable to this type because we're missing some parameters. But if we go in and we give a batting average of 333 and we give home runs of 33. Now we can see that this is now working properly. So whenever you know the number of elements inside of the collection and you know the respective data types a tuple is actually quite handy. So that is how you can use a tuple.

let player : [number, string, number, number];
player = [3, ‘Corerra’, .333, 33];

Enum

Now coming down to one of my favorite data types and all of typescript is the enum. Now if you have worked with Ruby on Rails especially any rails I believe it's 4.2 and above. They introduce the concept of a enumerator or I should say that enum and it is a very cool kind of system that lets you be able to establish a set number of. I like to call control points but it gives you a set number of items and let you call them almost like methods. So here I'm going to kind of do what I usually use in an enum for which is to create a type of workflow or to list off a number of stages. So to do that, I can say enum, and I'll call it stage. And inside of this I'm going to use the curly brackets. You don't have to use strings you just pass in the values that you want and they're comma separated so I can say approved pending and then rejected. And then followed up with a semicolon. And now I can actually declare our new stage so I can set a variable equal to that so I could say job, this is going to be of type stage even though stage is not a key word. I could change this to approval status. You know a thing like that so I'll do it. Approval Status. Just so you know it's not something hard coded in or anything like that. And here. I can grab approval status and then call pending on it. And now this will work and you can see we don't have any errors no syntax issues. So all of this will work properly. So this is something that I will definitely use quite a bit lean angular is the ability to set different stages and be able to call them just like methods with this nice dot syntax. This these two lines of code right here usually would have take an entire file to build in order to have a set of predefined stages that I can call like methods. And this gives us the same exact functionality right here. And so that's definitely something I'm a fan of.

enum ApprovalStatus {Approved, Pending, Rejected};
let job : ApprovalStatus = ApprovalStatus.Pending;

Any

Now coming down to the any data type. Any It definitely can be used like a regular data type. However the one thing that's going to be different about it and why you don't want to use it a lot in typescript is it can be very error prone. So you only want to use any when there really isn't any other option. So a good example of this would be data coming in from an API. So there's times when you're going to be using an API and you don't always know what kind of data you're going to be getting in from it. So in that case I'm going to create a variable called API data and I'm going to set it to an array where the array allows for any data type. So now inside of this array I can declare anything. I could put my name I can put numbers I can put booleans anything like that. And as you can see we have no syntax errors. All of this is valid typescript because we use this any data type if I were to change that to string this no longer is valid. If I change it to number this no longer is valid only with any data type. Will this work.

var apiData : any[] = [123, ‘Jordan’, false];

Void

And last but certainly not least is the void data type. Now void isn't going to be something that you're going to be using with variables the way we've used pretty much all of these. Void is something you're going to be using specifically for functions. So I'm going to create a function here. And I'm just going to call it printOut something that we've seen before and I'm going to give it a one argument of type message and it's got to be of type string or the arguments can be named message. And now one thing that typescript has that if you're coming from Ruby are languages like that that you may not be use to is the fact that in typescript you can declare what kind of value is going to be returned by the method. So say that you're running financial calculations. You could say that this value right here it's going to return a number data type. Or if you're doing something like printing out a list of names it's going to be an array or a string or something in that side of the world. However there are times when you want to use the void data type to do something like this. Where you want to console log out the message. Now this method will not return anything. It's simply printing to the console. You could do the same thing if you were doing an alert. So if you wanted to have a JavaScript alert pop out on the screen that doesn't return anything as a method. It simply is going to perform this action. Some other examples of this can be say that you are sending an SMS message and you don't want to return anything. That's something that you can do right here. So you're going to use a void any time you have a method that is performing actions but it's not actually returning a value. So that's when you would use void you're going to be using this really just for functions that are behavior based. Usually you'll use a method that does return some kind of value or another but it is good to know that this one is available.

function printout(msg: string) : void {
  console.log(msg);
}

So those are all of the common data types that you're going to be using when working in typescript programs.

Resources

• Source code