TypeScript Essentials: Functions & Objects | Intersection in Interfaces

TypeScript
Transcript

English (Auto-generated)

the intersection looks like similar to the extending with a little change um in the in the, you know, in the the extending we actually extend a certain a certain interface. So now this interface just don't have this property alone. But this interface has all of them. Meanwhile this interface has only these three but this interface has the four. Maybe at some point you want in this interface only one property maybe you do not want them like you know the the these three properties but because we've while creating, when we were creating this interface we extended it uh extended the person inside it. So now this just don't have this one but all of them the those three ones do. So this is one thing and the solution for this is the intersection. So to do intersection. Um now um right now I'm gonna delete them just um I think let's just delete um uh let's say I'm gonna delete not all but well let's say I'm gonna delete all. No problem. We can remake it because there is no problem. Anyway, uh in the intersection I'm gonna I'm gonna follow uh something like that. I'm going to create two interfaces. Okay. Now that both of these interfaces would be separated from each other and at one point they are going to combine. You're going to learn that in practically any way interface. And I'm writing, you know the name of the interface. It can be anything for example, it can be um Side one. You know, just as you know, I I'm just creating it in this scenario. Um No sorry. Side one is not interesting actually gonna follow what, what what type is in their official website because I am liking that colorful. Okay colorful. And I'm making a an interface which is, which name is colorful which is the spring. Actually this is mentioned in the official documentation of the, of the typescript and I liked it because so instead of using any other thing I'm going with their own defined way. The second one is circled. So I have created two different um, radius ideas. Okay, two different interfaces. Okay now these are two different interfaces. I'm not extending this interface into this one. So now this one has a separate entity. This one is a separate entity and both are equal. Not like and we are extending anything into this one. I mean we are extending this to here or something like that. Both are different entities. Now I need to go down and I need to write, I'm gonna create type. Okay, I'm going to create a type here and color full circle. The type can have any name. There is no problem. It can be any name. So I just wrote colorful circle. So the colorful circle, I can write anything here. Okay and equal to what I'm putting inside this type. We are creating a custom type using both of them and uh the colorful colorful. Now I'm using the, you know end Okay and circle now. Um when I'm going to create a new object, let's say a circle. I mean it can be anything, this is just an object equal to this is an object but the you know here I'm using the interface which is actually a type and which is color full circle, colorful circle. Now when I hover the mouse over here it is telling that it is missing the property color for now because that's the one is at the top. So first I'm gonna put the color color like you know, I'm putting the color as green because it has to be string. Now again the problem and it's telling uh the color the radius property is missing radius property is missing which is required in type circle. This one is circle, so in this one the radius is important. So we have to maintain both radius and I'm writing you know it it it is a number so it has to be a number, I'm writing five here. Now this is fine. So if you want to use the the you know circle separately. You still can use it if you want to use the the colorful separate, you can use it. But if you want to combine them, you can combine this way and then you can use it use them by this way. And I think it is pretty simple. The intersection is actually this sign is called intersection. This is an intersection operator, you can say which intersects two interfaces. Which you just did see. And now let's just try it in the, you know, um, in Virginia. So we are just gonna have a single object with these, you know, a few things. If I go there, you can see that a circle color green and the radius five. So the javascript doesn't bother understanding the interface, the type, the intersection or anything or extending the javascript just does care of the actual objects. So everything, every problem, every bug, every, you know, every typescript thing would be would be here in the in the in the typescript thing. And at the time of compiling, you're gonna have the error or not. And then you're just gonna go to the in the in the Js file with you know, the Js stuff. So in the next video we're going to talk about something more in the uh, in the typescript till then stay tuned.
116 Views 0 Likes 0 Comments

We go over intersection in interfaces in TypeScript.

Comment
Leave a comment (supports markdown format)