TypeScript Crash Course

In this TypeScript tutorial we will look at how to install the TypeScript Compiler, all of the different data types, functions, interfaces and classes

[@anabeatriz8835]

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

[@LeetCodeSimplified]

Thanks, man!!!

[@anabeatriz8835]

@@LeetCodeSimplified I'm woman lol. U r welcome

[@CodingTutorials360]

Started a new job that uses TypeScript and Angular 4. Your crash courses are always the best to get up to speed asap.

[@TraversyMedia]

Thanks man :) Good luck with the new job

[@peggy7744]

Same here! Angular 4 and TS has been my life this week, haha :( These videos do help a lot though!

[@SogMosee]

How is the job going, 5 months later?

[@CodingTutorials360]

Excellent!

[@gopikrishnan4881]

i just started

[@LookNumber9]

Great job, Brad! I was hoping that we'd see something from you on TypeScript. Very clear and concise, as usual.

[@attilagyen1446]

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

[@amannan-123]

It is a good point but your example doesn't show the best use of lambda expressions.

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!!

[@thriftsimple561]

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!!

[@retiar2111]

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!

[@ja909]

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.

[@alenjose3903]

what about now? Is classes and stuff now available in Javascript?

[@pauls6277]

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

[@uhN0id]

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!

[@coding_ss632]

I'm doing angular2 these days and this video is helpful ... Thank you very much brad. Keep posting awesome crash course & tutorials like this.

[@volodymyrselevertov]

I started learn angular and for work with it I need to know TypeScript Thank you, Brad, now I have basic knowledge about TS :)

[@davidofug]

I have to admit, your courses are the best. Thank you Brad.

[@muzafferhassan]

thanks for this introduction video of Typescript... you guys are doing well....

[@ibrahimmohammed3484]

2 days ago i was searching for something similar as long as i didn't see it in your channel, thanx brad :)

[@sarahmattar]

Short, sweet, and very informative! You're distilling down what takes others a few hours to explain. Thank you Brad!

[@curiousprogrammer90]

Thanks Brad! :) Keep em coming!

[@User-beta8347]

Great Video Tutorial. I have used Sublime Editor for working the TypeScript. I would like to say thankyou for providing this video tutorial.

[@albertoakpos8595]

Short and to the point. Nice work Brad!

[@mahmoudabdelfattah9019]

Best crash course about TypeScript, thanks a lot.

[@elciesstv]

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!

[@Drag0n_Master_]

Thanks for the video, it's a nice overview of TypeScript - exactly what I was looking for!

[@mehmedbazdar9038]

Great tutorial as always. It looks like the syntax of TypeScript is similar to that of C# and Java :D

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. 😊

[@egro-marketplace]

Your courses are always efficient and clear !!!Your courses are always efficient and clear !!!

[@ASoftwareEngineer]

thanks so much, been learning much from your playlist, keep up the great work. Great for FE community

[@samuelweb6595]

Great tutorials Sir. God Bless You!!

[@daniel71626]

I am going to use typescript on my job, So this is nice to have.

[@GaryParkin]

Thank you! Finally I understand why I'd want to use TypeScript.

[@nanonerd100]

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 !

[@sugaadai]

Because class User is not a type

[@NeuePerspektiveCH]

Was just going to write the same exact thing .... last 4 or 5min were a bit fast and feel incomplete

[@TroenderTass]

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.

[@rennishj]

Thank you for taking the time to do a very nice intro

[@ThePCxbox]

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 :)

[@atepoc7412]

Thanks! Learning something new in every video you create!!

[@DEVDerr]

20:08 For guys watching this in 2018 => They already fixed it!

[@ourmodernworldofficial]

ye, thx! :)

[@DononovanKeith]

Haha, I was just about to post this!

[@shuangli5466]

Thx

[@LeetCodeSimplified]

Lol, I wasted 10 minutes trying to expand tuples in Typescript's playground, hahaha.

[@Thaidakarium]

God, finally I understand xD, thanks Traversy!

[@christopherbilliau1308]

Very helpful and easily understood explanation of TS basics!

[@lianglyu4237]

Nice beginner tutorial! keep it up!

