How to Inject TypeScript Into Existing Projects

all right well welcome everybody today number two have you got a love front end I'm very happy to be here and thank you for coming to to to my talk my name is John and I'm from Intuit and originally I was an investment guy I wasn't a tech guy I worked as an investment analyst for a little while I decided that the technology that we use the software that we use for investments was way more fun so I went back to school studied a little bit of computer science came out I got a job as a web engineer in a small start-up in tel-aviv and then I moved on to intuit which is a financial technology company a financial software company so I'm happily exactly where I want to be and great so into it offers a lot of products for people who are trying to manage their finances whether you're a person an individual a family or you're a small business or a self-employed company and then we have lots of products and I'm happy to help people manage their finances better as a web engineer and creating awesome experiences that make it easy for them to manage their finances so what are we going to talk about quickly Phil what typescript in existing JavaScript that's 0 because of obvious reasons no it's not he says I'm not gonna touch too much that's what we're talking about and do why why is this an important thing because we have to stop thinking that JavaScript anti script are enemies they're actually a story of coexistence and hopefully I'll be able to convince you too that the who Metallica fans anyone nice not enough but ok who is this going to help who is this ultimately for why why can't a script help solve some problems for you for some people and the where where are we gonna start attacking this subject in in our projects and then the help alright so let's get started the why let's end these religious wars for once and for all a show of hands please who has tried typescript that's actually a very good amount have you used it in production have you pushed it to production nice who has had a negative experience I also had some negative experience who had positive experience awesome this is a very good very good crowd now the let's get let's get a few things straight here this is a graph I'm maybe it's a bit too small for the people at the back but this is a github graph on the most popular languages per project and I'll zoom in to the top right and JavaScript is right there it is the most popular language on github right now but typescript is right right very very close to it it's right up there with go in fact it's a bit more popular than go and this is not to be overlooked I understand that our keynote speaker Kyle Simpson made a few good points yesterday saying maybe typescript does not solve his problems and the way he wants them solved and I can respect that I get that but this cannot be overlooked this is a lot of popularity this is a lot of demand this might you know this might mean something because I don't know if you guys saw in his talk yesterday and his slides he showed a snippet of what es4 would have looked like he has four never made it to production but it kind of looks like time so because is like a strongly typed version so es4 I read somewhere that was it never made it to the standards because Microsoft was kind of being pushy about it and some other people didn't like it and in the end typescript made its own ps4 into the typescript project so now we have it and we can use it and it's very popular and just a note on that if you know typescript you know JavaScript don't pretend that tasks using javascript are completely different languages they are the same language you phenotypes but you should know JavaScript don't think of it as a completely new language and if you know JavaScript you know typescript you're just a bit rusty alright the learning curve is very small now you wrote some JavaScript code and walks into a bar whenever and at the back sits this error who's had this error before or the other one some object dots get ID is not a function yeah okay that's a very good amount so it's strong but it's not a Jedi yet so our JavaScript and typescript friends are the enemies are they frenemies no they're friends typescript is like a toolkit for JavaScript it's some sort of a superset they market themselves as a superset of JavaScript it's a guardian or a champion it's an add-on it's something that helps you write better JavaScript right kind of looks like that nobody messes with that you know what I mean by the way who was excited for the season I can't wait did you guys see Jimmy Fallon Aria said something yeah the April Fool's joke okay great Game of Thrones okay anyway JavaScript in typescript are a story of coexistence they're not a separation they should be used together until tc39 or the echo script council accepts that strongly typing is an option for echo script they should be used together cool cool now let's talk about the who-who is this going to help how can't our script help improve existing JavaScript code now obviously it's gonna help our customers right because we have type safety probably better code in production but the customer doesn't care they're not gonna use your app more because you use typescript in it they don't even know right but more importantly it's important for the team typescript is an automatic boost in documentation isn't it it helps you design your code better and it is a definition API definition for your entire project now I'm gonna show you a little code snippet a little later actually let's let's jump to that alright this is something that we're working on right now my team and I on my team half of my team is here we're working on this and think about a function called submit bank payment right and the parameters bank details and invoice details and some configurations I don't know oh here we go configuration is some options now we started getting lots of production errors about like that that the bank object is not correct in all cases why because bank payments are done like we are writing this code but other client teams might be using our code and passing their own variables own parameters into this so now let's say you're the new employee the new engineer and you have to come in and write this function is valid bank details or there is valid invoice details how are you even supposed to know what a bank object should look like like how are you even supposed to know that's what it's supposed to be because I know an invoice looks like that it's a huge object with lots of keys and values some of them I remember when I first started into it we were working with bills and receipts and there is a connection for example every bill has multiple receipts there's an association that comes from the back end but when I tried to write a typescript definition for it it was huge it was such a big learning curve and I said how did the last team work on this wall because they wrote the server side and the client side they know they know exactly what the object looks like they know the schema so it was easy for them but what about the new guy what about the the other team that's gonna take over your project and in large organizations this is a very typical story you don't always end up at the same team that you're working on the same project that you're working on you hire new engineers you hire junior engineers who may not have the the sort of the production experience that you've had right so always think of the new guy am i clear on this like it's so important to be able to release think about the situation where your server team produces type definitions for what an invoice or a bank account looks like that's the dream then the client-side engineer can take those type definitions and plug them into the project and work with them now you know exactly what what a schema looks like what the bank or invoice schema looks like all right so now where do we start attacking this all right so there are lots of opinions on how should we start writing typescript I I know a lot of teams that are trying to convert their entire projects to typescript and that requires major refactoring and sometimes it's not easy to do sometimes it's not good to do all right let's pick a good spot to enter and then start from there let me give you an example think about a let's say a reacts project hypothetical reacts project where you have three components three react components these are the ones that are facing the user the most out facing components and they depend on some shared component they can be extending this class they could be using this class as a higher-order component and this shared component utilizes some module that you wrote maybe some logic code or some functional some pure functions that run some logic and an NPM library maybe this is a bit abstract so let me sort of take this down to the real world this is what I'm working on right now this is a bank form for the user all right as you can see every single input has some sort of a label and it has an input field right so it's it's very calm it's very typical for teams like us to sort of like have one reused component called like a labeled input and then the routing number component will extend that so we'll the account number component right and I'll add a little twist to this they also have to make sure that validations are done correctly and we're not using standard HTML validations we're using our custom validations because of styling reasons or logic all right so so what would that chart look like we have three components account number routing number and account holders name and they all extend to this class called validated labeled input and the validated labeled input depends on maybe show error it's a utility function that we wrote and it's gonna determine whether this current input value is validated correctly or is it whether it's wrong and what kind of message to show and it's internationalized and we're using an NPM called validation some bank validation NPM it doesn't matter it's hypothetical so let's go back to the original chart this is what a very typical react component looks like at least ours the the validated labeled inputs right so where do we start attacking word which one do we convert the type script first always start at the deep end of the dependency graph the code that has the most clients or the code that is reused the most should be converted first all right so phase one the utility module and the NPM library if you start here then you're gonna see a huge boost in your type safety and it's gonna be easier to convert the next phase and the next phase is the shared component now the shared component can utilize the type safety that it depends on for free code that it depends on for example the utility module and the NPM library now it's easier to convert the shared component which is the validated labeled input into type script and after that maybe to convert the the most outward facing components to type script you don't have to it's maybe because it doesn't have clients it's easy enough right JavaScript and test script can coexist remember don't let your OCD take over and convert everything to test you do not have to in fact I'm gonna make another claim I prefer and I urge that you don't write unit tests in typescript because let's say I have my utility module write this utility module is a pure function that doesn't have any side effects it takes some values and it spits out some validation error this routing number is invalid or something like that right now what if this utility module gets reused by another team they don't know what the functions signature what if they send and no right I want a unit test that what if I send a null into this into this function does it behave correctly well typescript unit tests will never never let you pass null into that function unless you start doing as any as any as any as any you guys know what I'm talking about right that's not useful I'm urging you to write unit tests in JavaScript because it's like a dumber version of user using that function or whatever it is that you're testing so I urge you guys not to convert everything to typescript all right I know it's not a very type scripting thing to say but like I urge you guys to remember we are JavaScript if we start moving away from JavaScript ifs one day typescript team decides that they're not following the Ekman script conventions if they say if they start releasing features that are not in JavaScript or they're never gonna be in JavaScript then maybe we go back to what kyle simpson is saying about how the machine javascript or all of these spin-offs of javascript are starting to diverge and we're losing our open community I agree with him the typescript team always talks about how they release echo scripts standards a couple of weeks later in their nightly releases this is very important we are JavaScript okay we're just doing it a bit more safely oh what about the NPM library right because nobody's gonna go into their node modules directory and change some code into that case right I'm sure all of you know they have typescript don't worry most of the NPM libraries these days are actually they either are written in typescript or they provide type definition in the @ types collection all right so this is our entry point to recap go at the deep end of the dependent dependency graph convert those first if you'd like and then move on to the the less depend the less depending components and convert them it gets much easier anyway all right the hell and I urge you guys to sort of pull out your labs s if you want and try this if you guys have never used these things we're gonna go in phases phase number one always install the type definitions of the NPM libraries that you use all right if you do this it's typescript enough trust me and we do this in our team all the time and it really helps us let me give you an example let's say you have a JavaScript project okay and it uses react it has react Dom and it uses a credit card validator library card called card validator all right and I believe this is important by the way the ide that we're seeing here is Visual Studio code in Visual Studio code if I hover over the render function of react it says loading okay now I don't know what the render function signature is I know most of us know react a little bit or angular at least like angular angular is written in typescript so that's a different story but we know what the react render react Dom render does but take this as a point as to we don't know what the function signature is if this wasn't react Dom it was if it were a more obscure library wouldn't we wouldn't know what this function signature would look like so oh by the way this is IntelliJ same store in IntelliJ it just says that it's a function now let's do this npm install save dev types of reactant types of react dom now what happens if I go back to my IDE I get the function signature and actually I didn't even know that there is a call back at the as a third parameter did you guys know that I didn't know that it's like okay step number two maintain definition files so typescript in general is like TS files yes you write type script like that however you can write JavaScript like most NPM libraries do you can write in JavaScript and write a definition type script file right next to it then you don't have to touch your JavaScript but you can still define what the function signature or that or that module does or what the schemas are and all of that and this will really help you because of the power of your IDE okay so you write JavaScript files you write definition files there is no compilation you know transpilation you're still writing good old JavaScript but your IDE knows let's see an example this is a library module that I wrote called utils as you can see it's JavaScript and I'm using an NPM library in here called the card validator and I'm extracting some some utility functions that come with this NPM and I'm gonna write my version of the validate okay I want the client code to send some values to me and I'm going to validate them and then I'm gonna figure out what was wrong with the card number or the CVV number or the expiration date and I'm gonna return internationalized error messages back to the user via a callback alright now this is what a definition file would look like i have a function called validate you can send an ID as a string and the value as a string and then send a callback of type validation callback what does that mean I define it in line seven it's a function that takes errors which is a validation error array and it doesn't return anything it's void it's a closure for the client code to be able to access all the validation errors or the validation error messages which are now internationalized what is a validation error type it's a string now this could turn into an enum one day it can be an object it doesn't matter what it is but as long as it's defined it's good why now I go to my client code that uses this validate function and I hover over it and I see the exact definition of it right here now I didn't use real types I didn't convert anything I didn't transpile or compile but look at the power you're giving the developer I don't know if you guys have experience sort of like new engineers coming onto your coming to your team but it's very difficult to for them to take their first task and understand exactly how the project works they're gonna try and spend a couple of weeks just trying to understand your architecture and now you're giving them a task to do and they don't even know the function signature sure go ahead [Music] that's a very good if I don't have this project open right now if you're willing to try something like this that would be great I can share my get I'm pretty sure it will autocomplete and if not it'll give you like squiggly if you make some if you make a mistake it'll give you like a squiggly underline saying this doesn't fit because the IDs are powerful enough to know type definitions and show even if you're working on a JavaScript file alright right I had to add this it's like magic all right third level okay your salt on that you're sold on this it's good typescript definitions are working well but now we actually want to do some type scripts okay so the the first level of sort of writing type scripts in your project I say go with the Babel type scripts preset your writing type script files okay and you're letting Babel transpile it's not the actual typescript compiler okay and we'll talk about why this is a good stepping stone to move into the tax code compiler okay Babel typescript preset is relatively new and I heard about it a few months ago and it doesn't actually compile typescript it removes typescript syntax which allows the rest of the Babel transpiler transpilers to take it and put it in your bundle so let's see this in action first we need to add texture to the project so npm install typescript you create a TS config file alright by running this command and the TS config file I'm not gonna go over this it's basically a bunch of configurations for your task and compiler to look at your project how to perceive your project it has some configurations on compilation you can specify which what kind of target you want it to be if you know you have to be backwards compatible you might want to choose target as es5 and things like that which files they include which files to exclude like node modules and how to deal with existing JavaScript in your project it's actually pretty handy and it also lets you do experimental type script features such as decorators alright so we've created a type script configuration file great now we officially have a type scripts project now create the utils the same module that I had about the validation function with the callback created in TS make sure you've deleted the utils J s and DTS while I was debugging I spent 20 minutes on trying to understand why it wasn't working that's because I wrote the utils TS but I didn't remove the utils J s and the DTS alright so this is what it looks like it's kind of like a merge of the utils J s and the definition file I'm importing all the functions that I need from the card validator NPM I define what a validation error looks like and I define what a callback that uses it looks like and then I export the actual validate function I cut out the rest of this you you guys basically understand it's a function that takes a string a value as ID a value of string and a callback which is of type validate callback it'll do its work and then it's going to invoke the callback function with the found errors right now I go back to my client code which is form input and instead of importing the utils I'm going to import utility s this may not be necessary anymore the babble compilers are updating themselves so that you don't have to maybe add the TS extension but will it compile who says yes well it won't because can't resolve utils in my project all right that's correct because we need to tell webpack to recognize typescript files first alright so let's do that this is what the web pack looks like now it's gonna look like this cool I'll let you guys yeah sorry how about now well it's not gonna compile because we don't know how to read typescript files yet we're talking about babel typescript reset but i didn't show you guys how to add that first so let's do that NPM install babel preset typescript it's awesome and in your babel RC file or babel configuration file you add the babel typescript to the array of presets how about now well it works it's awesome this is Amy Wambach she's great alright nice so we have a type script project and it's working and we have injected some decent touch script into our project but are we getting any type scripts help which is compilation errors if we make a mistake let's trigger an error and see it alright we know that there is this function that comes from the card validator npm and it's supposed to take value of type string and what if i do what if I just pass a boolean in there right first of all my IDE knows because it has type definition that's and that's powerful enough right but what about the compilation it worked why because remember Babel preset type scripts does not compile but it rather removes the typescript syntax so if you want strict type security which is the ultimate typescript feature then you can do one of two things one start another shell process and run TSC which is the typescript compiler and watch your errors there while you're using the babel presets to bundle you can use another process to see your compilation errors or you can do the ultimate thing which is the last stage of our how to inject typescript into your existing project which is the typescript compiler this is just writing TS files or definition files and this is the real deal so let's take our project that we've worked on on step 3 and turn it into an actual type script project now most of the work was done currently we have our babel configurations look like this we have the babel preset type script and our web pack looks like that first thing that we're going to do is relieve babel of its duties we don't need babel for type script anymore the second thing is we're going to add another loader for web pack so that it can recognize and compile typescript and add it into our bundle i like awesome type script loader there is also TS loader they're both greats the only reason why i prefer to awesome type script loader so far was that its source maps were a bit better it was easier to debug but maybe TS loader caught up already I'm really not trying to pick sides here so now the web pack configuration looks like this we're gonna take the typescript extensions out of the babel loader and we're gonna put it into another clause that's going to use awesome typescript loader so basically web pack is going to use the awesome typescript loader if it comes across a type script file great it's working immediately I didn't have to do anything do we have type security now as you know this is what I tried to do I tried to pass a I try to pass a boolean into a function that accepts a string and bam I get an error immediately alright so to recap don't think of typescript as another language you are using javascript in the end and stick to that and always bet on JavaScript just like kyle simpson said yesterday make sure that we let's make sure that we understand that this is a toolkit and we need to use it for our customers but more so we need to use it for our teammates we need to use it for the next team to take on this project or we need to use it so that if we are writing some code that other clients are going to use other client teams are going to use we're helping them out by boosting our documentation but by boosting our api's by using typescript all right and if you want if you're sold on this idea and if you want to start using there are some levels in which you can do it there are some things that you can do right now you can do this right now at the break step number one install type definitions from NPM for all the libraries that you're using and push that to production it's fine this doesn't affect your code anyway the second thing that you might want to do is maintain definition files for your existing JavaScript file modules and this helps you by looking at your by making your IDE much more powerful and giving you warnings and errors on things that you may not have caught because we let's face it where we all go through refactoring and when you go through refactoring sometimes you miss things third level is using this awesome handy thing from Babel called the Babel type script preset where you're writing typescript but but Pat Babel will try and spoil that for you by removing the typescript syntax and in the end if you want to do the real thing you include a typescript compiler in your bundling process and you have real time script in production and that's it thanks very very much

Channel: Coding Tech

Views: 12,994

Rating: 4.757576 out of 5

Keywords: typescript, javascript, js, front-end, software development

Id: -htA_n4P7gQ

Length: 29min 52sec (1792 seconds)

Published: Mon Jul 29 2019