- Read Tutorial
- Watch Guide Video
Know that you're familiar with how to work with classes with interfaces how to get them working together and combining all of that into how to build functional programs. Now we want to talk about namespaces, namespaces used to be called modules in earlier versions of typescript in typescript 2 the common convention is to actually call and namespaces now. And **what a namespace is, is it gives your program the ability to nest items and to essentially protect the naming of things so you don't have you know one class name overwriting another one. And so it gives a nice way of organizing your code. I have included here our post value and our post interface and then our post class and have it creating a post object here.
Now, this is all well and good for a dead simple implementation of a blog. However, let's imagine that you have something like what we have with the devcamp site on the devcamp site. You have multiple kinds of posts you have regular posts like the guides that you would see and you also have blog posts and then there's a few other items there that have the term post in it. Now if I simply have an implementation like this it's going to get really messy because I'm going to have to either get you to come up with weird names for things or I'm going to accidentally override one of them and it's going to break the features on some other pages and it can get very buggy very fast. But thankfully that's where namespaces come in and they allow us to be more explicit with what a post means for certain objects compared with others.
So what I'm going to do is I'm actually going to not change a single line of this code right here
Interface IPost {
Title: string;
Body: string;
}
class Post {
title: string;
body: string;
constructor(post: IPost) {
this.title = post.title;
this.body = post.body;
}
printPost() {
console.log(this.title);
console.log(this.body);
}
}
var post = new Post({
title: “My great post”,
body: “some content”
});
post.printPost();
So we're going to say that this is going to be a post object or this is going to be a kind of a post definition for blogs and the syntax for doing this is at the very top type namespace and I'm going to say this is a namespace for a blog and all this code inside of it. Going to indent and then put in the curly bracket right here. And as you can see I'm getting a little error. And the reason for this is because the way namespaces work in typescript is that we need to do a process called Exporting so exporting is the process of taking whatever classes you have in that you want to make available to the rest of the world. And just putting the export word in front of say export this interface and that is going to. We also need to export this class. I have one other typo here. I need to put curly brackets right. And that will fix those bugs. So this is how you can do namespace and you have an export in front of interface and then also in front of the class. Now you only do this with the items you actually want to export. That's the whole point is there may be some items that you don't ever want to make available to the rest of the world and you want to make available only inside of the blog namespace and in those cases, you wouldn't export them. But here you're going to and you're going to be seeing the export keyword all over the place in the angular side of the world. So it's definitely good to become familiar with it.
What it essentially is doing is saying I want you to make this available so that you could call something like blog dot post and that will make it available now. Namespace means pointless if you don't have something to actually namespace against or you know or something that would be considered kind of a duplicate. So let's come here and I'm going to copy this whole thing. Usually, these would be in different files but for the sake of being able to see them right here. Keep them on one and this namespace is going to be called content and this I post. Notice how we're not any errors here. We can keep this exactly the same and we can even change the values inside of here as if there was no change in the values there wouldn't be any need to have the namespace. But I'm going add a couple of other things. So first one is going to be slug and then the next one is a slug and then this next one is going to be SEO keywords. I think those are two pretty common things I know. Both of these things and the camps so those are two things. It would be good to have included and then we're also going to come down because this is implementing this now and one other thing I notice. This isn't required.
However, I do like to always have it which is to say that a post implements an interface so you can say implements and implements I post here. I just notice that I had that missing in the original code. So this has these items and now we can just add these also to here as well so I slug. And then we're going to want this for keywords as well. And then we'll put it in these two spots slug and SEO keywords. Perfect. OK so now notice we have two kinds of posts. We have a blog post that's namespace and another blog and then we have a content post. It's namespace under content and so now that's all we have to do to create our namespace. And now you can see we have an error here and that's because we don't have the ability to call posts anymore. Now we have to also include the namespace. So I'm going to separate the variables we could call the variables anything we want but just for the sake of being clear I'm going to say blog post and the way you call a namespace is the actual name and then a dot. And as you can see that gets rid of our error. And so now we have a blog post equals new blog post with title and some content.
namespace Blog {
export Interface IPost {
title: string;
body: string;
}
export class Post implements IPost {
title: string;
body: string;
constructor(post: IPost) {
this.title = post.title;
this.body = post.body;
}
printPost() {
console.log(this.title);
console.log(this.body);
}
}
}
namespace blogPost {
export Interface IPost {
title: string;
body: string;
slug: string;
seoKeywords: string;
}
export class Post implements IPost {
title: string;
body: string;
slug: string;
seoKeywords: string
constructor(post: IPost) {
this.title = post.title;
this.body = post.body;
this.slug = post.slug;
this.seoKeywords = post.seoKeywords;
}
printPost() {
console.log(this.title);
console.log(this.body);
console.log(this.slug);
console.log(this.seoKeywords);
}
}
}
var post = new Post({
title: “My great post”,
body: “some content”
});
blogPost.printPost();
Now let's come to the terminal and I'm going to run node 026_namespaces. And as you can see this still works. So everything is good on this side and we can call our blog. Now if we try to do the same thing for a content post. And our namespace is going to be content. Now you can see that we have an error. And the reason we have an error is that typescript looked in it saw wait we broke the contract. We do not have a slug and we do not have keywords so we can fix that.
So I'm not getting a copy it'll just come down here. So we have a slug which is going to just be my great post followed by SU keywords which can be any words. And now we want to call content post. So this should now print out all of these items just like our print post function said that it was going to. We run that and now you can see that printed out everything including these other items. So this is how you can use namespacing to organize your code. Notice how we now have protected our post word in our post class word so that it can be used inside of various names spaces. They're not affecting each other. So if we have, say one developer who's working on the main post content something that he does or change he makes won't go and break the posts on the blog. This is important from a code organization standpoint and also when it comes to working on larger projects and working with teams.