[@pcmckar]

Totally useful. Nice and in a nutshell, things explained very well! Not sure why disliked this ?

[@pavzutube]

console.log can take arguments, so its not required to concatenate strings. great tutorial for starting in typescript

[@alaaaltounji6374]

best crash course for learning typescript keep going

[@generalg007]

Brad, good job and well explained. Thanks a lot!

[@oras4940]

wonderful crash course!

[@DiegoArcega1]

Your crash courses are the best

[@raazs35]

Thanks a lot.. i've been waiting for this you are awesome man.

[@razorsharpshady]

great tutorial.. very neat n clean

[@btcls]

The simple and the best course ever find

[@mostafafawzy2681]

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

[@abdelbakibelhajslimene8278]

Thanks Brad, a fantastic work and clear explanations

[@RushSonictron]

You crash courses are the best :)

[@ad_asquare]

Great tutorial. Thanks Brad👍

[@FredoCorleone]

Watch it 2x speed, good overview! I've enjoyed it

[@iltafkhalid5146]

Perfect, very much to the point tutorial.

[@daymaker_trading]

Thank you soo much!!! Such an awesome crash course!

[@jonasdevries7260]

Thanks Brad!!!! Way to go!!!!

[@eddiehernandez70]

Amazing video. Great primer man. Thanks!

[@mahmoudhosain9542]

Great Content always 👌😍

[@joakimkarlberg9289]

Congrats on 1 million subscribers!

[@leg875]

Its a real crashcourse, short and sweet :)

[@maskman4821]

awesome tutorial, you are the best!

[@mattcramer9187]

Great tutorial, thank you!

[@surajmistry4034]

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.. :)👍

[@AmxCsifier]

Glad I subbed :)

[@asharma741]

I'm a beginner but knows js and this video is really helpful to learn ts

[@idynxcode6390]

Excellent!

[@warunsharma3995]

Great content.

[@proit324techlead9]

As always, it is really awesome.

[@pmahesh6789]

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....

[@NIDHISHARMA-ep6nc]

Thanks a lot man! You save my day

[@user-hd2bn4vp9r]

Have watched this vedio, thank you

[@Enzarro]

Come getSum()

[@TheSclare]

LUL

[@AionAngell]

Reaaly great video, Thanks a lot!

[@martinnov8k]

this helped me a lot, thank you :)

[@pascalcasehkv]

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.

[@sudhanmadhu1251]

Thank you so much .this great one for new guys..

[@iancarr3923]

Very helpful as usual!

[@novailoveyou]

Thanks! You're the best!

[@boujemaa8059]

Brad You Are the Rock!

[@himelrana6594]

Thanks, man. You helped me a lot.

[@pola478]

great, clear tutorial. Thanks

[@PezhvakIMV]

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.

[@FitLife6767]

This is wonderful...thank you

[@alekseikorkh9010]

amazing video. Thanks a lot

[@nilanjanmajumder8508]

great video

[@applesaucebiatch]

vs code has a built in cmd prompt to access it press the hotkey control and backtick( tilda key not single quote) ctrl + `

[@calvinnewton7749]

Thanks, nice tip!

[@phanirithvij]

We can use var x : typename[ ] ; instead of var x : Array; example: var a : number[]; a.push(2,3,4,2);

[@skrezwan12]

I am your fan forever.......

[@ATSPARIStransfers]

awesomeness !! thanks !

[@allecoqqq]

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.

[@KresnaPermana]

Stright to the point as always

[@thanus9096]

Nice tutorial !!! thanks

[@isurumdev]

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?

[@TheKievsash]

Thanks! Waiting for advanced Generics types video

[@ZenOfTube]

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.

[@danielstoicamusic]

In this case you will get an error in your browser console.

[@user-eh3ji1py2p]

simple and great!

[@sergiumare7259]

Good tutorial!

[@ghazwan2568]

Great one

[@Imran-M-]

Hey Brad, nice work!! How do i achieve method overloading in TypeScript? Have you got any videos on that?

[@Chetan.Kothari]

Thank you so much!!!

[@tericgreenan8816]

You sir, are a legend.

[@raj080288]

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?