In this Typescript tutorial, we'll learn about TS Arrays, Tuples, Objects & Enums. If you have questions, please join my Discord server where I answer questions and you can chat with other web dev students: discord.gg/neKghyefqh
2:50 if we want to specify the type and we don't enclose the union type within parentheses like this using: string | number[] instead of (string | number)[] TS will then think it's either a string or array of numbers, In addition to using interfaces to declare custom types, the real power of interfaces (IMHO) comes from implementing it in multiple different classes, after that we can use that interface to declare a param type in a function which now can accept any object implementing specified interface regardless of what its base class looks like a rare but useful use case for enum is when combined with binary values to represent multiple options, here is a quick example for a collection of weapons might be used in game dev enum Weapon { Pistol = 1, Gun = 2, Bomb = 4, Sowrd = 8 } // Collect a few weapons using bitwise OR let myWeapons = Weapon.Gun | Weapon.Pistol console.log(myWeapons) // Check if you have a specific weapon using bitwise AND if(myWeapons & Weapon.Bomb){ console.log('Drop your bomb') } if(myWeapons & Weapon.Gun){ console.log('Shoot the target') } Finally, thanks Dave and thanks to everyone who read so far,
I don't refuse to answer any questions. Sometimes YT marks comments as spam or makes them hard for me to find. Please join my Discord to insure your questions are seen. Link to Discord invite in the description.
i learn a new thing from this video ....if we put ? this make that field optional .... sir really appreciated your teaching procedure ,,,, Thanks for providing these series for free
Amazing Dave , really loved it, I was looking for a series like this to learn ReactJs, I've seen crash course in ur channel but I need step by step tutorial like this . Thanks again and have a nice day
hello dave thank you for great tutorial. i learned many things from you such as redux toolkit full course and react authenthication, i just want to say thank you and i appreciate that. and i dont want watch other TS courses because i feel more comfortable with your courses and your learnings way, So i wait untill you release the new episode
This is an amazing tutorial! Thank you so much for this! I'm learning react and ts and this is super helpful. I'm understanding everything. Gonna watch the entire playlist if I have time
Fantastic content Dave! The first video got me completely engaged! This one is also very good but it feels very packed, since you went through a lot of content (although very well explained), but since you're keeping the duration still short you didn't explain some elements, which I don't know if it's intended and this was just an introduction leaving it for the student to dig deeper, or if you'll be revisiting these topics in future videos. In particular I was wondering if you'll be introducing the "const enum" concept later on, since it has some benefits if you want to keep your JavaScript codebase more streamlined.
Although I often receive compliments for how detailed my tutorials are, they would be much, much longer if I attempted to cover everything. I always recommend students dig deeper into the docs as they learn to discover more.
@@DaveGrayTeachesCode I apologise, I expressed myself poorly. By packed I meant more like that there was not enough time to cover everything so in-depth as to touch the "const enum" mentioned earlier, more than there was too much content to process. The video was very detailed in what it was explained indeed.
Hi Sid - I cannot give one answer for the entire industry. I think this could vary greatly from job to job. Maybe they land a job and get assigned to maintain a legacy project that no one else wants. Maybe they just get assigned small pieces of a larger project. Maybe they do get assigned a CRUD project. So many possibilities.
Off topic: What do you think about Next JS? I finish your MERN lesson but as i heard from other videos, React is not SEO friendly so they use Next to solve that. Next 13 is out btw. Hope you can make a crash course.
Yes, many requests for Next.js and I'm glad I have waited. Anything released before a couple of days ago would be obsolete. I'll cover it in the near future.
@@DaveGrayTeachesCode fantastic timing then! I presume that your course will be focusing on Next13 (although I seem to remember that some kind-of-major changes might be coming in future versions)
Awesome!!!!!!!!!!! I do the like to every video and for sure subscribed as well ! Thank you for the excellence go! Now - all of the above in one words :=> yAsssssz !
Dave how are you learning all these and releasing videos at once.. You are really trying. Please learn mySQL.. We need react node express sequelize and mySQL. Relational database management system is the best.. I still learn javascript everyday even though I'm very good at javascript.. I'm afraid I won't forget js if I move to typescript or python
I've been doing this for years - definitely not learning everything at once! I so know SQL (and variations like MySQL and MS-SQL). You can always search my channel, but here's a link to the one video I have released about SQL: ua-cam.com/video/WFNtmhwU5HU/v-deo.html I will likely do more in the future. 🚀
@@DaveGrayTeachesCode please can you integrate it with node js. Use Prisma framework or sequelize with react express and node please. This kind of video is very scarce in youtube
Thank you Dave for this great content I really love this series I just have a question about TS don't know if this is the right place to ask, but I hope you can help me out here, so I have this array : [ { data: [ { id: 1, title: 'manage team', icon: , href: '/team', options: { selected: false, active: false } }, { /* SAME STRUCTURE */ }, ], }, { charts: [ /* SAME STRUCTURE */ ], }, // MAYBE MORE ... ]; and I just don't know how to annotate it properly in TS 😔, really appreciate your help with this one 🙏
@@proletar3799 yeah this almost identical to what I have come up with, but I think your interface is missing [ ] at the end because I need the Data to hold an array of the structure so my solution was like that : type Data = { [key: string | number]: Item[ ] }[ ]; but again I don't think it's the best way to do it but hey it works, thank you
Hi, is it possible to get the keys of an interface as an array just like we would normally do with object using Object.keys(Person). my end goal is to get ["name", "age", "location"] from interface Person. interface Person { name: string; age: number; location: string; }
Why does this work? let tupleActual: [string, number, boolean] = ["Nikhil", 24, true]; tupleActual.push(444); console.log(tupleActual); Output=> ['Nikhil', 24, true, 444] Why does this work? Why is TypeScript not throwing an error and allowing us to modify the length? I thought it was supposed to not work
Just popped in quickly (since I am still doing your Javascript course) to give a thumbs up as I will be returning to watch this very excellent course. Man, I just love your teaching style. No BS, nice n' snappy and to the point!
In this Typescript tutorial, we'll learn about TS Arrays, Tuples, Objects & Enums. If you have questions, please join my Discord server where I answer questions and you can chat with other web dev students: discord.gg/neKghyefqh
2:50 if we want to specify the type and we don't enclose the union type within parentheses like this
using:
string | number[]
instead of
(string | number)[]
TS will then think it's either a string or array of numbers,
In addition to using interfaces to declare custom types, the real power of interfaces (IMHO) comes from implementing it in multiple different classes,
after that we can use that interface to declare a param type in a function which now can accept any object implementing specified interface regardless of what its base class looks like
a rare but useful use case for enum is when combined with binary values to represent multiple options,
here is a quick example for a collection of weapons might be used in game dev
enum Weapon {
Pistol = 1,
Gun = 2,
Bomb = 4,
Sowrd = 8
}
// Collect a few weapons using bitwise OR
let myWeapons = Weapon.Gun | Weapon.Pistol
console.log(myWeapons)
// Check if you have a specific weapon using bitwise AND
if(myWeapons & Weapon.Bomb){
console.log('Drop your bomb')
}
if(myWeapons & Weapon.Gun){
console.log('Shoot the target')
}
Finally, thanks Dave and thanks to everyone who read so far,
Great notes and examples Ahmad! 💯
Everyday, I’m grateful I started with JAVA
Thanks Mr Gray.
I will remember to keep striving for progress over perfection because a little progress everyday will go a long way.
💯🚀
You refused to answer my questions about remote jobs but I always refer my friends to your channel cos I love your content
I don't refuse to answer any questions. Sometimes YT marks comments as spam or makes them hard for me to find. Please join my Discord to insure your questions are seen. Link to Discord invite in the description.
@@DaveGrayTeachesCode Oh. Thanks. I was worried cos I asked twice . Am downloading discord now. See you there
You are the best teacher in coding ever. Thank you always
You're very welcome!
man, telling me to "please give this video a like" really helpful since I always forget to leave a like before hopping to the next video
Thank you! 🚀
Absolutely, one of the best channels about programming!
Thank you for the kind words!
This video is great for someone who wants to start in Typescript. Thanks
Would request you to start using Typescript in next React Project:)
Great suggestion!
Thank you sir for your wonderful tutorial. Thanks from Bangladesh.
Your channel is the great treasure for the passionate learners
I appreciate that!
i learn a new thing from this video ....if we put ? this make that field optional .... sir really appreciated your teaching procedure ,,,, Thanks for providing these series for free
You're welcome!
You are great teacher. Please start Next.js series
Thank you!
Amazing Dave , really loved it,
I was looking for a series like this to learn ReactJs, I've seen crash course in ur channel but I need step by step tutorial like this . Thanks again and have a nice day
You're very welcome! After the basics, we'll look at TS & React.
Very clear explanations that even I as a beginner could understand.😃
Awesome teaching thank you
You are very welcome!
hello dave thank you for great tutorial. i learned many things from you such as redux toolkit full course and react authenthication, i just want to say thank you and i appreciate that.
and i dont want watch other TS courses because i feel more comfortable with your courses and your learnings way, So i wait untill you release the new episode
You are welcome!
Thanks man
You're welcome!
I you do react-typescrpte , if would be perfect, I mean a react project with typescrpt. Thank you. you are doing an amazing job.
Thank you!
Great Video again, Thank you Dave
Brilliant tutorial, I enjoy a lot your teaching style. It was very interesting, thank you very much. I'm sure your channel is going to grow fast
Thank you very much!
Thanks again Dave!, You are the BEST!
My pleasure!
learn alot from you.. can you please start angular after this..
Glad to hear that! Thanks for the request, but I have no plans for Angular in the near future.
this is some quality staff.
Thanks for the video!
This is an amazing tutorial! Thank you so much for this! I'm learning react and ts and this is super helpful. I'm understanding everything. Gonna watch the entire playlist if I have time
Glad it was helpful!
Thank you, Dave
You're welcome!
Great one Dave! Thanks for sharing this 🤗
Nice video Dave, thank you 😄😄
Very welcome!
This is a great tutorial... you have no Shades Mr Gray.
Amazing Dave!
Thank you!
thank you!
Welcome!
Thanks for sharing your incredible knowledge.
Glad it was helpful!
Excellent! keep it up Dave :)
Much appreciated! I'll keep going! 🚀
Thanks
Thank you for the support, Alex!
Fantastic content Dave! The first video got me completely engaged! This one is also very good but it feels very packed, since you went through a lot of content (although very well explained), but since you're keeping the duration still short you didn't explain some elements, which I don't know if it's intended and this was just an introduction leaving it for the student to dig deeper, or if you'll be revisiting these topics in future videos. In particular I was wondering if you'll be introducing the "const enum" concept later on, since it has some benefits if you want to keep your JavaScript codebase more streamlined.
Although I often receive compliments for how detailed my tutorials are, they would be much, much longer if I attempted to cover everything. I always recommend students dig deeper into the docs as they learn to discover more.
@@DaveGrayTeachesCode I apologise, I expressed myself poorly. By packed I meant more like that there was not enough time to cover everything so in-depth as to touch the "const enum" mentioned earlier, more than there was too much content to process. The video was very detailed in what it was explained indeed.
thank you sir.
btw, what's your favorite Van Halen song ?! im a fan too 🙃
You're welcome! Oh so many to like... it might be Drop Dead Legs. Hard to commit to just one! 🎸💯
nice lesson.
Thank you!
like #153💪 nice video, I`m learning typescript with you) thanks for an awesome job
You're welcome! 💯
New subscriber ❤
Hello sir, I had a quick question. do backend devs mainly work on CRUD apps at the junior level? appreciate everything you do.
Hi Sid - I cannot give one answer for the entire industry. I think this could vary greatly from job to job. Maybe they land a job and get assigned to maintain a legacy project that no one else wants. Maybe they just get assigned small pieces of a larger project. Maybe they do get assigned a CRUD project. So many possibilities.
Off topic: What do you think about Next JS? I finish your MERN lesson but as i heard from other videos, React is not SEO friendly so they use Next to solve that. Next 13 is out btw. Hope you can make a crash course.
Yes, many requests for Next.js and I'm glad I have waited. Anything released before a couple of days ago would be obsolete. I'll cover it in the near future.
@@DaveGrayTeachesCode fantastic timing then! I presume that your course will be focusing on Next13 (although I seem to remember that some kind-of-major changes might be coming in future versions)
Next js typescript tailwind maybe good
Awesome!!!!!!!!!!!
I do the like to every video and for sure subscribed as well !
Thank you for the excellence go!
Now - all of the above in one words :=> yAsssssz !
You're welcome!
Next time i think you should try to covert a ReactJS project you had to new ReactTS project.
A refactor video would be good. Yes, this tutorial series has two new projects.
Dave how are you learning all these and releasing videos at once.. You are really trying. Please learn mySQL.. We need react node express sequelize and mySQL. Relational database management system is the best.. I still learn javascript everyday even though I'm very good at javascript.. I'm afraid I won't forget js if I move to typescript or python
I've been doing this for years - definitely not learning everything at once! I so know SQL (and variations like MySQL and MS-SQL). You can always search my channel, but here's a link to the one video I have released about SQL: ua-cam.com/video/WFNtmhwU5HU/v-deo.html I will likely do more in the future. 🚀
@@DaveGrayTeachesCode please can you integrate it with node js. Use Prisma framework or sequelize with react express and node please. This kind of video is very scarce in youtube
@@emmanueloluwafemi7236 thank you for the request!
veryy goood
Thank you!
Thank you Dave for this great content I really love this series
I just have a question about TS don't know if this is the right place to ask, but I hope you can help me out here, so I have this array :
[
{
data: [
{
id: 1,
title: 'manage team',
icon: ,
href: '/team',
options: {
selected: false,
active: false
}
},
{
/* SAME STRUCTURE */
},
],
},
{
charts: [
/* SAME STRUCTURE */
],
},
// MAYBE MORE ...
];
and I just don't know how to annotate it properly in TS 😔, really appreciate your help with this one 🙏
Please join my Discord where it is easier to share code examples and discuss problems like this compared to the YT comments: discord.gg/neKghyefqh
@@DaveGrayTeachesCode Okay nice, joined 👍
try this,
```typescript:
type TData = {
id: number;
title: string;
icon : JSX.IntrinsicElements ; //or something
href:string;
options: {
selected: boolean,
active: boolean
}
}
interface IData {
[keys : string] : TData[] | undefined;
}
const myData : IData = [
//put ur objets
]
```
@@proletar3799
yeah this almost identical to what I have come up with, but I think your interface is missing [ ] at the end because I need the Data to hold an array of the structure so my solution was like that :
type Data = { [key: string | number]: Item[ ] }[ ];
but again I don't think it's the best way to do it but hey it works,
thank you
SENESEI online gracias .
Welcome!
Hi, is it possible to get the keys of an interface as an array
just like we would normally do with object using Object.keys(Person).
my end goal is to get ["name", "age", "location"] from interface Person.
interface Person {
name: string;
age: number;
location: string;
}
Keep going in this series. I think what you will want is an index signature and there is a video in this series that covers those.
hwen?
❤
EVH is active: false, cause he passed away :(
He lives on through his music! 🤘🎸💯 But yes, RIP EVH.
when I heard typescritp was static type I was Sold on it ......and Also RIP the Greates Guitarist To EVER LIVE Eddie Van Halen!!!!!!!
Why does this work?
let tupleActual: [string, number, boolean] = ["Nikhil", 24, true];
tupleActual.push(444);
console.log(tupleActual); Output=> ['Nikhil', 24, true, 444]
Why does this work?
Why is TypeScript not throwing an error and allowing us to modify the length?
I thought it was supposed to not work
Just popped in quickly (since I am still doing your Javascript course) to give a thumbs up as I will be returning to watch this very excellent course. Man, I just love your teaching style. No BS, nice n' snappy and to the point!
Thank you for the kind words!
Hello Dave thank u , when you complete NextJS Course
I just follow the content. No specific timeline to complete.
@@DaveGrayTeachesCode 😇 no rush , thank u
You explain very well, thank you
You are welcome!
I learned many valuable things from your channel, thanks for sharing it
Wohhooo 🥳
🚀😎