by Davy Engone (Hackages)
At: FOSDEM 2020 https://video.fosdem.org/2020/H.1302/typescript.webm
In 25 minutes, you'll learn how TypeScript can help you build safer and more resilient JavaScript applications. Expect some demos, some code and a lot of fun!
Room: H.1302 (Depage) Scheduled start: 2020-02-02 09:30:00
So my name is Dave. I'm a software engineer and I love JavaScript. You love JavaScript too, right? If you love JavaScript, you do this. Now look around you. If you hate JavaScript, you do this now you can squeeze a little bit the room for the people. Just press them in the middle and I have a ball title. So it was a title to get you in your room. So I'm happy that you are here. Write safer. Javascript. What does that mean? Safer. Alright, so I'm just quickly going to go through the agenda. We're just going to see JavaScript verse tanscript getting to log tanscript and migrating from JavaScript of transcript. But I need to answer this question first. What safer means another one. Sorry. And define is not a function. Say someone, no bugs. Oh, I like that. It's very ambitious, man. I like that again. Easier debugging. How many people here in the room do JavaScript? Really? Very good. Now keep your hand up. How about transcripts? Okay. So I don't have to convince you. Really. I'm just going to make sure that at the end of the session when I say transcripts, everyone raise their hands and they want to do that every day. So yeah, that's the problem. You know that, right? Cannot read property bar often. Define or not is not an object or you're trying to call a function cannot re property value often defined. That's really common. Fo is not a function, cannot re property length of undefined. That's the safer part I'm talking about, right? I'm not talking about security and all this stuff. I'm just talking about the fact that you can you can write code that doesn't crash in production. So that's a runtime error. Right. So we have two things run times errors and compile time errors. Right. So while you're writing your code, you'll be able to see this with transcript will be able to detect that upfront. Okay. So JavaScript transcript JavaScript is yellow. You know that color, right? That's JavaScript tab script is blue. Javascript is whoever is doing JavaScript only in the room is already doing TypeScript. Okay, because transcript is a super set of JavaScript. The way I introduce transcript to teams that we coach, I tell them to script is a documentation tool. I'm going to show you why I'm calling it a documentation tool. Yeah, it looks like a programming language, but as you start using it, you're going to realize that it is more documentation tools than a programming language. So that's a year of thing. All of you are doing it. And the blue part is what Taco brings on top of the table. So yeah, transcript is a super set of JavaScript. The way it's described on a Microsoft website is JavaScript scale. Okay, so small day, more time. Just going to take the a thing called TypeScript playground. Okay, so you can follow. You can follow with me on this one if you want. So it's a small can you see this? Let me put it full screen. So let me remove this. So keep in mind that what I'm about to show you is the fact that JavaScript touch script is a super set of JavaScript. Okay, so in JavaScript, we have class. It's a user. As you can see on the left, on the left here is TypeScript on the right is JavaScript. The only difference between the two is just a US strict so far. So we're still in the year one. Everyone. You right. Tab script. You're basically having one on one JavaScript on the other side. Okay, at the year one, and then you want to write, let's say variable cost user. We're still in the hero zone. Right? So far. So good. So then you will say, what is user in Ta script? You can express documentation. You can express that user is a user of class type user. Guess what? I'm using it. I'm using this to document that line. I'm using that class. I'm using a class, but I'm going to show you in a few seconds that you shouldn't be doing it. You shouldn't do that. But stay with me for a second. I'm still having a kind of one on one, but I don't have this anymore. I don't see this thing here. That typing documentation. I'm just documenting my cord. But look at what's going to happen here. Now I'm going to say user has a login, which is a strength by hiding login here right away here. This isn't working anymore. On the other side, we still have the same translation, but this isn't working. That won't stop your programs to work. But at least you see it right away. That's what we were talking about. Compile time. Now, if I want to fix it, just going to have to have a login here that says, Devi fix it. We're still in the yellow zone. Now I'm going to take you to the blue zone. Okay. Aren't you happy again? Yeah. It just asked me to give him a default value. That's it. That's what he wants. He's a good thing. Now I'm going to take you to the blue zone instead of using a class. I'm just going to use an interface and then I don't need to. If it's an interface, it's a contract. I don't need to initialize that anymore. But look left and right on the right. I only have the cost. And on the left, I have interface here on the left and only the user translation on the right. See, I use an interface to type my object, but I don't overload the final JavaScript that is rendered. So the only thing I really did right here, I documented this documentation. Okay. I'm going to show you another example of documentation that you can do is to say I want the user to go to or a certain direction. Okay, so right away, you can see that is not happy because you just had a property like you will do in JavaScript. Let me just had that property quickly or. Well, the property you just had as an impact all the way the chain because people are using or they don't expect that property. But you just had that. And then in production boom, direction of whatever is undefined. Okay. But I want that direction here to come from and the name I can say a numeration. Let's say direction. Okay. So as you can see here, I had a numeration and then right away I have this magic happening here. This line that direct, and then I will just add left and then right, for example. Okay. So yeah, there is a one on one transition from me to something that looks like this. If you don't understand that part of the cut, it's okay is just they're using some closure to create a variable, and then they encapsulate the entire thing. And then that gives you a way to assign and left and right property on an object dynamically. So now here I can say this thing is a direction that it's a left. But I'm still having a problem here. So what I'm going to do just to add a direction property and then say this one is a direction is of type direction to just an in it's documentation here I'm expressing the fact that you can go left and right. I could have used an object cost object direction and then left and right that will have yield the same result. But see how you can make it much more appealing here. Just gonna say cost. You see what happened there? It's all disappeared. There is no more overload of JavaScript that you're going to give to your customers because that's the part your customer will use in their app. In the final app they run. But you in your cord. You express something to make the work of your team easier. That's the message I want to pass years. The fact that tab scripts is documentation. We good so far. So let me quickly go back here. So getting to log of transcript and I'm going to take something quickly here for you. So I have this function set value. When I say set value, I'm going to receive this value and I say if value VAR real value and the value here. So if I call it, can you all see this if I call set value and I do this and then I say set value to be. Yeah. Here. I actually need to say this. And then that will probably be much realistic. And then here I say, David, and then here I say number twelve. Guess what is happening here? What do you think is gonna be yield here on line nine. Yeah, that doesn't work. That won't work. So see, now we're already talking about the fact that Austin is going to be into play. Here is going to enter into play here. Right. So there is already kind of understanding JavaScript, but as well understanding the fact that are we going to enter here is this code is written in a sense like this can enter here. First line nine. Is it going to enter here? No. And then the two other cases we enter. But regardless, we're going to have undefined here and then TV and then twelve. Okay. But that I'm going to have to open the code source and then start making sense of what you're trying to do. I can make it much easier by saying value could be either a string or number C by doing those, these two already are solved. But how about this point? I can communicate via documentation that this part is sometimes optional. I'm just documenting my code, that's all I'm doing. Okay. So once you reach that part, there's some magic that's going to happen here. And then you can use a good left here that will make your life much easier. But if you do so you see the scope got to enter in play. And that's not top script. That is just raw JavaScript. Let me just move it here. Then it doesn't crash. And then I can set the value right here. Okay. Now it's not over because I still need to do something that looks like, what is the possible return value? Because if you give me a string or number, I can also have as return value, a string and the number. I'm just expressing what my cord is supposed to do. But here is the thing. The day I discovered what I'm about to show you, I discovered that in touch script, and I was like, There is no way I'm doing JavaScript again. I'm going to show you that line of code. I was here and I said value dot because I already said string or number. When I say value dot, I only get to string or value. Right. But then one step further, I realized that if I have a condition like this one and I can say type of value is equal, let's say string. Now, inside here. When I say value do that. At this moment, my brain just did. There is no way you're not doing transcript in your life just that because just with that, all the screen I've shown you function doesn't exist, and whatever disappeared entirely, some cases won't work entirely. But this gives you what I'm trying to show you. Okay, so I can go much further. I'm happy to talk about it right after. So what I'm saying here, tax script is the documentation tool. It is the documentation too. So the next question will be if you have a huge JavaScript project, how can you go from JavaScript to Tanscripts? There are three steps. Three. The first one is super easy. Just make it work. You know what I mean? Here you take you generate a TS config file TS config, which is the TypeScript configuration. And then you add set implicit any which is just a property in your TS config. You just put it at false. What does that mean? It means any JavaScript. It just makes sure that you're still in the yellow zone, right? That's it. That's all it does. It doesn't yell at you. The tax script is already there. So you're still in your JavaScript project, not tap script. Tab. Script is just behind watching everything at first. Then you rename all your JS file too. S or T. If you're using React and then React and all these tools, that's it. Don't force that on to your team. Just do this. They won't see it. They will see the TS thing, right? But for them, that won't really change in terms of the code they write every day. Right? That's one step, second one. Now be explicit. Don't turn the any instead of force. Put it. That true. You know what's going to happen? It will just put some red line between the things that don't have type. That's it. That's all it's going to do. Everything is still okay. You can put that on your team. They'll be okay. They would just be like we have new red flags. What is happening here? Then you tell them, let's just take all the type. The common types. Like if you're on a node project, just do NPM install act type node. Just do that. This is a common type. They're all known. Once they're India project, most of the red thing will just vanished because it will recognize that. No typing or it's there. That's it. Well, don't do that in two days just to do the first step. Then you wait three months. Then you do this part. Okay? And then you are typing for third party tools like the library you're using and stuff like that. You hire typing for that. Okay, now that part. If you leave that for a few months. I'm not kidding, because the third part is where you get into war. The third part is be strict. Means that you just go in the the TypeScript config file and then you put strict to true. So what does that mean? It means that your project isn't working anymore. It just means that now we're gonna have to type everything. You're gonna have to express every single line of code in your application. That's what I mean. Okay. I have a rep for you. I have a rep for you where I have those three steps. It's in the resource part, and you can just take the three steps. Okay with that, I hope that you'll be able to play with tax people. It a bit more. I'm going to be outside answering questions. If you want to drink TypeScript, I'd be here if you want to think TypeScript which react. I'm gonna help that script with views. I'm gonna help. I know those things. Touch with angular I'm not going to help because it's already there. So just go and do it and questions.