Introduction to TypeScript

Join Jess as he walks you through the fundamentals of TypeScript, including everything you need to know in order to start being productive immediately.
If you like this video, you'll love my book, Essential TypeScript, available on LeanPub: leanpub.com/essentialtypescript
Also, follow my Twitch channel where I live stream as I code and learn about coding:
/ jchadwick
About Jess:
Jess Chadwick is a software developer and technologist with over fifteen years of development experience ranging from embedded devices in start-ups to enterprise-scale solutions in Fortune 25s. He is an ASPInsider and a magazine and book author with O’Reilly publishing, as well as several courses on Lynda.com including Up and Running with ASP.NET 5 (bit.ly/UpAndRunningWithAspNet5).

[@ericka.montanez6821]

Thank you very much for taking the time to make this video.

[@imsraone]

Jess Chadwick ... Thanks for this great video ...Please update more !!!!

[@rambideunt]

this is the clearest introduction to typescript so far from many I have watched. thank you!

[@talhazaryab3300]

I'm right now watching your course on Lynda.com. You are awesome and a great teacher. KiU.

[@aadsh10]

Great Introduction to TypeScript. Thank you so much.

[@medidisukumar2062]

Jess Chadwick You are awesome Thanks for the video

[@munishtyro]

Thank you for your efforts Jess !!

[@MrVurtan]

Thanks for making the introduction. For me it was very useful to get started with TypeScript!

[@zhixiangyuan9652]

Best Typescript tutorial that i could found on internet until now.!!!thanks, i am about to study angular 2 and ionic 2, your video is helpful!

[@chetandnyane2824]

Awesome Introduction Jess, have been working with JavaScript for a while now and the issues I have faced especially with the IDE intelligence missing definitely seem to be solved by TypeScript :) Planning to explore more, thanks

[@j1ooz3]

Just awesome ! Thanks for this video

[@ulriksorber717]

Good thorough introduction to TypeScript and Angular type definitions. Thanks.

[@raja2005vnr]

You are good in teaching this sir, much useful to me.

[@chunk1978]

Great video. TypeScript is really exciting, makes JS less ghetto when approaching it from other OOP languages. Side note: you have a really great radio voice

[@MishaVucicevic]

Great class ! very understandable and clear ! Thx

[@albertgao7256]

Great video! Thanks!

[@Dan-ng5jk]

This video was fantastic. The explanation of the TypeScript super layer of JavaScript was very precise. It has served me really well to understand how to better use the language. Being a Java developer, this serves me well! :)

[@sssthegreat]

Wow. TypeScript in one slide at 11:24 is just awesome - all the main concepts told indigenously in one screenshot. Learning from you seems way too natural, as though I am in a conversation sitting next to you. I hope you do Angular 2 as well. Thanks a lot.

[@rahulWiproiet143]

Great Video. Thanks a ton

[@AcnAPyX681]

Great job m8. Keep up the good work :)

[@DanishAnton]

Very useful. Thanks.

[@MarcoBrasci]

Great introduction to TypeScript !

[@mileschan8322]

cool and excellent video. thank you

[@shardulGhanti]

Great presentation very off-topic question : What headsets are you using ?

[@nebojsaburgic3508]

clear ... ty ...

[@karthikr3970]

Vary useful tutorial

[@Aragorn.Strider]

Thank you very much! This was the video I was waiting for! One small detail is at 55.49 you use /// reference. The Typescript code I saw in other projects they use "import {Component} from 'angular2/core' with "export class" Is the /// reference old-style TS code ?

[@durnevm]

It's because angular2 has complete typescript implementation. so these lines '"import {Component} from 'angular2/core' just import them as is, written in pure typescript. Reference links are as i understand for typescript type hinting got from *.d.ts files generated from javascript libraries if you haven't specified tsconfig.json to allow typescript compiler look to source files as a project. take a look at definitelytyped.org/ - definition files for js libraries.

[@Bapholo]

I went to the GitHub that you use in this video to download the project and follow along. But it looks like the GitHub project has been updated so that it no longer matches this video. So, unfortunately, it doesn't appear that I can follow along. This video would have been significantly more valuable if I were able to code along with it.

[@DemanaJaire]

