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.
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
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!!
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!
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.
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. 😊
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.
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!
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 :)
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
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.
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.
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.
@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.
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
@TraversyMedia I've been trying to user modifiers on the properties in the class User, but I am getting this error: Class 'User' incorrectly implements interface 'UserInterface'. Property 'name' is protected in type 'User' but public in type 'UserInterface'. So does that mean private/protected modifiers cant be used in the class implementing an interface ? I find your crash course great, and hoping you'd help me out in this.
@20:18 no. I'm receiving an error: "Type '[string, number, number, number]' is not assignable to type '[string, number]'. Source has 4 element(s) but target allows only 2." Must have been changed...
Could you do a Live Q/A? I'm just curious what's your opinion about asp.net I'm currently starting work with it, and it's a little frustrating especially coming from a development environment that didn't require HTML asp syntax. Do you see it's still something good to know and understand as an aspiring Web Developer.
Hi Brad, love the videos, keep it up. One thing though, why do we have to use Typescript when we can still use ES6 features in JS and use something like Babel to convert it to ES5 code that is understood by browsers?
I am only half way through this video but is Typescript only about "declaring" variable types? Was curious what TS was all about and that is all I am seeing at this point...again just curious.
If I want my TypeScript code to ultimately be es5 compatible, would I have to first transcompile TypeScript into es6 using tsc and then transcompile es6 into es5 using babel?
what the point of typescript if you gonna compile it as javascript does it it make is faster? im making a mobile social media app and currently doing the backend in js but thinking about ts. is it worth it?
If I have issues with literally writing out JS because its so loosely typed however understand the fundamentals, would Typescript be easier for me to pick up???
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.
![[LIVE] นาทีนี้ต้องพี่ทนาย | ทนายแก้ว vs ทนายไพศาล | #คุยให้เด็กมันฟัง EP.47 (02/11/67)](http://i.ytimg.com/vi/HmquaO-PL_M/mqdefault.jpg)
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?
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
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!!
Short, sweet, and very informative! You're distilling down what takes others a few hours to explain. Thank you Brad!
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!!
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.
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!
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.
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. 😊
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.
Great job, Brad! I was hoping that we'd see something from you on TypeScript. Very clear and concise, as usual.
I'm doing angular2 these days and this video is helpful ... Thank you very much brad. Keep posting awesome crash course & tutorials like this.
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!
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 !!!
Come getSum()
LUL
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 :)
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'm a beginner but knows js and this video is really helpful to learn ts
Best crash course about TypeScript, thanks a lot.
console.log can take arguments, so its not required to concatenate strings. great tutorial for starting in typescript
best crash course for learning typescript keep going
We can use
var x : typename[ ] ;
instead of
var x : Array;
example:
var a : number[];
a.push(2,3,4,2);
Short and to the point. Nice work Brad!
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
Very helpful and easily understood explanation of TS basics!
I have to admit, your courses are the best. Thank you 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.
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!
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.
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 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.
I am going to use typescript on my job, So this is nice to have.
Great Video Tutorial. I have used Sublime Editor for working the TypeScript. I would like to say thankyou for providing this video tutorial.
The simple and the best course ever find
2 days ago i was searching for something similar as long as i didn't see it in your channel, thanx brad :)
thanks for this introduction video of Typescript... you guys are doing well....
As in Jan, 2020. Tuples has to match length as well. So at 20:40, strNumTuple = ["Hello", 4,3,4] will cause an error.
@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.
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
Totally useful. Nice and in a nutshell, things explained very well! Not sure why disliked this ?
Great tutorial as always. It looks like the syntax of TypeScript is similar to that of C# and Java :D
Great tutorial. Thanks Brad👍
Great Content always 👌😍
Thank you! Finally I understand why I'd want to use TypeScript.
@TraversyMedia I've been trying to user modifiers on the properties in the class User, but I am getting this error: Class 'User' incorrectly implements interface 'UserInterface'. Property 'name' is protected in type 'User' but public in type 'UserInterface'. So does that mean private/protected modifiers cant be used in the class implementing an interface ? I find your crash course great, and hoping you'd help me out in this.
Watch it 2x speed, good overview! I've enjoyed it
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
Excellent!
Congrats on 1 million subscribers!
Thanks! Learning something new in every video you create!!
at 43:30 do you have to implement payInvoice() in the child class? in C# it would automatically inherit that method from the parent!
great video
Perfect, very much to the point tutorial.
Is this crash course still up to date?
Link to the Full Course: www.eduonix.com/courses/Web-Development/the-complete-typescript-programming-guide-for-web-developers
Can this crash course still be used as reference in 2021?
i'm wondering the same thing, considering the version as of August 3, 2021 is v4.3.5
Great content.
Great tutorials Sir. God Bless You!!
@20:18 no. I'm receiving an error: "Type '[string, number, number, number]' is not assignable to type '[string, number]'.
Source has 4 element(s) but target allows only 2."
Must have been changed...
great tutorial.. very neat n clean
"this" does not reference the class but the instance you are 'constructing'.
Could you do a Live Q/A? I'm just curious what's your opinion about asp.net I'm currently starting work with it, and it's a little frustrating especially coming from a development environment that didn't require HTML asp syntax. Do you see it's still something good to know and understand as an aspiring Web Developer.
useful course
Are functions always executed synchronously?
I've been wanting to jump to typescript
thanks so much, been learning much from your playlist, keep up the great work. Great for FE community
Its a real crashcourse, short and sweet :)
Hi Brad, love the videos, keep it up. One thing though, why do we have to use Typescript when we can still use ES6 features in JS and use something like Babel to convert it to ES5 code that is understood by browsers?
Hey Brad, nice work!!
How do i achieve method overloading in TypeScript? Have you got any videos on that?
I am only half way through this video but is Typescript only about "declaring" variable types? Was curious what TS was all about and that is all I am seeing at this point...again just curious.
If I want my TypeScript code to ultimately be es5 compatible, would I have to first transcompile TypeScript into es6 using tsc and then transcompile es6 into es5 using babel?
Thanks Brad! :) Keep em coming!
Thanks for the video, it's a nice overview of TypeScript - exactly what I was looking for!
Cannot redeclare block scoped variable "myString". Same happens with all variables. How to fix this? And how did Brad NOT get this error?
How do you stop that compiler in command prompt??
CTRL+c * 2
Recommend cmder, its like the linux terminal.
Brad You Are the Rock!
what the point of typescript if you gonna compile it as javascript does it it make is faster? im making a mobile social media app and currently doing the backend in js but thinking about ts. is it worth it?
Run `tsc --init` if you are getting weird type errors in VS code
ty :)
Any thought of creating multiple projects in tsc on udemy? Like you did with vanilla? If yes would be really awesome
If I have issues with literally writing out JS because its so loosely typed however understand the fundamentals, would Typescript be easier for me to pick up???
Great one
The 'FULL COURSE' link is broken, I'd like to go on and learn more. Any chance you could fix that, or lead me in the right direction? TIA!
What vs extension do you use to catch error ? Please let me know.
I believe is a built-in extension
Stright to the point as always
Thank you very much for the tutorial. But I have a question. Is it ok to put variables in the interface such as name, email and age?
Thank you so much .this great one for new guys..
Thank you for taking the time to do a very nice intro
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
Is this crash course still relevant in 2020? Thanks
Thank you soo much!!! Such an awesome crash course!
God, finally I understand xD, thanks Traversy!
i love your courses. Any thoughts on updating your angular course in udemy?