Name: TypeScript - What Happens to Compiled Interfaces
Uploaded: 2016-04-21T15:58:54-05:00
Description: This lesson covers using your first TypeScript Interface and what happens to the Interface when it is compiled down to JavaScript.

This lesson covers using your first TypeScript Interface and what happens to the Interface when it is compiled down to JavaScript.

https://app.egghead.io/api/v1/lessons/typescript-typescript-what-happens-to-compiled-interfaces/subtitles

TypeScript - What Happens to Compiled Interfaces

[00:03] I'm going to add another TypeScript file. I'll call it social-network. In here, I'm going to declare two interfaces. One interface will be person. The other one can be social network. Because I want to use both of these in another file, I'm going to export them.

[00:24] Then in my person interface, I want to make sure anything that's a person has a name that's a string. Anything in my social network interface will have a getUsers function, which returns an array of persons. We'll also have it have a title.

[00:44] Now, I switch over to main, and I import social network. Then, from social network, I'll grab my social network and have my app implement social network. You'll see that we get an error saying that the app incorrectly implements social network. It's missing a title.

[01:10] We can fix that by giving it a title. We'll call it Eggheads. Hit Save. Then we'll see that it incorrectly implements the interface and it's missing getUsers. It needs a function called getUsers. I did that, but now it'll say that the function getUsers is incompatible, returning void or returning nothing. Doesn't match, returning an array of persons.

[01:36] I go ahead and return an array. This will make all the errors go away. If I try and return an array with an empty object in it, it'll actually tell me that an empty object is not assignable to type person. That's what the error is saying because person requires a string that's a name, so a name that's a string.

[02:00] If I add a name here, and I'll call the name John, then you can see that all the errors go away because this object matches this person interface. In fact, I don't even need to import the interface simply by the fact that the properties match up with the interface that it's typed against because of this person array.

[02:22] TypeScript knows that this object can work as a person. You can call that duck typing, basically creating an object that matches the interface. Duck typing is because, if it looks like a duck and walks like a duck, it is a duck.

[02:35] Now, the question is, what happens to our social network after it gets compiled because it's been running in the TypeScript compiler? If we look in our dist and we open up main, you'll see that we have the exact same stuff. We have that class. We have a title, Eggheads, and a function that returns an array with that object, so the exact same thing.

[02:57] If we check in the social network, you'll see we have nothing. When TypeScript compiles, it does not bring over any of this interface, typing, or any of the stuff that you write for the compile time checking. It actually strips it all and it's not included in your JavaScript files.

TypeScript - What Happens to Compiled Interfaces

Share this video with your friends