SLIDES 00:07 - What is TypeScript? 01:12 - What does TypeScript offer? 02:45 - Static type checking 03:27 - TypeScript types 04:07 - Class based objects 05:02 - TypeScript compiler (TSC) GETTING STARTED 06:01 - NodeJS and Visual Studio Code 06:35 - Installing TypeScript 07:41 - Opening project in text editor 09:41 - DATA TYPES 15:30 - Arrays 18:52 - Tuple 20:22 - void, undefined and null 22:01 - FUNCTIONS 22:47 - getSum function 24:42 - mySum function 27:28 - getName function 29:25 - myVoid function 30:16 - INTERFACES 34:40 - CLASSES 35:26 - User class 41:05 - Member class 44:37 - UserInterface interface
just a little note: when you create a function you can use the lambda syntax so instead of function(x: number): number { return x } you can use let x = (x: number): number => { return x } p.s. thanks for this tutorial, it was really helpful
One of the key advantages with Typescript compared to Javascript is that it enables better tooling. The tools such as Visual Studio Code can provide intellisense, detect more errors prior to compiling, all due to the use of types.
what about now? Is classes and stuff now available in Javascript?
7 лет назад+5
In the past couple years I went from Lamp to Java to Mean. Now after a while, I'm slow learning Ionic 3 and consequentially Angular 4 and Typescript. I thought that my heart was JS but it's TS! Omg such elegant. For those Node developers out there, give a look into Nest!!
It's super rewarding after a month of learning programming to see so much of this and get one "aha" moment after another when things are clicking (ex I knew ahead that we'd need a super() call with the child class constructor, felt good). Soooo motivated now. Thanks Brad! Your stuff has been a huge contributor! Much appreciated!!
Nice intro to cover basics. Would be nice if at the end, you spent 30 sec to explain the point/benefit of creating the UserInterface interface. Thanks !
Yeah, It's not explained, only demonstrated. But for those that might not be aware. Interfaces are implemented to make a commonality between different classes. Person class/type and a Car class/type might not have anything in common, but they both might need a method to wash. So they both can implement an Interface that enforces these classes to implement a wash method. The implimentation of this interface might not be that useful to these two classes, but it is very useful for a third class that stores a collection of classes that implements this method. This class might have a collection/list/array of items that it wants to perform some kind of cleanup on. In order for it to do this it loops trough each item and perform their own wash method. If the items don't have a wash method then this class can't perform what it was intended to do on multiple item. So it can say it want a type/class that implements the interface that enforces the wash method. That's all intefaces does, they enforces a set ot properties and methods, and other classes can enforce implementation of this, if they find it nessasary. That means it can perform a wash on the Car class, Person class and any kind of class that implements that interface that inforce the wash method. Might not make that much sense in javascript, since encaptulation and class inherritance is not that common.
4 года назад
Came here to learn TS in order to understand better the Deno JS engine. Thanks for sharing. 👏🏽 The TS classes remind me the time developing using Java on the university projects. ;) Good old times I could say. 😊
As always, thank you! You speak at such a perfect pace. For people like me who are experienced programmers we can speed up the video 1.5x without it sounding sped up and weird while others can listen at your normal pace so they can retain it better. Thanks for everything you do! Such a good channel!
Like the others, i started work in a new JS/Angular5 project in my actual job, and i rly need to say ty for this crash course, i just love the way u explain. Already bougth Angular, bootstrap and JS courses at udemy!
For those who question its value, note that if you are looking for work using Angular you will need TypeScript. Brad has great Angular tutorials, too. Note that in this tutorial you may get the squiggly line error "[ts] Cannot redeclare block-scoped variable..." which is easily fixed by making your TypeScript file into a module. Do this with an empty export statement (export {};) at the top of your file and the annoying errors will go away.
Thank you ive been developing games forever which mainly uses C based languages, and ive been following your node.js crash course videos to branch out my knowledge of computers. Its always bugged me that in js you dont declare the variable type ahead of time. Its not exactly as smooth as c based languages but i think i found my new favorite framework/tool or whatever you want to call it :)
that was awesome just one thing, you didn't need to put payInvoice in the User class, it belonged to Member class and that was a great example for those who don't know what Inheritance is and they can extend the base class. i'm a teacher myself i think maybe those who just started coding get confused. anyway, this 46minutes worth by all means. i just understood typescript. thank you.
always your crash courses are the best choices for me to start learning any new technology, so I ask you to make another crash course of using TypeScript with React, please
Hmm, another good point you kind of missed is the autocompletion that the IDE offers. For instance when u created interface for Todo and passed it as an argument type for showTodo(), it automatically knew which fields are available of todo object.
Nice video... Simplest way of explanation. I am sure if you add one video on generics then beginners will enjoy & increase there confidence. I was confused with generics when i was learn TypeScript first time even i have experience in C#. So, I am also interested....
@26:00 Just always parseInt or parseFloat. If you provide an int it will return the same. Also, it's no quicker to run the typeOf test first, I'm just javascript does that internally on parseInt, except on a lowe level.
as c# developer i was kinda lazy to learn javascript because it means I have to forget lot of key aspects and principles of programming I learned in c# but with typescript i felt at home and I can code in JS without using JS.
Sir Brad You doing amazing great helpful tutorials.Would like you to do project tutorial for Laravel with admin panel please.Thank you so much for your great tutorials.. :)👍
Hi Brad, i followed your MERN courses, how would you deploy to heroku when you add typescript ? I am very confused with the scripts and concurrently -watch etc . Could you please provide a tuto? It s very difficult to find online how to do for this setup with typescript. Thanks
I think you got confused there with the payInvoice() function in the Member class. The way you implemented it, it doesn't even need to be there, since you put it in the super class first. It would've been more useful if you had shown overriding instead of that. Other than that - great video. 1.5x speed recommended.
SLIDES
00:07 - What is TypeScript?
01:12 - What does TypeScript offer?
02:45 - Static type checking
03:27 - TypeScript types
04:07 - Class based objects
05:02 - TypeScript compiler (TSC)
GETTING STARTED
06:01 - NodeJS and Visual Studio Code
06:35 - Installing TypeScript
07:41 - Opening project in text editor
09:41 - DATA TYPES
15:30 - Arrays
18:52 - Tuple
20:22 - void, undefined and null
22:01 - FUNCTIONS
22:47 - getSum function
24:42 - mySum function
27:28 - getName function
29:25 - myVoid function
30:16 - INTERFACES
34:40 - CLASSES
35:26 - User class
41:05 - Member class
44:37 - UserInterface interface
Thanks, man!!!
@@LeetCodeSimplified I'm woman lol. U r welcome
Started a new job that uses TypeScript and Angular 4. Your crash courses are always the best to get up to speed asap.
Thanks man :) Good luck with the new job
Same here! Angular 4 and TS has been my life this week, haha :( These videos do help a lot though!
How is the job going, 5 months later?
Excellent!
i just started
just a little note: when you create a function you can use the lambda syntax so instead of
function(x: number): number { return x }
you can use
let x = (x: number): number => { return x }
p.s. thanks for this tutorial, it was really helpful
It is a good point but your example doesn't show the best use of lambda expressions.
One of the key advantages with Typescript compared to Javascript is that it enables better tooling. The tools such as Visual Studio Code can provide intellisense, detect more errors prior to compiling, all due to the use of types.
what about now? Is classes and stuff now available in Javascript?
In the past couple years I went from Lamp to Java to Mean. Now after a while, I'm slow learning Ionic 3 and consequentially Angular 4 and Typescript.
I thought that my heart was JS but it's TS! Omg such elegant.
For those Node developers out there, give a look into Nest!!
I started a new job like 1 week ago and this crash course has helped me a lot!
Can't never go wrong with your videos, thank you! :D
It's super rewarding after a month of learning programming to see so much of this and get one "aha" moment after another when things are clicking (ex I knew ahead that we'd need a super() call with the child class constructor, felt good). Soooo motivated now. Thanks Brad! Your stuff has been a huge contributor! Much appreciated!!
I learned OOP in c++ and java and i was still unsecure about this. I thought theres more to it but actually its simple as it gets. TY BRAD!
Short, sweet, and very informative! You're distilling down what takes others a few hours to explain. Thank you Brad!
Nice intro to cover basics. Would be nice if at the end, you spent 30 sec to explain the point/benefit of creating the UserInterface interface. Thanks !
Because class User is not a type
Was just going to write the same exact thing .... last 4 or 5min were a bit fast and feel incomplete
Yeah, It's not explained, only demonstrated. But for those that might not be aware. Interfaces are implemented to make a commonality between different classes.
Person class/type and a Car class/type might not have anything in common, but they both might need a method to wash. So they both can implement an Interface that enforces these classes to implement a wash method. The implimentation of this interface might not be that useful to these two classes, but it is very useful for a third class that stores a collection of classes that implements this method.
This class might have a collection/list/array of items that it wants to perform some kind of cleanup on. In order for it to do this it loops trough each item and perform their own wash method. If the items don't have a wash method then this class can't perform what it was intended to do on multiple item. So it can say it want a type/class that implements the interface that enforces the wash method. That's all intefaces does, they enforces a set ot properties and methods, and other classes can enforce implementation of this, if they find it nessasary. That means it can perform a wash on the Car class, Person class and any kind of class that implements that interface that inforce the wash method. Might not make that much sense in javascript, since encaptulation and class inherritance is not that common.
Came here to learn TS in order to understand better the Deno JS engine. Thanks for sharing. 👏🏽
The TS classes remind me the time developing using Java on the university projects. ;) Good old times I could say. 😊
As always, thank you! You speak at such a perfect pace. For people like me who are experienced programmers we can speed up the video 1.5x without it sounding sped up and weird while others can listen at your normal pace so they can retain it better. Thanks for everything you do! Such a good channel!
20:08 For guys watching this in 2018 => They already fixed it!
ye, thx! :)
Haha, I was just about to post this!
Thx
Lol, I wasted 10 minutes trying to expand tuples in Typescript's playground, hahaha.
I'm a beginner but knows js and this video is really helpful to learn ts
Great job, Brad! I was hoping that we'd see something from you on TypeScript. Very clear and concise, as usual.
Very helpful and easily understood explanation of TS basics!
Best crash course about TypeScript, thanks a lot.
Like the others, i started work in a new JS/Angular5 project in my actual job, and i rly need to say ty for this crash course, i just love the way u explain. Already bougth Angular, bootstrap and JS courses at udemy!
Your courses are always efficient and clear !!!Your courses are always efficient and clear !!!
console.log can take arguments, so its not required to concatenate strings. great tutorial for starting in typescript
I'm doing angular2 these days and this video is helpful ... Thank you very much brad. Keep posting awesome crash course & tutorials like this.
thanks for this introduction video of Typescript... you guys are doing well....
For those who question its value, note that if you are looking for work using Angular you will need TypeScript. Brad has great Angular tutorials, too. Note that in this tutorial you may get the squiggly line error "[ts] Cannot redeclare block-scoped variable..." which is easily fixed by making your TypeScript file into a module. Do this with an empty export statement (export {};) at the top of your file and the annoying errors will go away.
In this case you will get an error in your browser console.
best crash course for learning typescript keep going
Great Video Tutorial. I have used Sublime Editor for working the TypeScript. I would like to say thankyou for providing this video tutorial.
Thank you ive been developing games forever which mainly uses C based languages, and ive been following your node.js crash course videos to branch out my knowledge of computers. Its always bugged me that in js you dont declare the variable type ahead of time. Its not exactly as smooth as c based languages but i think i found my new favorite framework/tool or whatever you want to call it :)
I am going to use typescript on my job, So this is nice to have.
I started learn angular and for work with it I need to know TypeScript
Thank you, Brad, now I have basic knowledge about TS :)
Your crash courses are the best
Short and to the point. Nice work Brad!
that was awesome just one thing, you didn't need to put payInvoice in the User class, it belonged to Member class and that was a great example for those who don't know what Inheritance is and they can extend the base class. i'm a teacher myself i think maybe those who just started coding get confused. anyway, this 46minutes worth by all means. i just understood typescript. thank you.
Great tutorial as always. It looks like the syntax of TypeScript is similar to that of C# and Java :D
always your crash courses are the best choices for me to start learning any new technology, so I ask you to make another crash course of using TypeScript with React, please
Typescript versions are getting updated and it will be nice if you've specified the used version here in the description for a particular video.
I have to admit, your courses are the best. Thank you Brad.
We can use
var x : typename[ ] ;
instead of
var x : Array;
example:
var a : number[];
a.push(2,3,4,2);
Great Content always 👌😍
Hmm, another good point you kind of missed is the autocompletion that the IDE offers. For instance when u created interface for Todo and passed it as an argument type for showTodo(), it automatically knew which fields are available of todo object.
Great tutorial. Thanks Brad👍
Great tutorials Sir. God Bless You!!
2 days ago i was searching for something similar as long as i didn't see it in your channel, thanx brad :)
Thank you! Finally I understand why I'd want to use TypeScript.
Totally useful. Nice and in a nutshell, things explained very well! Not sure why disliked this ?
Nice video... Simplest way of explanation. I am sure if you add one video on generics then beginners will enjoy & increase there confidence. I was confused with generics when i was learn TypeScript first time even i have experience in C#. So, I am also interested....
vs code has a built in cmd prompt to access it press the hotkey control and backtick( tilda key not single quote)
ctrl + `
Thanks, nice tip!
@26:00 Just always parseInt or parseFloat. If you provide an int it will return the same. Also, it's no quicker to run the typeOf test first, I'm just javascript does that internally on parseInt, except on a lowe level.
Great content.
The simple and the best course ever find
Thank you for taking the time to do a very nice intro
Excellent!
Thanks! Learning something new in every video you create!!
great video
Thanks for the video, it's a nice overview of TypeScript - exactly what I was looking for!
Thanks Brad! :) Keep em coming!
Watch it 2x speed, good overview! I've enjoyed it
great tutorial.. very neat n clean
Come getSum()
LUL
As in Jan, 2020. Tuples has to match length as well. So at 20:40, strNumTuple = ["Hello", 4,3,4] will cause an error.
Congrats on 1 million subscribers!
Nice beginner tutorial! keep it up!
Perfect, very much to the point tutorial.
thanks so much, been learning much from your playlist, keep up the great work. Great for FE community
wonderful crash course!
Its a real crashcourse, short and sweet :)
as c# developer i was kinda lazy to learn javascript because it means I have to forget lot of key aspects and principles of programming I learned in c# but with typescript i felt at home and I can code in JS without using JS.
Amazing video. Great primer man. Thanks!
I replaced 'let' with 'var' to eliminate the 'Cannot redeclare block-scoped variable 'myString', 'myNum', etc.
my hero. Way better then creating an explicit lib property in tsconfig.json without DOM
I just wrapped my code in an IIFE
Thanks! Waiting for advanced Generics types video
Thank you so much .this great one for new guys..
Sir Brad You doing amazing great helpful tutorials.Would like you to do project tutorial for Laravel with admin panel please.Thank you so much for your great tutorials.. :)👍
God, finally I understand xD, thanks Traversy!
Run `tsc --init` if you are getting weird type errors in VS code
ty :)
Thank you soo much!!! Such an awesome crash course!
Thanks Brad, a fantastic work and clear explanations
I've been wanting to jump to typescript
Hi Brad, i followed your MERN courses, how would you deploy to heroku when you add typescript ? I am very confused with the scripts and concurrently -watch etc . Could you please provide a tuto? It s very difficult to find online how to do for this setup with typescript. Thanks
Your link to the full course doesn't seem to be working.
Still not working (August 2019)
I believe this is the one: www.eduonix.com/courses/Web-Development/the-complete-typescript-programming-guide-for-web-developers
I am coming from 2022 :)
Thank you so much !
Have watched this vedio, thank you
Brad, good job and well explained. Thanks a lot!
useful course
You crash courses are the best :)
I think you got confused there with the payInvoice() function in the Member class. The way you implemented it, it doesn't even need to be there, since you put it in the super class first. It would've been more useful if you had shown overriding instead of that. Other than that - great video. 1.5x speed recommended.
Stright to the point as always
great, clear tutorial. Thanks
Thanks Brad!!!! Way to go!!!!
I am your fan forever.......
Just a heads up with classes -- interfaces do not support private / protected types, so keep that in mind when using them.
Brad You Are the Rock!
This is wonderful...thank you
awesome tutorial, you are the best!
Thank you so much!!!
Very helpful as usual!
amazing video. Thanks a lot
As always, it is really awesome.
Reaaly great video, Thanks a lot!
at 43:30 do you have to implement payInvoice() in the child class? in C# it would automatically inherit that method from the parent!
Good tutorial!
Great one
Thanks a lot.. i've been waiting for this you are awesome man.