TypeScript Interfaces vs Types

  Рет қаралды 88,826

Harry Wolff

Harry Wolff

Күн бұрын

Пікірлер: 112
@zip184
@zip184 4 жыл бұрын
"The short answer, and the one that let's you stop watching this video..." Bravo
@hansschenker
@hansschenker 4 жыл бұрын
Using Types in Typescript favors for Functional Style Programming. You can compose complex types from simple types. Using Interfaces tend towards an OOP Style. You define the shape of objects. You can mimic an object hierarchy with interface merging (intefaces with the same name merge into one)! For me: Composition over Inheritance!
@codingsurvivor1377
@codingsurvivor1377 4 жыл бұрын
That was my thought also. When an interface is extended, changing the interface may break children interfaces.
@SpeakChinglish
@SpeakChinglish 3 жыл бұрын
I think this is the better recommendation, especially in JS/TS world where more people prefer composition in general (e.g. React functional components instead of Class components now we have hooks). I think inheritance and interface might be more familiar to people coming from from OOP languages, but going with Types will just make you practice composition programming more.
@verified_tinker1818
@verified_tinker1818 3 жыл бұрын
I never understood this mindset. You can write OOP with composition instead of inheritance, too. Traditionally, interfaces _are_ for composition. You distill an object into constituent parts and create an interface for each of those. You can then reuse them as you see fit.
@frewinchristopher
@frewinchristopher 2 жыл бұрын
I still like interfaces for defining the shape of all the data my APIs return. I usually only reach for types when I need a functionality that interfaces don't provide (as mentioned in this video, is no longer a very big feature set)
@adventurer2395
@adventurer2395 2 жыл бұрын
Just another "OOP bad, Functional good!" comment. Why not use both paradigms? Composition over inheritance can be achieved with any paradigm. OOP Example: You can create different interfaces without extending them and have the concrete class implement whichever interfaces it needs.
@kevin.malone
@kevin.malone 2 жыл бұрын
Best video on this. You gave the answer quickly and simply, but provided enough valuable info to keep me watching the rest
@LucioPoveda
@LucioPoveda 4 жыл бұрын
Short answer. Thanks for being honest sir. Even though I watched the entire video.
@caizza3
@caizza3 2 жыл бұрын
I like how you talked about why to use either instead of just saying they exist. Very nice
@Digibeario
@Digibeario 4 жыл бұрын
Harry, thank you for this! I tend to be an interface person myself.... except when it comes to defining any kind of function, then it's straight to types. Absolutely agree with this video, haha! Great content as usual. :)
@hswolff
@hswolff 4 жыл бұрын
Very glad we agree! Always scary putting my opinions out there and seeing what people think 🙈
@seanknowles9985
@seanknowles9985 3 жыл бұрын
Bro the best thing anyone has ever done, short answer first!
@ManasTunga
@ManasTunga 4 жыл бұрын
We can say interface is a contract that the implementing class,function or object must fulfil. But unlike interface types can’t be inherited. Nice video Harry . make a video on generics as well !!!
@hswolff
@hswolff 4 жыл бұрын
Generics you say?!?!!? kzbin.info/www/bejne/pJazdX9robaGe5Y
@tranhuuthu991990
@tranhuuthu991990 4 жыл бұрын
interface can be inherited. T extends R. class can be used to create instance, that’s difference
@rand0mtv660
@rand0mtv660 4 жыл бұрын
@@tranhuuthu991990 He said that types cannot be inherited, but interfaces can.
@UkraineKiT
@UkraineKiT 3 жыл бұрын
Holy cow, what a deep voice you have! For me listening to this video was like a flashback of me playing "Splinter Cell: Chaos Theory" a long time ago)
@SogMosee
@SogMosee 4 жыл бұрын
My recommendation is to use types exclusively for the simple reason that everything can be typed with the type keyword, but not everything can be typed with the interface keyword. Additionally, if you need to modify an object type, you can do so with the TypeScript global generics e.g. Omit, Required, and Partial.
@megaworld8397
@megaworld8397 Жыл бұрын
Thanks for the quality content. I got an answer to my question and became ur new subscriber
@imdad1593
@imdad1593 3 жыл бұрын
three unique features that interfaces have: 1. It is more geared towards objects, classes and functions 2. It can extend 3. It supports declaration merging
@tim19932002
@tim19932002 2 жыл бұрын
No, the only difference is that interfaces can be declared again and be merged into one. type is not. Please see document: www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces
@DedicatedManagers
@DedicatedManagers 4 жыл бұрын
“I just had lunch... and it was delicious.” Hilariously said; actually did make me laugh out loud. Love your comfort level on camera... something I will now strive to obtain.
@fatahbe7667
@fatahbe7667 Жыл бұрын
Thank you , my friend. this was awsom
@ChrisPHolder
@ChrisPHolder 2 жыл бұрын
I love the fact that you gave me an actual answer in the begining, so many people enjoy wasting time or fill space I guess. (Still watch to the end :))
@hecalvin1659
@hecalvin1659 Жыл бұрын
Declaration Merging: The same name of Interface declarations can be do merging, while types cannot because it is fixed and static shape of object. Types merging is by union and intersection Interface is the better choice when you write a library to export because interface could be extended and change to fit the needs of library client. If you use objects and classes, use interfaces as well. Otherwise use types.
@surajpawar1812
@surajpawar1812 2 жыл бұрын
You explained very well. Finally I was able to understand Interface and type
@gosnooky
@gosnooky 3 жыл бұрын
I like types for restricting values - type Thing = 'foo' | 'bar'
@IkraamDev
@IkraamDev 3 жыл бұрын
It would be cool if when you typed the Interface name, there would be a snippet that auto completes the object and places the cursor on the fields. So at 3:10 typing Person there should be a snippet for “= { name: $1, hungry: $0 }
@swlockhorst
@swlockhorst 3 жыл бұрын
Just the explanation I was looking for, thanks so much!
@rafael86ny
@rafael86ny Жыл бұрын
Just wow! Thank you!
@buka.a
@buka.a 3 жыл бұрын
I really hope to master this Typescript someday
@MridulBorah2014
@MridulBorah2014 4 жыл бұрын
Harry, was waiting for this video, it's very useful and easy to understand. Also must say your house/bedroom is very nice and clean. I hope I can build a house like yours.
@hswolff
@hswolff 4 жыл бұрын
Thanks so much for the kind words Mridul! I'm actually moving at the end of the month where I'll have my own personal dedicated office. I can't wait!
@MridulBorah2014
@MridulBorah2014 4 жыл бұрын
@@hswolff all the best mentor...
@rafaelboschini5410
@rafaelboschini5410 3 жыл бұрын
I like this explanation about types and interfaces, thanks!!!
@nicholaslandkamer5951
@nicholaslandkamer5951 3 жыл бұрын
Loved the way you explained this. I realized I already knew most of this, but you definitely got a subscription because of your delivery! I’m one to your Next.js with Tailwindcss videos next! Keep making videos! Thanks!
@basarat
@basarat 4 жыл бұрын
Personally I mostly use types 🌹
@jesti988
@jesti988 4 жыл бұрын
q1.Write a program to define a class called Student properties rollno & name. Also create functions for reading and display these details. Then Define interface named GraceMark with property mark initialized to 10 and a function called readMark() to read marks. Then define a class called Result with properties mark1, mark2 and function total () for finding the total mark q2.Accept a number with 1-7 and print the corresponding Week, don’t use if statement. can u
@mikhailmikheev8043
@mikhailmikheev8043 4 жыл бұрын
Thanks Harry, you are great at explaining things!
@hswolff
@hswolff 4 жыл бұрын
Thank you!
@cas818028
@cas818028 4 жыл бұрын
Nobody can seem to get this right, interfaces , classes types come from typed language based on traditional oop principles. Considering the author of typescript is the same author of c# it's easier to think if them I their traditional terms used in languages like java, c#, c++ etc. An interface normally defined a CONTRACT that a type MUST adhere too, traditionally an interface does not and can not have state. A type or class type on the other hand CAN have STATE and provide base functioning that can be overriden. If you don't adhere to these rules/definitions then they both from a practical standpoint in typescript become the same....
@ivanarevkov2089
@ivanarevkov2089 4 жыл бұрын
Hi! Thanks for your video. It was released recently after I got this question for myself. What a magic world! :)
@hswolff
@hswolff 4 жыл бұрын
Timing is everything :D
@lukehatcher98
@lukehatcher98 3 жыл бұрын
Excellent video! Very informative, thanks!
@gatocode316
@gatocode316 2 жыл бұрын
What font is that? Looks amazing
@ABHISHEK0058
@ABHISHEK0058 3 жыл бұрын
Thank you
@thlfranklin
@thlfranklin 2 жыл бұрын
great video!! thanks!
@oluwatomisinbabatunde8426
@oluwatomisinbabatunde8426 4 жыл бұрын
i love your honesty keep being you
@yapayzeka
@yapayzeka 3 жыл бұрын
perfect explanation
@hswolff
@hswolff 3 жыл бұрын
Thank you!
@karimfayed3050
@karimfayed3050 2 жыл бұрын
Love your video! It's really helpful, but which of them (interface or type) should be used when using Maps?
@tomfox747
@tomfox747 2 жыл бұрын
People are discussing the use of Interfaces VS Types. Could you not use Interfaces composed of types to overcome the shortfalls of both? Or would that create different issues?
@joelei4179
@joelei4179 4 жыл бұрын
More typescript videos please!!
@hswolff
@hswolff 4 жыл бұрын
Anything in particular you're interested in?
@joelei4179
@joelei4179 4 жыл бұрын
Harry Wolff there are a lot of videos on typescript basics but very few on the best typescript practices in a real app. For example, what should we do with .d.ts files? Should we put all type declarations in one file and export/import them? Perhaps walk us through a real open source app that uses typescript and call out the best practices and why the app using typescript this way.
@mottahh4162
@mottahh4162 4 жыл бұрын
You forgot the string enum you can do string enum in types but you can't do that in interface something like this type Gender = "Male" | "Female"
@filcondrat
@filcondrat 4 жыл бұрын
so, when you unite two types, the union operator behaves like an Inclusive or? p.s. great tut!
@hswolff
@hswolff 4 жыл бұрын
Pretty much! Thank you!
@chrisperry5658
@chrisperry5658 3 жыл бұрын
fantastic video, thanks
@Ricardoromero4444
@Ricardoromero4444 3 жыл бұрын
Light theme feels like a flashbang
@mustafaalfar7936
@mustafaalfar7936 4 жыл бұрын
Thank you Harry, Is there any convention to where to store interfaces and types within a react project? e.g: in the same file or make a separate folder/file for them.
@hswolff
@hswolff 4 жыл бұрын
Usually I just store them in the same file that I'm using them, unless they're an interface or type that I'm going to use in multiple locations.
@tompov227
@tompov227 3 жыл бұрын
Wow this was a very good explanation!
@andresbustamante972
@andresbustamante972 3 жыл бұрын
Nice video bro
@victorgarcia3526
@victorgarcia3526 3 жыл бұрын
Great video!
@nonmunch6627
@nonmunch6627 4 жыл бұрын
Thank you so much for this!
@hswolff
@hswolff 4 жыл бұрын
You are very welcome!
@nonmunch6627
@nonmunch6627 4 жыл бұрын
@@hswolff I really really really appreciate it so much. This means a lot to me.
@vishnyo
@vishnyo 4 жыл бұрын
Thank for this video. Want something advance. Like Generics
@hswolff
@hswolff 4 жыл бұрын
Generics you say?!?! kzbin.info/www/bejne/pJazdX9robaGe5Y
@vishnyo
@vishnyo 4 жыл бұрын
Harry Wolff hoho. Thx 😊
@luismunoz9126
@luismunoz9126 4 жыл бұрын
thanks for the short answer, but why a white background? it hurts
@dennisgonzales9521
@dennisgonzales9521 3 жыл бұрын
Awesome!
@qinghaowu3154
@qinghaowu3154 4 жыл бұрын
what's the different between type Harry1 = Person | KZbinr and Type Harry2 Person & KZbinr ?
@timothyleelong6295
@timothyleelong6295 4 жыл бұрын
Hi. Thank you for the video. I am a noob at TS. When talking about functional interfaces at 3:59: line 18 I would have just put (name: string). What is the purpose of adding : string; ?
@hswolff
@hswolff 4 жыл бұрын
That's the return type of the function: (argName: string): returnType
@stivaw
@stivaw 3 жыл бұрын
You are awesome. I didnt know you, but you have a new subscriber
@hswolff
@hswolff 3 жыл бұрын
Hey thank you! And welcome!
@zathkal4004
@zathkal4004 3 жыл бұрын
Could optional chaining (?) be also used with types ? Thanks for the video Harry (:
@sobanya_228
@sobanya_228 2 жыл бұрын
Optional chaining can be used in JavaScript with no types or interfaces. It’s unrelated
@pradipspeaks9395
@pradipspeaks9395 Жыл бұрын
How can I use an interface as type? Of course I can implement an interface as a type.. but what is the other way?
@buddhanag4987
@buddhanag4987 4 жыл бұрын
I used interfaces with unions now it support unions and intersections i guess
@kalush81
@kalush81 2 жыл бұрын
It looks that Interfaces also can be combined into unions just like Types can
@try-new-game
@try-new-game 3 жыл бұрын
korea subtitle thx !!
@navanshu
@navanshu 4 жыл бұрын
Good video, but please don't use light themes
@brennorris7061
@brennorris7061 2 жыл бұрын
Pity this is wayyyyyy old now. You'd do a great job dispelling the ambient mode that's all around us .. waiting. .
@danielzuzevich4161
@danielzuzevich4161 2 жыл бұрын
Not all heroes wear capes.
@asagiai4965
@asagiai4965 4 жыл бұрын
Or I can confuse myself by using types inside interface like type name = string interface IPerson { name: name; } But don't do it because it is stupid.
@Gunnii95
@Gunnii95 3 жыл бұрын
This could actually be helpful! For example, imagine you have a property for temperature and you have some functions that transform it between celcius and fahrenheit. Being able to specify which system is being used can be helpful to making your code more readable, even though it won't necessarily add any real safety. However this isn't super helpful currently, since TS loses the alias and doesn't use nominal types, as is mentioned in the video.
@johtfloridaman6227
@johtfloridaman6227 3 жыл бұрын
And interfaces in types!
@randompointlessness2766
@randompointlessness2766 2 жыл бұрын
I came accross a library that doesnt have its types :( "react-graph-vis"
@stevecastaneda
@stevecastaneda 4 жыл бұрын
Heeeeey! Thanks man. 😊
@hswolff
@hswolff 4 жыл бұрын
You are welcome!
@vincenguyendev
@vincenguyendev 4 жыл бұрын
I'm missing your blog :(
@hswolff
@hswolff 4 жыл бұрын
What you missing?
@ravalravi882
@ravalravi882 3 жыл бұрын
Omg so Helpful... Love From India (Keep Make This kind Of videos) Thank you sir.....
@muhammadahsan2292
@muhammadahsan2292 4 жыл бұрын
I'm always hungry!
@hswolff
@hswolff 4 жыл бұрын
ME TOO!!
@mehedihasansony
@mehedihasansony Жыл бұрын
10:40 seems weird behavior because it also seems Harry is Union of Person AND|OR KZbinr rather than Harry is Person or KZbinr. needed an explanation for that. I think you were also not expecting that judging by your reaction. ?? @harry
@katjapotensky4054
@katjapotensky4054 3 жыл бұрын
"APIs should be open to extension, so use interfaces over types". This does not apply to typescript _at all_ (anymore?) (also, can you point to the source in the TS docs? I remember this as well but can't find it now). You can create an interface that extends a type and the other way around by using the intersection operator as long as the consumer of your api uses a compatible typescript version (and if not, is it really your responsibility?). The only thing you can't do with types (afaik) is declaration merging, and well, let's not go down that rabbit hole here. But you can do more complex stuff, like an xor type, mapped types, conditional types and so on. Granted, the actual parts of such a type alias can be interfaces or types, that doesn't matter, but I like consistency here. Also, "interfaces are for objects" sounds like it implies that "types are not for objects", and I don't see any reason why that should be the case? Both interfaces and types can describe objects since they both describe shape and that's about the only thing that matters to js. No matter if you mean objects that only carry data or objects that "encapsulate data and behaviour" as in "instances of classes". Personally, I only use type aliases because I feel like interfaces introduce a notion of OOP into the codebase and they hint (for me) to the use of classes and I have spent too much time of my life already debugging OOP code which is why I dislike it. I.e. "use interfaces if you want to go the OOP route and use type aliases if you want to do FP or if you prefer a single syntax to be used everywhere and don't mind not using methods". On the video itself: I think you structured it well and your examples are well thought out, easily digestible and approachable. I'll keep an eye on your channel :)
@johtfloridaman6227
@johtfloridaman6227 3 жыл бұрын
Uses interfaces in types lol Find types abbreviate otherwise rather verbose type declarations
@pieter-venter
@pieter-venter 4 жыл бұрын
You forgot to say "May the 4th be with you" #disappointed
@hswolff
@hswolff 4 жыл бұрын
FUCK
@ryancox4101
@ryancox4101 3 жыл бұрын
The sore creek neuropathologically pinch because birth principally fear except a bent eyelash. same, used begonia
@tonyjays
@tonyjays Жыл бұрын
You coded on a white background...😡
@r0x304
@r0x304 3 жыл бұрын
this dude really thinks he's the cherno
@loge9981
@loge9981 4 жыл бұрын
wow ur so nice and cool i love u (no homo) :)
useReducer with TypeScript
12:41
Harry Wolff
Рет қаралды 20 М.
TypeScript Enums or Objects?
9:04
Harry Wolff
Рет қаралды 19 М.
風船をキャッチしろ!🎈 Balloon catch Challenges
00:57
はじめしゃちょー(hajime)
Рет қаралды 46 МЛН
Players vs Pitch 🤯
00:26
LE FOOT EN VIDÉO
Рет қаралды 118 МЛН
Interfaces vs Type Aliases: what's the difference?
10:20
Andrew Burgess
Рет қаралды 22 М.
What are TypeScript Generics?
10:40
Harry Wolff
Рет қаралды 15 М.
Why use Type and not Interface in TypeScript
14:12
ByteGrad
Рет қаралды 213 М.
Typescript Generics Tutorial
21:56
Ben Awad
Рет қаралды 219 М.
Mapped Types - Advanced TypeScript
12:16
Dmytro Danylov
Рет қаралды 43 М.
Enums considered harmful
9:23
Matt Pocock
Рет қаралды 211 М.
TypeScript Type Guards Explained
8:43
Software Developer Diaries
Рет қаралды 10 М.
Java Interface Tutorial
14:49
Keep On Coding
Рет қаралды 138 М.
Typescript Type vs Interface - Which One Is Better?
8:26
Monsterlessons Academy
Рет қаралды 6 М.
TypeScript TYPES vs INTERFACES (Key Differences)
7:16
basarat
Рет қаралды 95 М.
風船をキャッチしろ!🎈 Balloon catch Challenges
00:57
はじめしゃちょー(hajime)
Рет қаралды 46 МЛН