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

TypeScript: the Fun Parts

Will Raxworthy speaking at Ember London in April, 2017
1860Views
 
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

A brief look into some of the features of Typescript and what they can bring to a Javascript application.


Transcript


Will: Very quickly, I don't think this will go for more 10 minutes to be honest, TypeScript is that good. But essentially this afternoon, or this evening, I want to kind of just go through a little bit of a whirlwind tour through some of the more interesting parts of TypeScript that I've kind of stumbled upon while building out this presentation, and through playing around with Glimmer in a few sample apps and looking at some sample apps as well. [00:00:30] So essentially TypeScript is a typed super set of JavaScript, so it compiles down to JavaScript. I'm sure you've seen screenshots of the TypeScript code compiling down to ES6 JavaScript code, and there was a mini talk at EmberConf which one of the Microsoft developers gave, where he demonstrated this very well. I kind of didn't want to dive into too much of that because I would recommend going and watching that talk. [00:01:00] But essentially it's a very, very, small amount of things added to JavaScript that results in very similar JavaScript to what you would see today in your normal compiled apps. I think the reason that this is now coming up is obviously because of Glimmer, but Glimmer is built using TypeScript and I think it's [inaudible 00:01:27] gives a very good explanation of why [00:01:30] Glimmer was used a very long ago when they were trying to build it without TypeScript. Then they found themselves needing a kind of typed language and decided to use TypeScript. And I would also recommend Tom Dale's article which just came out, I think, like three hours before this talk. But it also goes into a very good explanation of what TypeScript is, why it's a good fit for Ember and why we shouldn't fear, sorry Glimmer I should say, and perhaps Ember later on. And why we shouldn't fear this thing [00:02:00] for those who may have been burned by CoffeeScript, or who are very sceptical of CoffeeScript, back in those days. And there are also a lot of companies that are using this so I did a little bit of research. I looked at the TypeScript website and it listed them out for me, and then I grabbed some high-rise logos off Google, but, Sky, Ubersoft, Microsoft, obviously. But then also Slack, which another article came out like two [00:02:30] days ago. We have a bit of a joke in the office where we're calling it hype script. I did have a slide but I thought it might be a little bit, not appropriate. But anyway, there are a lot of companies using it so I think that kind of demonstrates, like you know, these aren't small companies, these are large companies building quite ambitious applications in some ways. And so, then to kind of embrace TypeScript is almost a sign that this is here to stay and this can bring a lot of benefits to how we develop apps as well. [00:03:00] Okay, but why, right? I think the core, there are probably a lot of reasons why you would use TypeScript. I think the core reason, which I experienced personally and, which I can kind of see alluded to, is really about developer experience. So it's about the process of actually building that application and making that as easy as possible for people who have [00:03:30] just started, for experienced devs, for creating complex, really ambitious applications. And that's what it kind of boiled down to for me anyway. And I think this quote from the Slack article, which conveniently came out just before this talk, was, really this, this top line, is what I think is the most important part of that. But, "First, we were surprised by the number of small blogs we found when converting our code." And [00:04:00] in many cases converting a code is literally changing .js to .ts, and then that immediately gives you things. He gives a few examples here of where the property was misspelt or the function wasn't called correctly, or it wasn't called because it wasn't a function on the thing that the argument was going past in. And so all of these things which aren't obvious using typical JavaScript become super obvious when you start to use TypeScript. And in a lot of cases you don't even have to change your code in [00:04:30] order to get these benefits. These are just natural things that come from having a typed language and having the TypeScript compiler being able to examine your code and look through it. So I actually started out with a very simple example and some of you may spot where this is going, but the area that I actually hit wasn't the original area that I wanted to demonstrate. So you can see here that we have a very small function, it's just a score counter, [00:05:00] you give it a word, you give it the amount of points per letter, and then it will determine the, it just returns the amount times by the points there, or the length of word. And you can see here, the obvious thing there to demonstrate this would be, okay, I'm a new developer, I'm using this function, I give it the 10 first, and I give it the string second. If you look at this function that's not going to work because the word goes first and the points come second, right. [00:05:30] So this was my way of showing this off and you can see here that there's a squiggly line under the 10, and this is actually VS code. I would typically use Vim but in order to get TypeScript working with Vim I had to change my order completer and I wasn't willing to do that. So I used VS code instead. But yeah, so essentially, as you're typing this out it will immediately highlight these errors to you. And I thought I would be so clever and [00:06:00] that this demo would like perfectly illustrate TypeScript in all the wonder that it is, but actually it kept throwing this error, which was not even related to the example that I was tying to demonstrate here. And for the life of me I couldn't figure out, like what was going on here. I didn't run it, if I had run it I probably would have, obviously, figured it out. But it was very late at night. But you can see here, just on the side that I've been trying to solve this, I've like, like written out the types [00:06:30] for these letters, or for these arguments. So I'm saying a word is a string, points is a number and I'm trying to get to the bottom of this. In the end I blamed it on the compiler, on TypeScript. I thought it was like getting the word as an argument, and then I was like, "Okay, whatever. Word is anything," right, and then called length on it, "I don't care." Anyway, and then I ran it, and it essentially broke. And then I looked back at the code, and I was like, "Oh, okay, sure. Right, that makes sense." Length isn't a function, it's a property. So then I was able to change my thing. And so, in [00:07:00] trying to be clever and come up with a very small function to demonstrate this, and then in my like, kind of, know it all attitude I suppose, I ignored, blamed it instantly on the TypeScript compiler. Which was actually an error on my part. But I think it very nicely highlights the kind of developer experience that TypeScript can provide. Because, had I have been reading the errors properly, paying attention and trusted it a little bit more, then I perhaps wouldn't, [00:07:30] or I would have avoided this, right. But in a typical JavaScript app I wouldn't have known until I had tried this feature out or something. So I think it really tightens that feedback loop, which is something that, as web developers, we really appreciate. And something that Ember is very good at is tightening that feedback loop, and I think TypeScript takes that one level further and brings that loop into the editor for you. So that's my very basic example, there is a complex one towards the end, or complex I guess. [00:08:00] But I sent, like what I wanted to show off was some of the basic types here. And you'll see these from earlier, so we have some strings, and this is how you would assign the types to these. So we have let, made up name string, and then we can set up a default value of Ember London. We have volume, we say it's a number, it's 11. We can even do lists or arrays, so we can say this is an array of numbers and then the compiler will know that this array can only contain numbers. [00:08:30] If you are not sure what something is going to, what you're going to get back from something, then you can say any and this will then expect any type of, any type of type, to come into that. So you can see your string or a [bullion 00:08:48], or anything, and this can be useful in some examples. And then for functions that don't have it, like explicit return, so in this one where we warn the user, we can use things like void. And then you'll say, "Okay, this function is never going [00:09:00] to return a value to me," and so you can always maintain that kind of non return function. And then there are some more interesting things that are like quite unfamiliar to us in JavaScript so things like Tuples, or [Tupples 00:09:16], or [Tooples 00:09:16], depending, I think there was a Twitter poll recently, but I think it was undecided. But here we can say X is going to be a type of Tuple and it's going to contain a string and a number. This [00:09:30] can be very useful, so if you are familiar with languages like Alexa, Tuples are used very heavily to signify error codes or when things are okay. And so these can also be used in JavaScript with TypeScript. And you can see here it will even type, it will check the order of those in the Tuple to make sure that you're always returning the correct ordering. And then a more interesting one, so we can have [enums 00:09:53], so you can have colours, red, green, blue. And then you can have like a colour variable, in this case C. [00:10:00] And then you can assign that a default of color.green. And this is really interesting, and so my next kind of example, demonstrates this a little bit in expanding on that weather app that I think Tom showed off in the video that day he demonstrated at Emberconf. Effectively what you see here is, you see me declaring a location status enum at the top of the file there. We have pending, failed, [00:10:30] and success. And then down, what happens in this class, is that it will call the constructor and it will load the weather here. So it's going to just go and find the weather. As part of this it will get the location using the browser's location APIs. We're using async [inaudible 00:10:48] with [inaudible 00:10:49] and what we can do is with default at the top here, you'll see location status is assigned to location status.pending. Essentially what's happening there is, this is a way of saying, [00:11:00] in the template, this data is loading. So we can show a loading state. Then, once the async function is successful, we can then mark it as location.status.success. If it happens to fail for whatever reason, then we can say location status.failed. So this is a way of really making sure that, if you have a property that is, I think, pending success failure, that's quite a, quite a common thing with applications. But you can kind of guarantee that any developer is [00:11:30] not going to add a state or some sort of representation of that component that doesn't fit with this enum. So you are kind of making it much easier for people to be on board it. It's also a lot clearer, like, okay clearly location status.failed means that I am assigning some sort of failed state here to this location status property. So yeah, here's an example then, of me saying, this .location status equals running, okay. And you can see that it's done the squiggly line [00:12:00] here in VS code, or any editor really, to indicate that this is not a valid enum value for this particular property. And that's what the error would look like. There are a lot of other interesting things about TypeScript which are probably a little bit more than we would want to dive in here, but, they also have things like generics, interfaces. They are very invested in making sure that the code that output is up to [00:12:30] date. One other thing that is also worth mentioning is, if you do change your file from like, .js to .ts, TypeScript is smart enough to infer the types of your values without you explicitly doing them. In this first example, if we go all the way back, here it's automatically, so if this is a TypeScript file, it's automatically saying, "Okay, word is a string and points is a [00:13:00] number," based off what I would pass into it, right, I'm assuming. Anyway, TypeScript is a very easy to instal yarn global add TypeScript. Then you can take any js file, put ts on the end and run TypeScript and then the name of the file. Then it will compile that into index or into whatever .js, and also spit out errors if you have any. And that's it!