- Read Tutorial
- Watch Guide Video
If you went through my typescript course then you may remember me talking about interfaces and in this guide we're going to talk about how we can create an interface for our document.
I'm going to come up to documents, click new file and create a file that is just called document.ts and inside of this I'm going to create an interface. An interface in typescript is simply a way of being able to describe a type of object. So here we have a document, and what we're going to do is we're going to essentially supply the structure to Angular and to our document component to say this is what our document should look like. These are the attributes it should have and each one of those attributes should have one of these data types.
So this file is going to actually be pretty short. So I'm going to put export interface document, and inside of this we can give our attributes. I'm going to put title, string, and we're going to have five items. So I'm just gonna copy each one of these. First one is going to be description. Next one is going to be file URL. Next one is going to be updated at. And the last one is going to be image URL.
You may wonder why I'm using the snake case here instead of the camel case that's traditionally used for typescript and for javascript. The main reason I'm doing this, because we're going to be connecting to a Rails API, I like having our attributes actually lined up. So we're going to have each one of these attributes coming in from our API we're going to create in Rails and I like the concept of actually having them matching directly. You'll find out later on when we get into creating items, our documents are just going to pull from documents API but our proposals are actually going to create things on another application via an API. And when it comes to that you are going to want to have these lined up perfectly so that it's a straightforward matching. So we don't have to put it through an intermediary thing that is going to go change the variable names and that kind of thing.
That is our document interface. And in the next guide we're going to go in, and we're actually going to wire this up with our document component so that we can start showing some mocked documents inside of our document page.