Well, in JS you can do this to make some properties kind of private var Call = (function(){ var name = 'name'; // I want this to be private function getName(){ return name; } return { getName: getName } })(); The closure returns an object with properties and methods I wanted, I can't see what's in Class.name, but I can do Class.getName() to access it. Why does typescript return the whole object if it could do it like that?

[@tonyb3123]

Because if you then want to create a class that inherits from Call, you will have inherited the method `getName()` but not the private variable it's accessing, since it's neither attached to the prototype, nor the constructor.

[@dirkpostma77]

@15.00 is there an underscore missing in de constructor body? Or is this some language feature?

[@dirkpostma77]

And also in sayHello. And in the interface. this._name and this.name... Makes me think..?

[@taocoyote]

It works because the getter and setter are defined for name

[@pussiestroker]

it's an hour-fourty-minute lecture, so I thought I'll start start off by saying those aren't concentric circles on your first slide. lol

[@MikeMcLin]

Great intro to Typescript. Thanks for taking the time. It also served as a nice introduction to ES2015/ES6 (I was expecting you to convert that inline directive template to the new friendly ES2015 template syntax). A nice follow up might be a video that takes this project and outputs a concatenated minified JavaScript file. My assumptions are TS files need to be transpiled to JS (step 1), then all of the generated JS files and library JS files (Angular, etc) can be concatenated and minified into a single file (step 2). How do you keep a map going from a single minified JS file back to the TS source files? That's the issue I can't seem to figure out.

[@hanzo2001]

I'm in a full hour of video and my head is still screaming array.forEach(fn,**this**); // basic javascript!!!!!!!!!!! Am I doing something wrong? is using the **thisArg** as defined in the prototype method signatures a bad thing? I'm open for instruction

[@JessChadwick]

No you're not missing anything. That way is perfectly legitimate when the function that you are calling supports it. Most APIs are not built that way.

[@hanzo2001]

what about the bind method? (function(){this;}.bind(thisArg)); or call() or apply() There seems to be a lot of tools on native JS that are being under-appreciated... but I admit, they can be verbose and ugly to OCD eyes. Anyways, this TypeScript looks fabulous and I want to try it out ASAP. Thanks

[@kauseralrashid5190]

hmm.. this filming set looks familiar

[@jagadeesh1492]

Please add subtittles

[@alexleung842]

Why doesn't TypeScript use scoping to implement private instance variables? JavaScript does allow one to create private variables, but for some reason the creators of TypeScript have decided not to take advantage of that.

[@tonyb3123]

Would create a confusing situation where you have a base class with a private method that's not inherited to sub-classes because it's private-via-closure and not on the prototype.

[@alexleung842]

A subclass is not supposed to inherit the private methods of its superclass.

[@tonyb3123]

+Alex Leung The issue is classes may have public methods, but those public methods can use private variables. So the inherited version of that method is trying to use something that wasn't inherited alongside it. Could lead to nasty runtime errors.

[@alexleung842]

I disagree. When inheriting a superclass, the methods on the superclass object are closures with references to private properties within the superclass itself, so the subclass methods cannot reference these private members but the superclass methods still can. Still not convinced? Here's a super simple working example I whipped up. github.com/AlexLeung/typescript_could_inherit_with_scoping Compare example_ts.ts to example_js.js After compiling example_ts.ts and opening index.html, you'll notice that not only do both files implement inheritance, but both also produce the same output when given identical tests.

[@tonyb3123]

The issue with example_js.js now is the accessor methods to the private variables aren't defined on the prototype anymore. So the "class" method will actually return true on a "hasOwnProperty" check of an instance of that class. Its important to keep in mind that the TypeScript "class" keyword needs to follow the ES-future spec of the class keyword. So that's a deal-breaker. jsbin.com/kehuwakica/edit?html,js,console

[@justinasbei]

Don't forget npm install tsd, folks!

[@jasonl_]

Great video, thank you for posting it. However, it would be easier to see the code if it didn't have your face obscuring 15% of the screen!

[@JessChadwick]

+Jason Law Thanks for the feedback. This is my first video that I've recorded with both screen capture and live feed so I guess I went a little overboard. Honestly, I was questioning how much value there was in showing my face the whole time, and you've confirmed that the answer is actually negative value. I'll re-release the video without my face in the coding parts (or should I just remove it altogether?).

[@jasonl_]

+Jess Chadwick Hi Jess, you could show your face at the beginning to introduce yourself but after that, I'd just focus on the code.

[@hanzo2001]

+Jess Chadwick I concur. You lose realestate and it sometimes blocks what you are doing. It's also a distraction that brings nothing positive (unless someone is training on lip-reading). Without your face you can also splice your video more freely and it won't look awkward when it jumps around. Even so, I'm impressed this is your first live feed. Only add your face (and hands for gestures) if it were to add anything to your content, but keep your face in the intro (and possibly outro) so everyone remembers there's still a person behind the content (and it adds a signature touch)

[@sssthegreat]

+Jess Chadwick IMHO, you being in the video helped me understand way better. It was like being in a conversation. Made your intent much clearer.

[@miles_and_more]

I happen to think it was good to have you up there. It helps keep it like a coach helping rather than listening to a podcast sorts ! I dont think it was taking up enough space to make that much an impact ...Thanks for the video

[@user-wr8cj7ie7j]

我的天字幕啊

[@karolmierzejewski1392]

Tutorial is ok, but your lips movement - sooo out of sync. It is so annoying.

[@leonbogenhausen2044]

Great Video! Thanks a lot!

[@karolmierzejewski1392]

Tutorial is ok, but your lips movement - sooo out of sync. It is so annoying.