Creating a Type Alias in TypeScript
This guide walks through how to create a type alias in a TypeScript program.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

In this guide we're going to talk about type aliases in typescript. We've talked about types, and these are all of the common types that you're going to use such as Boolean, number, array, or anything like that. So these are what you can use, and that are built into typescript. However you also have the ability to name your own types. So when you do this there's a few ways of doing it. I’m going to show you the way where we can alias types right now and then in later guides I'm going to get into the concept of creating interfaces and interfaces are an integral part of how to build typescript programs.

But I thought it’d be a good idea to start off with aliases, first, so you can see how alias's work and what the syntax is. Also so that you get more of an idea into the way the interfaces work.

Creating an Alias Type

So to create the alias type you start off with the type keyword and then you just give it a name. So for this one I'm going to make this a player array so a player array here and I'm going to set this equal to array because that's the data type. The core typescript data type I want to use and then I want to declare what type of values are going to be inside of this so this is kind of the data structure and this is the type. That's going to reside inside of it. So here we can look at this and say ok this is going to be an array called Player array and it's going to be filled with string values. Later on we'll get into how you can actually have the array so that it can work with multiple types of data types. You can have a player array that could be filled with strings or with numbers anything like that. But right now we'll keep it simple.

So I'm going to create this type of player or array and now I can create a variable and say that this variable is going to be of type player array. So I'm going to call it players I could call it anything I want just a variable name and I'm going to say this is going to be a type player array and I'm going to set this equal to a basic array so I'll just give some names in here and then we'll be good hit semi colon at the end. And now we can print this out just to make sure that the syntax actually does work. So this is our tape type alias and this file is 008_type_alias. In case you're following along in the show notes I did update the config file. So now if I run this it's going to create these files for us. And now if I type in node 008_type_alias you can see it prints out that array just like a normal array. 

type PlayerArray = Array<string>;
let players : PlayerArray = [“Altuve”, “Corerra”, “Bregman”];
console.log(players);

Now I think this is also a really good time to see what kind of JavaScript was created for us. If I click on the JavaScript file you can see what the typescript interpreter actually did and all it did was created a variable called players. And then it created an array of strings. So this gives you a little bit of insight on what's happening on the background and you may wonder why in the world would I want to use more code that instead of just doing something like this. And the real reason comes down to the fact that by using this kind of syntax you're able to have a lot more control and you're able to make your clothes your code much more explicit So here when we say that we have a player or array here this is much more clear on what type of data type we're actually using compared with you know just saying oh here is a bracket with strings inside of it. And then we can put that in a variable. Now this player array can actually be called undeclared anywhere else in our program and it's going to be very clear what it is. Like I said this is more of an introduction to what we're actually going to be doing when we get into interfaces.

And so that's and that's a key part of working with angular 2 development because angular 2 uses interfaces pretty much throughout the entire code base. So when you're talking about creating data models or anything like that it's all going to be based on creating this concept of interfaces in this kind of gives us a foot in the door on how that looks and it's being able to declare a specific type and pass in the data type that's going to be used for that collection or for that value. And then how you can assign that throughout the rest of the program like we did here.

So that is how you can use type aliases in typescript.

Resources