TypeScript Crash Course

[@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

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

[@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

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

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

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

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

[@egro-marketplace]

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

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

[@sarahmattar]

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

[@mahmoudabdelfattah9019]

Best crash course about TypeScript, thanks a lot.

[@christopherbilliau1308]

Very helpful and easily understood explanation of TS basics!

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

[@DiegoArcega1]

Your crash courses are the best

[@alaaaltounji6374]

best crash course for learning typescript keep going

[@muzafferhassan]

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

[@LookNumber9]

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

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

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

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

[@albertoakpos8595]

Short and to the point. Nice work Brad!

[@davidofug]

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

[@asharma741]

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

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

[@pavzutube]

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

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

[@Seb16291629]

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

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

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

[@mahmoudhosain9542]

Great Content always 👌😍

[@daniel71626]

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

[@joakimkarlberg9289]

Congrats on 1 million subscribers!

[@ibrahimmohammed3484]

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

[@Enzarro]

Come getSum()

[@TheSclare]

LUL

[@pcmckar]

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

[@CamdenBloke]

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

[@ad_asquare]

Great tutorial. Thanks Brad👍

[@btcls]

The simple and the best course ever find

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

[@phanirithvij]

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

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

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

[@markay_]

Can this crash course still be used as reference in 2021?

[@bobobobbyboy]

i'm wondering the same thing, considering the version as of August 3, 2021 is v4.3.5

[@razorsharpshady]

great tutorial.. very neat n clean

[@samuelweb6595]

Great tutorials Sir. God Bless You!!

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

[@atepoc7412]

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

[@warunsharma3995]

Great content.

[@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

[@FredoCorleone]

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

[@GaryParkin]

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

[@RushSonictron]

You crash courses are the best :)

[@elorating]

As in Jan, 2020. Tuples has to match length as well. So at 20:40, strNumTuple = ["Hello", 4,3,4] will cause an error.

[@mehmedbazdar9038]

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

[@rennishj]

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

[@aaronhall8039]

Your link to the full course doesn't seem to be working.

[@NeuePerspektiveCH]

Still not working (August 2019)

[@qwang6038]

I believe this is the one: www.eduonix.com/courses/Web-Development/the-complete-typescript-programming-guide-for-web-developers

[@nilanjanmajumder8508]

great video

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

[@idynxcode6390]

Excellent!

[@TheKievsash]

Thanks! Waiting for advanced Generics types video

[@leg875]

Its a real crashcourse, short and sweet :)

[@iltafkhalid5146]

Perfect, very much to the point tutorial.

[@ASoftwareEngineer]

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

[@rsruo8331]

useful course

[@skrezwan12]

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

[@braker37]

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.

[@JoshYates]

I replaced 'let' with 'var' to eliminate the 'Cannot redeclare block-scoped variable 'myString', 'myNum', etc.

[@ericdecolsales3066]

my hero. Way better then creating an explicit lib property in tsconfig.json without DOM

[@tjblackman08]

I just wrapped my code in an IIFE

[@lianglyu4237]

Nice beginner tutorial! keep it up!

[@curiousprogrammer90]

Thanks Brad! :) Keep em coming!

[@ksks941]

How do you stop that compiler in command prompt??

[@Mackingzie]

CTRL+c * 2 Recommend cmder, its like the linux terminal.

[@eddiehernandez70]

Amazing video. Great primer man. Thanks!

[@oras4940]

wonderful crash course!

[@Drag0n_Master_]

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

[@kkingbd]

What vs extension do you use to catch error ? Please let me know.

[@michelange5102]

I believe is a built-in extension

[@CodingPhase]

I've been wanting to jump to typescript

[@sudhanmadhu1251]

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

[@KresnaPermana]

Stright to the point as always

[@abdelbakibelhajslimene8278]

Thanks Brad, a fantastic work and clear explanations

[@azimjonsodikov]

Run `tsc --init` if you are getting weird type errors in VS code

[@nhrnjez]

ty :)

[@ghazwan2568]

Great one

[@水果饭子]

Have watched this vedio, thank you

[@daymaker_trading]

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

[@Imran-M-]

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

[@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?

[@fabianmarcus]

Is this crash course still up to date?

[@dreznik]

at 43:30 do you have to implement payInvoice() in the child class? in C# it would automatically inherit that method from the parent!

[@droidgeist]

20:06 - Adding additional elements after the matched tuple causes an error now. "error TS2322: Type '[string, number, string]' is not assignable to type '[string, number]'. Types of property 'length' are incompatible."

[@subham-raj]

They fixed it.

[@pola478]

great, clear tutorial. Thanks

[@trups11trupti]

Nice tutorial. Any plan on creating any project on typescript with react.js?

[@philippaubert2947]

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

[@thefreeze6023]

What I dont understand is... Let's say I'm building a nodejs app. I wanna use Typescript. But the compiler will just turn the .ts file into a .js file. And I'll only be able to use that .js file, which doesn't have any Typescript functionality, like strictly typed variables. So the thing is, how am I supposed to use Typescript if it just turns into regular old javascript.

[@Oswee]

I think you should use TS to write more error resistant code. TS is all about DX (developer experience). As well, if you have a small project, then you probably dont need TS. It really shines in larger projects and multi-team projects. Also, you can configure to what ES version you want to transpile your TS code. Lets say, you need only evergreen browsers, then you can transpile down just to ES2017. Or down to IE11. TS compiler will turn on all your fancy modern codebase to that old javascrip version which will run on that IE11. I just recently included this build step in my Webpack and i really like it. But i wish i had start my project to write in TS from very beginning.

[@thefreeze6023]

@@Oswee yeah but that doesn't answer the question. There is no TS runner engine, just tsc which simply turns it into javascript for me to use. Why not just write that JS file from the beginning myself?

[@Oswee]

@@thefreeze6023 How would you implement strong typing in vanilla JS? Or interfaces? I think it is worth for you to watch more on TS. You will get it. :) And you will like it. :)

[@thefreeze6023]

@@Oswee Exactly, how would you? If I want to use JavaScript, but with strong typing or interfaces, TypeScript won't let me do that. Why even write TS code if it will become JS and completely act like JS?

[@grassCrow]

The Freeze iThink this is a really good question. I do javascript as a hobby and one thing i like about the language is that i don’t have to declare a type and another is that there is no compiling. Its my understanding that Typescripts allows the editor to find errors that it could not otherwise find in Javascript. And also development on larger projects are easier to manage and the code is easier to read. Its not what your question assumes, its not that the browser runs better with declared types, but rather the Typescript compiles to better written, and less error prone, code. Thats my understanding ... I have no experience with Typescript.

[@giovanigenerali]

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

[@boujemaa8059]

Brad You Are the Rock!

[@mcs4uweb]

good inheritance reference, TS is the future

[@Thaidakarium]

God, finally I understand xD, thanks Traversy!

[@franciscogiancarelli9455]

"this" does not reference the class but the instance you are 'constructing'.

[@FitLife6767]

This is wonderful...thank you

[@maskman4821]

awesome tutorial, you are the best!