Sessions is temporarily moving to YouTube, check out all our new videos here.

TypeScript in 2017 with JavaScript Framework Examples

Nikos Katsikanis speaking at The JS Roundabout in August, 2017
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

A brief introduction to TypeScript with live coding before showing how it can be used with the AWS sdk and Serverless framework!


Hello everybody I am Nikos, got some shameless advertising here, I need not digress. Thanks very much for TRG Recruitment who I'm not affiliated with but thanks for the pizzas. I'm also doing a video for my YouTube channel called the JavaScript Recruiter Roundtable, which if you're interested you're welcome to join me. And I'm also planning an event called JavaScript for Recruiters so when they phone me I won't get questions like "Do you know Java or JavaScript" or something so Now I realise it's quite a long day today and you're probably really knackered, you probably don't want to listen to me, but the good news is in this talk I have a few jokes, but that bad news was that was the first one and that was the second one and I'll leave that other one optional. I have a YouTube channel to do with programming at the start I was kinda really serious about it and I had thumbnails. Then I got a bit lazy and just like let YouTube pick the thumbnails for me. Right so I'm gonna talk about TypeScript first then I'm gonna talk about AWS Lambda. Got any battery in here? Has anybody here used TypeScript before? About 30%, okay so I'm just gonna run through the basics of TypeScript in 10 minutes. Normally I have to take a course to do this but we'll see how far we can get. Okay, TypeScript was invented by Microsoft and I started using it in 2012, so I'm a five-year-old TypeScript developer so any recruiters that say five years experience of TypeScript, I'm your guy. This is a chart and I'm gonna do some technical analysis on this. So this is ... The blue line is TypeScript, sorry it's a bit small that picture but ... And the red line is Angular 2. And so here we have TypeScript run along, big spike at the start and then ... I put this dip here to Brexit and then we have this-- We have this Angular 2 curve which really starts to bring up TypeScript quite well. And although the way, the great thing is now with Angular 2 sort of dipping down a little bit and TypeScript's still growing so we're now independent of Angular as a dependency of our growth so ... It's a superset of JavaScript that means that it can do everything that JavaScript can do, so if I do far I = 1 ... Is there a laser on this thing, I dunno. So this is TypeScript and this is JavaScript. Anything you take from here, if it's valid JavaScript and paste into here, in theory you shouldn't get any errors. It keeps the JavaScript syntax blah blah blah. Optional types so you can have an application where you just wanna do some typing and if you don't wanna have typing you don't need to have types, for example a type would be a number one like this. The compelled output doesn't include the typing information but it's at a compile time check so if I do something like one like this, it's gonna give me a compel time error which saves you a whole raft of bugs that you normally discover in the browser. It's compatible with ECMAScript, okay. Yes. There is so much stuff that TypeScript is, it would take about two weeks for me to explain, but I can't because I don't know it all but basically they have like ... And who's heard of Tuple Types, Type Guards, Union Types? Maybe some of us have heard of generics. We're on TypeScript 2.3 now. Copy and ES6 stuff, ES6 Modules, Destructuring, decorators, ES6 support 1.6. That was a bit controversial by the way, people didn't like react. Yeah. Control for analysis, augmenting module scope, I don't know what they are. So anyway. So here's like, I have a Space Invaders game and I use TypeScript for it, it's all been on a JavaScript so I have like, the thing's called interfaces so, if we say interface foo and we have a like type one, we can actually sign that to var thing and make it a type of foo. Right now it's gonna complain here that this just not have a type property so I do that, then it's gonna ... Sorry, one is not a type. That's the trouble with live coding. Type = 2 Okay, cannot find type. Alright I've got a backup here. I knew this would happen. Cut the last four minutes! So this is an example of ainterface. So ... You have things called abstract classes which, who's done Java here, Java? So abstract classes are something you never instantiate but you can basically extend it but not actually instantiate it. So we gather support in TypeScript. And you can also have, you can actually implement ... Actually that's what it is, implements. So here's a interface called Boom Shake the Room, boom and it's got a property called boom and it's got a type of number and then, so let me see, if we remove this boom property it's gonna complain that this class does not correctly implement the interface. Put it back in, it's happy. You can also do it with objects, just watch, I had a nervous moment there where I forgot the word interface, implements. You can have something like generics. So this is a generic function, anyone heard of generics? It's a way to make reusable functions but once you've used them and declared them you keep the type information. So for example what this is saying is I have a function here called generic and it has one generic type and we pass in type and return the same type. And the function here must return that type, and if you wanna use this function later on like Basically if you say "var item = generic" and then pass it into string, that item will be typed to a string when you're later on using the code. Same with the number, it sort of remembers itself, quite useful. Okay back to the presentation. So here's an example of a game object in my game and, like, so this is a method, an interface, called IGame Object, most of the draw update methods on the object and position properties and so this, you can also use it with a react. TypeScript have this sort of, a depositary called Definitely Tight and you can download typing information for various libraries, you know, react Angular Moment, and then you can have code completion, compile checks at development time. So for react you just instal web pack, you instal types/react and types/react.dom. Okay let's go onto, so yeah there's TypeScript and use better react here. So you can use it as a framework and its typings and you can use your own TypeScript libraries as you develop. Angular 2, let's skip all this. So let's go onto Serverless. That's the trouble when you're rushing, sometimes you ... So who's had a serverless framework here? So what serverless does is allows you to sort of use one common configuration to deploy to various platforms like Azure, Google, Cloud and AWS. What it does with AWS, actually that's the one I've used, you have this yaml file and it generates this template that gets uploaded to Amazon which Amazon understands and then that then creates a whole bunch of resources for you. So I mean if you go in here and watch the video that explains the process for that. What I want to show you guys is how you can use TypeScript to strongly type your functions that you then deploy onto the cloud. So last night, one o'clock I was preparing preparing this stuff but I think one of the guys over in the serverless framework was quite helpful to get this to work so ... So here is, I've created this example here for how to use this serverless in TypeScript. Now a Lambda function is a function that you can, that's a node, it's a node file and it runs as a function, as a service which means that you don't have servers running all the time, they boot up when you have an event for that function, which is a node function, Node 6.10. And so what you do is, let me just see, so here's an example of a function node that you'd use with ... So this is just JavaScript and it runs on AWS Lambda and it has, this is how, you have an event thing, which is the event that called the function, so in our case it'll be a HTTP event, so you got access to HTTP event stuff, could similarly be a Lambda function that's executed on a institute of things device or an SD event, like aresult, all of the events can happen on an AWS platform. So what we're doing here is we're importing the AWS SDK and then we can use this later on in the code to do things with the SDK. So we're just basically sticking something in a database. Now there's no typing information here so what I've done is I've created another project and I've created it in TypeScript. Now we can't upload TypeScript to AWS because TypeScript is not supported in AWS, notice types doesn't run on its own runtime, it has to be transpiled or compiled to JavaScript. So what we need to do is we need to take this TypeScript file here and turn it into JavaScript. Now I'll just compare both of these files. Okay so this is TypeScript one here, and this is the JavaScript here. As you can see there's not really much difference at all really isn't there? There's very little, but when you're using this you will get feedback from the TypeScript if you're doing something dodgy. Like so for example if I started deleting stuff on this item here, which is just an object, eventually something will complain. It does, I tested this last night. So okay so basically it's complaining on this method here, dynamoDV.put, right. So if you see it's red under here, see there's that red line. Then I change the font colours, it's kind of hard to read isn't it? So webstorm is sometimes not the fastest way to get there. Close your eyes everybody. Alright is that better or worse? Alright so pa-ram's here's moaning. Now this is just a plain old po-jo, right, but I mean can you imagine a normal JavaScript ID, you wouldn't be able to tell what's going on here. So and actually go in an object, delete an item, and it's noticed, TypeScript's knows that it's not for a specific type. So that there just saves you having to bother even learning the AWS SDK, you can just start using stuff, within reason, right? And obviously you can use whatever TypeScript library you want or other code deal you have, you can use interfaces you can, you know, you can do anything in here with TypeScript benefit. So I'll just delete this here for just a ... So now if I actually click on this method here, because, and I've got the TS package just in here, I have types, AWS, SDK, then we have access to all the typing information for the Dynamo DB which is Amazon's adjacent storage database. So click on the put here and that parameter, that object that wasn't actually allowed to pass in, all the typing information's in this what's called definitely tight TypeScript. And actually click on this put parameter which extends this thing here, and then there's some typing information that's causing it to fail, so saves us a lot of effort. Now what I'm gonna do now is I'm gonna turn this into JavaScript file and I use a configuration from a TS fig, my output is ES6, if you out the ES5. I don't actually know if that'll run on AWS but probably will. But anyway I like to beat ES6 because it's a lot easier to understand, you know what I mean. If I go on here,here we go again, that class foo, okay let's do that, right, and then, I mean you can just see what it's been, output here is like. Now ES6 you just have a class right? So what I'm doing, and you have to instal TypeScript globally, and you just run TSC and it's gonna look at this TypeScript file and it put a JavaScript file for me, this one. So if we actually just compare this to the original one, that I kind of, I copied. Pretty much very similar, there's a little bit of a ... Oh that's really similar isn't it, so this is a JavaScript, so what it's basically doing is it's moving some spaces. So you get all this regular work for a client and you don't use TypeScript, and then you just use TypeScript in the background and then you send those JavaScript codes to the client, he wouldn't kind of know the difference. Because, you know, it's quite similar. And so what you do then is you have this function here and inside this framework all the configuration for this cloud formation template is sort of condensed into the serverless yaml file, and when it deploys onto Amazon it creates the official cloud formation template that nobody would write by hand nowadays when you've got things like serverless. So this is really agoes on and on and on, but the actual serverless file contains a lot of information in it, so let me just take you through what's going on here. So provider, this is like Azure or x provider for cloud functions, have a region which is London, what an odd environment, and then you have some environment variables like the name of my table here. There's some authentication permission stuff going on. This is my function so I'm saying all my lambda function that I had to basically point to this output JavaScript file here, and it's gonna respond to HTTP events. So there's something called API gateway on the ADS Lambda. Like so when I run serverless deploy it creates all of these things, including these Dynamo DB table here. And so let's just see, let's go to, this is London I'm in, let's go to Lambda. So this is my function here that's put up there for me, and it's also wired it up to API Gateway. So it has our to-dos and when a post is executed it then executes our Lambda function. So instead of faffing around with a console, collecting all of these things together, serverless does all that stuff for you. And when you want to deploy this project, you just go onto the place that has a serverless file and go onto serverless deploy. And what it is is a package is everything including all those big modules into one big massive zip file. Azure doesn't do that, they actually download dependencies on your side, but anyway this is how it does it here. Package it into a zip file, the clip formation template, you then, you know, gives us our endpoints. And then you can actually just go on here and execute it, so I just click. And when a post with curl ... I mean I know that's more text, and serverless ... Okay, and then if you go into our set, or Dynamo DB table ... You should have one in there. Oh what's the last one? What's the last one, does anyone know? The biggest number I guess right? This one probably, right? Oh third one, really? Alright so that worked. You're good at counting 10-digit numbers. THat's it, that's my presentation, 90% of it when smoothly so, anybody want to use TypeScript with their node now? - [Audience Member] Yeah man! - Do you want me to come and train you then?