Typescript Type vs Interface - Which One Is Better?
Vložit
- čas přidán 22. 05. 2024
- Learn the difference between Typescript type vs interface. This two keywords are working in a similar manner so you need to understand when you need to use each of them.
TIMESTAMPS
0:00 Introduction
0:19 Typescript interface
2:15 Extends vs Intersection
4:01 Typescript function overloading
6:03 Typescript classes
► CHECK MY COURSES - monsterlessons-academy.com/co...
MOST POPULAR COURSES
► Building real project with Angular + NgRx - monsterlessons-academy.com/co...
► Building real NestJS API - monsterlessons-academy.com/co...
► Javascript interview questions - monsterlessons-academy.com/co...
► Angular Interview Questions monsterlessons-academy.com/co...
► Building real fullstack project - monsterlessons-academy.com/co...
► Mastering Git - monsterlessons-academy.com/co...
► Mastering Docker and Docker Compose - monsterlessons-academy.com/co...
► Building real project with React Hooks - monsterlessons-academy.com/co...
► Building real project with Vue + Vuex - monsterlessons-academy.com/co...
FOLLOW ME
► TWITTER - / monster_lessons
► INSTAGRAM - / monsterlessonsacademy
► TIKTOK - / monsterlessonsacademy
REFERENCES
► Source code - github.com/monsterlessonsacad
Thanks for another instructive video!
Any time!
Great video! One more use case for types that I came across is to define a union of other interfaces or types, which you can't do with interfaces directly.
Yes sure. The type is also a result of any logic or helpers
FooType = Omit
As usual clean and clear explanation! Thanks for sharing your knowledge.
Glad it was helpful!
Many times i watch other peoples code tutorials and when i dont understand them i check yours, you teach in a clear and good way, wonder where are subscribers…
In channels where you don't understand them :) . Thank you!
You are the best teacher Sir. Your videos are helping me with my current project.
Glad to hear that
I always support this channel as it has cutting-edge top-level content ❤
I appreciate that!
Thank you 😊
You're welcome 😊
I started programming in Typescript with interfaces, but now i am switching to types.
I think semantically it is more correct to define regular objects as types, because they are "types".
If you're familiar with java/c# then single class can implement multiple interfaces, and that's how angular is designed. We have interfaces OnInit, OnDestroy and so on. It makes a lot more sense for them to be interfaces, because single component class can implement many such interfaces.
If logically single object cannot implement 2 "types", that's an indication for me that these "types" should be types, not interfaces.
That sounds logical. Would be nice if there were more separation mentioned in official docs.
How to view the full type definition in VSCode if the type consists of different types? For example:
type A = { name: string };
type B = A & { age: number };
I want to see somehow that type B contains { name: string; age: number }
Because of this unresolved problem for me, I often prefer to write flat types without any unions or intersections.
You can't because you see A which is a group of flat types. Same with interfaces. It doesn't sound like a good pattern to work with flat types for me. You want to build your app as an architecture with entities. Not flat types.
@@MonsterlessonsAcademy I agree with you, writing flat types is a bad idea. So I'm trying to find a way to get full information about type B when I hover over it, rather than just a hint like "type B = A & { age: number }", which only tells me that B contains a property "age: number" and some type A, which now I need to look for elsewhere myself. It's crazy. Why can’t I see full detailed information about it when I hover over type B, like "{ name: string; age: number }" without disrupting my workflow and switching between files.
You are using prisma in your Nestjs project?
No it's Typeorm
Would you recommend to always use TypeScript with React ?
It depends on team/project/your preferences. For me personaly if it is under 500 lines total and I don't want to bother with building/transpiling than JS. More than that and more logic then TS
5:41 this is wrong, in interfaces you can declare overloaded methods like Types, but looking at your code, you had a slight mistake, you can't overload methods using only the return type... double check the code
I talked about this error. It's not about that it is just return type but interface throws error in this case and type not.
interface User {
greet(name: string): string
}
interface Admin extends User {
greet(name: string[]): string[]
}
type UserType = {
greet(name: string): string
}
type AdminType = UserType & {
greet(name: string[]): string[]
}
@@MonsterlessonsAcademy Yes, you are correct 👏 👌
Once compiled into JavaScript, neither Types nor Interfaces exist anymore, right? But Classes do.
Exactly. Only classes or enums exist
The thing that bothers me in TypeScript is the ability to use an interface as a type (record )or a type as a method holder (interface) interchangeably. It can be quite confusing,
Yes indeed. They could just make only type or give interface some unique things. But it is what it is.
Me seeing this video between type and interface while using classes for everything.. (surprise pikachu face)*
Class doesn't cover everything that type can create
Type for me
Types are almost always better. You know... it's TYPEscript.
Lol. From now on I'm using only types
Is it weird that I use classes?
not really, but classes has more boilerplater
@@seclvded I usually just go class Item{"name": string; "description": string; "price": number;}
classes exist in js so there is a huge benefit in certain cases with instanceOf checks
@@MonsterlessonsAcademy thank you. Your videos are very helpful
I could not find why there is the 'astonished' face on the video thumbnail. Might have to re-watch the video.
It's youtube and such thumbnails just work even on programming channel.
@@MonsterlessonsAcademy I am well aware of that. Was just joking. :P