TYPESCRIPT: How I Learned To Stop Worrying And Trust The Compiler

I made a talk to you about typescript and specifically why I'm excited about typescript and the reason I'm so excited is because I used to be sort of against typescript I used to be pretty much against anything that wasn't like vanilla JavaScript when you try to write JavaScript but a little bit less than a year ago we started pouring the slack desktop application which runs on electron and highly over to typescript and we had a few a few reasons for that and want to talk a little bit about what we liked what we didn't like because when we started on this journey I couldn't really find all that much information about what was good and what was bad about it from people who actually tried to port an application over you found a few people like talking very high-level about you know starting with a new project but how do you actually port an existing application over and the the reason this is interesting is because I always want to motivate this a little bit right like why do we care about improving JavaScript as it is I actually think that javascript is a lot more popular than people realize or no js' and maybe more popular than people in this room realized and my two favorite examples for that are always the Nvidia drivers and the Adobe Creative Suite both running nodejs quick show of hands who knew yeah not that many people so if you ever come across any Windows computer that has Nvidia drivers on it those computers are running nodejs if you just open up any application in the Creative Suite like Photoshop or InDesign you're starting nodejs and of course if you're running any electron implication you know something like Visual Studio code slack atom github desktop now the list goes on forever you're running ojs and in those scenarios and that's the scenario I care about and the scenario is JavaScript is interfacing with native node modules and those native node modules are likely making system calls at some point they're interacting with the operating system so in my world and the world in which I write JavaScript if I mess up it's usually not a console error thing and usually ends up summer and c++ blows up and then my application is crashed and because I'm running node on my customers machine right we're shipping the whole thing to customers it blows up on the customers machine which is great a terrible so on it's entirely the slug experience people want so we got to make sure that our code is structurally sound and there's a there's a few solutions to making sure your coda structurally sounds I'm sure many of you have worked with giant vanilla JavaScript code bases the most obvious solution to checking out what code does is to just read the source code right if you're using something like request and you're using your request or get you wondering how that works you could just like try to find the source code for it just grab for it figure out what get does depending on how many dependencies you have this might be difficult because you actually got bucks to fix and features to fix so just constantly reading all your dependencies might be somewhat tedious and sort of like defeats the point of using dependencies right you ideally just want to like know what code does so then people come along and write documentation as they should but the trouble with J's talk Aeneas talk internal documentation is that you need to trust your fellow developer your fellow developer needs to like document stuff correctly and also needs to write code that is correct and that is increasingly difficult I at least feel so if you've ever come across any documentation that was slightly out of date that is my biggest nightmare right stuff is slightly out of just by like a month breaks my application that's pretty terrible for me so and summary both methods don't really work for me right they didn't really cut it so long comes typescript obviously type goodness types we're not gonna really talk about that for too much time but I want to quickly touch upon a few things that are really liked about typescript the first one is that it's a superset of JavaScript meaning that javascript is valid typescript that was a really big deal I don't think enough people talk about that it's a really big deal that you can just like start coding typescript throw in all this javascript and don't really have to worry about anything it's just valid it just works anything you can do in JavaScript you can do in typescript and you don't really need to turn anything into typescript in order to run the typescript compiler against it something I'm gonna talk about a little bit in a minute and it's not just that typescript accepts JavaScript just fine it's also that typescript puts out normal JavaScript there's no type script that runs on runtime it has a few like bubble-like features where does some pretty cool polyfills but in general typescript doesn't really do anything in runtime which is important to me because I don't really want some magic black box that change is my code at runtime and then two things that were really important to us as a team that is cross-platform right we built an application for Windows Linux and Mac OS typescript had excellent support for all the editors so if you you know I want to recommend a single editor but whenever you're like next to a shouting match about which editor is the best doesn't matter trafficking supports it right and like if you really want to run the operating system known as Emacs sure right type kit will be there the same is true for the NPM world and there's an application that depends heavily on modules that you find on NPM in that we use integration with NPM is a really really important point and I feel like at this point in time if a module has definitions type definitions available they're likely in typescript the other interesting part is that even if a module isn't written in typescript of which there of course many it's very likely that the community has come in and written type definitions for it we have live on something north of 3000 type definitions but even if all those things aren't like the case and you're using some obscure module that somebody wrote ten years ago and it doesn't have type definitions available typescript is doing a really good job of dealing with those modules so with that said I think I want to like very quickly jump in and just like show a second of typescript just so we also armed what the same thing and then I'm gonna talk a little bit about our experience dealing with typescript so I get this wonderful piece of code here it's currently just normal JavaScript right and we can study the code but we don't really know what it does right we can just type anything and our editor notice that there is a thing called sort people but that's about it I can right now write anything here and you know who knows what it's going on because in the end of stress or JavaScript and if it blows up it's gonna do so at runtime between now and running it there's nothing that's going to verify that this code is correct right and the interesting part is that if I want to turn this into typescript which was the case for the stack application I can just start by renaming the file and in the beginning nothing really happens because javascript is relative script and this is fine and if you're looking at like 300 files and you've got you know bugs to fix and features to ship eventually this is amazing this is fantastic if you talk briefly about CoffeeScript I don't really have many opinions about CoffeeScript but the whole notion that CoffeeScript was so drastically different from JavaScript was sort of always a non-starter for me because I never really stopped with nothing right there's always like something that I'm used to and the other thing that we're noticing is that typescript is immediately trying to help me a little bit um if you can't see it that's like a little arrow down here but it's saying you can't just call this with the five because you're setting the input right here the parameter to an array so we're gonna assume that you want an array right and it's immediately saying hey you probably can't do that just so you know and even if I have like little misspellings in my code right right now I don't but with normal JavaScript this would be a thing that is like really easy to miss right here and I'm gonna show you in a second how types critters gonna find that so this by itself already runs this is fine right and if I look at something like like this result right here typescript already knows that this is an array I didn't really have to do anything so if I want to check out what I can do with the result now typescript already knows it knows all the methods and knows all those methods work right with all the various overloads and if we look at the definitions for that we can actually see what that looks like typescript has this concept of definition files and it ships with quite a few quite a few big ones and this one is just the one for normal JavaScript just normal boring es6 it's like a casual 21 thousand lines of definitions which right now if you're a JavaScript developer you sort of expected you just know this right like you'd expect it to know what kind of methods an array has available and how you use them you know how they all work together and what the overloads are so that's something that's just supposed to be in your head but right now at least for me as soon as I turned this into touch good file I don't really need to because my editor already knows and this is by the way not Visual Studio code specific this works with any editor because it just hypes group in the back that has this information can service it to any editor and the other thing is now that I turned this into typescript file I can initialize this project as a typescript project which religious means that we have this T is config right here which specifies what our target is right now is five and then I can start the whole compiler in watch mode which is exactly what you would expect it to be it will just try to take this code and turn it into something useful something along the lines of JavaScript and if I open up this javascript file let me just do this like side by side the interesting part here is that this JavaScript doesn't really do anything specific right this is like sort of the JavaScript I would have written if I didn't have time script and this is for me at least a really really big deal this notion that there is no black magic it's not like I open up this file and I have no idea what it's coming from and with so many compiled quote/unquote compiled JavaScript files very often to open them up and like I have no idea if this is good code or not because that's all on one line it looks terrible this really helps right but let's keep going a little bit we can now declare our attempt a little right I can just say hey this one people seems to be starting some some type of person let me just get rid of this I can just say what if we went ahead and defined an interface and to face person and this person interface has a name and it has an age which is a number right and then you can say this input is actually an array of person there we go now I can save this and one thing happens immediately right now it can't compile this file because as you remember just like misspelled this local compare and the reason it can't compile right now is because typescript now has like this nested information about my types all right I'm doing the sort here meaning that typescript will show you this in the autocomplete already knows what kind of information that can expect right and notice that both a and B are person and it knows what kind of properties are available on a person which is might notice that name is a string and which is why I noticed that I have locale compared with an e available to me but not the one without and that's a mistake that at least for me as a JavaScript developer in the past was really common like this happened to me all the time right like these little mini typos that I would eventually find at runtime or like unit testing but I would certainly not find them in my editor and I didn't have the confidence right now in my editor that this is valid code so that's pretty cool but the other thing that's pretty cool is that if you look at this transcript right here things still haven't changed right the types of just being stripped out they're just not there and of course you can sort of go beyond that a little bit right if you want to you can just say hey I want my type script to compile my JavaScript a little bit and in fact you can see that I'm using an arrow function right here and sort that is turns into a function here right but if I just change that real quick from E is 5 to es6 I'm going to go ahead and just like that we have the arrow function back right and I could define a thing like I could say I don't know class person manager god knows what there's a strike I could just say a constructor would say I don't know this hello equals foo this is not really an out I'm gonna say hello it's a string right here cool and you can now see that we basically have some pretty simple JavaScript but if I go back into my TSP fake and change that to es 5 typescript will again roughly write the JavaScript I would have written in their target language anyway it's pretty neat that's pretty cool that is basically the demo portion of this presentation it's basically to point out that typescript is really lightweight just what I like about it but at the same time really strong and extensible if I want to have some cool features I want to use async await it can do that if I want to have classes with public and private properties and can do that and if I want to require some things that are not my own stuff I can also do that right like the typical example as always the pass a cons for sorry Const the quest equals require request curly doesn't know that this is an old thing right because I don't have a package so Jason or no types installed but I could just go ahead and if I had internet right now I could just say NPM install types request and that would immediately fix the issue and that is the case for like pretty much anything that is available NPM so demo done talking a little bit about more what that means for us so what that means for us right so the first thing is that we could just turn on on our giant JavaScript code base we could just turn on the typescript compiler I didn t have to do anything else right we just like threw it in there more like well I guess we're gonna run this now every single time we save code and it really found like a few little errors which was cool terrifying but it was cool you know because in those places where typescript can sort of verify some of the basic properties of your code where it like knows hey this thing should have a property called like hello but you actually misspelled that I already found all these like little tiny structural errors that really only happen if you encapsulate like 50 different promises and they all return something else and at some point somebody forgot what the original object would like and like a tiny mistake and then somebody else copied that and you all roughly know the story right so we immediately turned it on found some tiny bugs right away didn't even do anything yet right and then our initial plan was that we would just start typing new files in typescript that was the general idea we wanted to just like try this on new files and then see how it goes and because we had slack we really strongly believe in like checking our code over and over and over again and basically by the time we're done we like throw it all away and try it again right this all iterative gentleman we were expecting that over time typescript will just take over but what happens almost right away is that working with JavaScript files felt a little bit dirty like immediately right happens very quickly and one thing I personally I think my whole team really underestimated is the power of autocomplete everyone who ever worked in Eclipse and visual studio will be like you know duh of course it's cool but it's really quite powerful to not have to like check what is available on an object every single time it's like really nice right because every now and then you're dropped into a project and it's using I don't know not your favorite front-end framework but something else it knows tried skip knows right and in the case for me for instance like I recently started opt-in Khoa and I didn't open the documentation a single time because I didn't have to not because I knew anything about color but because typescript did and that was good enough right and that's pretty amazing it's pretty outstanding so right away as soon as we open up a javascript file were just like grows I don't know anything about this gotta open up the documentation and if akuma code I don't really know anything about it so immediately you have this like very quick incentive where every single time you touched another JavaScript father like I'm just gonna quickly pour this over to type so it's gonna take a minute and if you just go with like the basic types and you don't add any of the super fancy features that is very simple to do it takes you a minute so what happened is that instead of like slowly waiting years for the whole code base so like turn into typescript it took a few months and at some point I became very quickly we celebrated the last jobs could file to be dead and immediately one was typescript from the whole codebase a pretty cool moment and then the other thing is that if you run typescript at commit time you gain this like giant amount of confidence that you didn't have before I hope that we're all using some kind of Jesus so many people welcome I can barely see anything because the lights are so bright I just see like this stream of people coming in so anyway committing with confidence um if you're the the the notion hopefully some of you are using slack I hope so because that's a company I work for but if some of you are using slack the idea that you can't use slack as what keeps me up at night right that is my fear my fear is that I wake up one morning and what somebody's like oh did you know that nobody could use slack last night that is like my biggest fear so being able to run typescript every single time I commit anything and knowing that my code is structurally sound it might still be garbage code right but at least it's structurally sound all the things that call each other sort of fit together it's like Lego you can build all kinds of turrets with Lego but at least think I'm not gonna fall apart right which is a good feeling that is extremely powerful which also brings me to my first downside there's a thing called TS lint and I'm very happy for the people that work emptiest lint because we didn't work on it and it's pretty good but it doesn't even come close to the amazingness this is limbed Uslan can do all kinds of magical things I don't know if any of you are using it but whatever dumb idea you might have in your team about a thing you want to enforce these lint will do it for you right which is amazing right it's like if you if you want like certain variables that declare certain things always would be like prepended with a certain emoji year's Lynde will do that ts linville not Tizen is like pretty bare-bones and it uses like all the ESL and basic features but extending it is a little bit harder so look as we like poured it some things over we had to let go of some eastland configurations and just try to find like ways around it but it was still pretty good and then and I think this is honestly the biggest downside of typescript is so I used to be a native developer and my whole team's filled with native developers but these days especially when you try to hire for JavaScript is ich ins very often you will encounter people who have never seen a typed language they have never worked in Visual Studio and never worked in eclipse they have never written anything like C++ and the whole notion of some of the more advanced features of typescript you know things like interfaces and types that extend themselves generics union types that kind of stuff this doesn't mean anything to you right now it's because you work in JavaScript you didn't have to and that's great and perfect but this can mean that we are basically paying this little tax off whenever we want to introduce a more junior developer a more JavaScript focus developer into our code base we sort of need to like educate them about these two basic things at these like basic what is an interface what is a union type what does it mean if there's like it takes tens K right and every now and then we come up with these x2 / cool constructs or things we can do in typescript and then the response is that it's really cool but also unreadable what nobody knows what that does which is you know one of the issues like we all really like jobs good because it's so lightweight and so quick and so cool and if you use typescript if it's fullest extent it has like all this fluff around it which I enjoy because it keeps me confident and sleeping sound at night but if you want to want to have your code available for a bunch of people out there that you hope are gonna contribute to your code it's a little bit harder right which is why I don't know and then you will still see me in like currently building a new project in the node foundation called the electron installer and for that we using standard is mostly because I think it's easier for everyone to contribute and we don't have to you don't need to learn anything in order to then jump into the code base but right now if you want to work on the slack desktop app you first get a basic course and you know typed languages and what union types are just kind of nice so in summary talk was pretty short but that's already it if you have any questions you can find me at Felix dot fun which is by the way great he LD recommend that everybody goes and buys adult fun domain it is extremely cheap and if you have a complicated last name like me it is amazing okay we got about three minutes for questions if anyone has any

Channel: Coding Tech

Views: 28,743

Keywords: typescript, javascript, desktop apps, app development

Id: mgTenYbX2Kw

Length: 20min 18sec (1218 seconds)

Published: Tue Jan 16 2018