GitHub Copilot for JavaScript and TypeScript

[Music] hi and welcome to a new section co-pilot for JavaScript development well the important requirements for this new section A programming section is first of all for you to have node.js and mpm installed I won't show how to do this I'm sure that you're more than capable to install them and also you should have basic JavaScript or typescript knowledge what we will do inside this section we will see the assistance that we get from GitHub copilot into a more complex or interesting coding project the password Checker we will see how we can get assistance while we will write logic we will see how we can generate uh tests with the help of GitHub co-pilot in the end we'll also see the specialized assistance that we get from typescript and also we will see a practice session in which we will work with lists again some interesting Concepts that we will get uh in which we will get assistance from GitHub co-pilot and uh you will see you we will have many moments of thinking hey can GitHub co-pilot can do that yes it can do that let's get started let's now see the way co-pilot assist us at writing writing code with a simple example and I'm inside an empty directory I call this password Checker because this will be the basic application we will be working on inside this course so let's get started first of all we need a new file I will create a new file and I will call this password cheer. JS all right this is our new file and the GitHub co-pilot shortcut is control I and uh I will not do this I will just start to type my function so here I'll say export function and I will call this function check and as you can see co-pilot already gives me some assistance and uh it gives me a basic implementation of my uh code I will say right here check password like this with a password all right all right and now vs code will try to give me some uh basic implementation and uh it will tell me that hey I will simply return true if the password length is greater than eight again I don't want this implementation I want to have first of all a type of the type check of the password so here I will say and as you can see now co-pilot knows what I want it knows that first of all I want to make a check so I will accept this implementation so if our password is not of type tring here it says return false but I don't want to return false I simply want to throw an error so in case the password is invalid I will simply throw an error so here I'll say and uh now go pilot already knows what I want again it will tell me throw new error password must be a string I will accept this suggestion with uh Tab and now copilot has a very good understanding about how I want to implement my function so I simply don't want to return a Boolean value instead I want to some errors depending of the on the wrong state of the password so let's see if co-pilot knows what I want to do next I will simply press enter all right and uh it tells me that hey password length is less than eight return false well I will accept this but I will adjust it this a little and now copilot knows I want to throw a new error I will accept this let's see the suggestion we get further on and as you can see now copilot understood what I want as an implementation for my function it will give me the next uh uh condition and it will throw a new error so I will accept this and I will simply now it's simply a matter of accept te steps and you know enter and tab and now you can see co-pilot gives me some suggestions regarding the matching you know with the lower case let's see let's get a suggestion with an uppercase that's great and and also let's add a number all right I will accept this and also a special character all right that's great and the reason copilot was able to do this very fast is because this is a popular use case so on one side co-pilot is uh a powerful tool but on the other side my use case was very basic and also a PO popular uh use case you know in the co-pilot training code base all right this is our basic implementation that's great we have a check password which throws meaningful errors based on uh the wrong state of the password what's cool about uh GitHub co-pilot is that now I can also try to rewrite this function maybe I'm not happy with this implementation and I want a similar implementation but maybe without the regular Expressions let's see if copilot knows this and for sure copilot know knows this but uh what I want since I can simply tell copilot hey rewrite this function but I also want to keep this implementation so I will simply use the good old copy and paste so I will make a copy of this function and I will call this check password without regex all right and now I will ask Copilot with control I rewrite the function without regular Expressions let's see if copilot is smart enough to do this and yes as you can see it is well and what's very nice when I try to uh ask the rewrite function right here or to have a small modifications to my code is that I get a uh code DE view like uh you know this is view is familiar when you are working with the Source control and you see what's new or what's changed inside the new file this is also the view we get right here I like this implementation so I will accept it and that's great we also have a similar implementation but without regular Expressions Let's test these implementations in the next lecture and see the assistance that we get from co-pilot while writing tests before moving on to generate some tests for these functions let's also use copilot for some boring tasks like adding basic documentation you know this uh is a task I uh really don't like to do us usually let's use GitHub copilot and I will use GitHub copilot from the right click menu from vs code I will simply call generate docs for this function I will get some uh nice docs right here I will accept this and the same for the other function they should be similar because the logic is similar even if the implementation is uh different all right I will accept this now we have some uh professional looking uh documentation you know with this and also what I will surely use a lot with GitHub copilot is generate commit messages so now I inside the vs code Source control View and uh I will stage this uh change from the password Checker but I will simply I can simply say right here weip you know or stuff you know and uh I will I can add a more meaningful commit message only when I am finishing with this feature but I can let GitHub co-pilot do this for me and this way I will have some more meaningful commit messages all right this is not so meaningful but it's better than Whip or work or nothing oh I will use this message I will commit and uh synchronize my changes let's now really proceed to see the assistance that we get from co-pilot at writing tests in this lecture we will see how GitHub co-pilot assists us at writing tests and it will be a fun Journey first of all let's see what suggestions we get from a GitHub co-pilot I have asked it what can I use to test JavaScript code and it will give me some suggestions all right and I've made this question to illustrate a very important Point regarding GitHub co-pilot because it will give me the most popular CHS Frameworks to for testing JavaScript like just like mocha like Jasmine you know but it won't tell me that uh lately node has a building testing uh module itself so I don't need an external library for this and this not so popular option this is what I will use inside this uh lecture just to illustrate how GitHub copilot handles handles against not so popular or obvious choices I'm sure that uh it has a lot of uh examples with just and with mocha and with Jasmine for testing but I will want to write tests with the buildin node testing module you know just because everybody will have it installed by default if you are using a more recent version of uh nodejs and because lately I usually prefer just but write writing tests with a modern syntax is uh really a pain to configure I will not do this inside this course so I will write to I will try to write my tests first of all I will open my file and I have the option to generate tests so right here I will right click copilot and uh I will go to the option to generate tests and as you can see you will see is not something Perfect all right this will simply create a new file inside my uh code I will click create all right and I will accept this and now I have a new file inside my uh code base which is called password cheer. test.js it is like this you know and uh this is simply a testing uh option that uh usually uses uh the keywords for just or for mocha you know the most popular ones the describe the eat the expect you know but as I said I don't want to do this or if I would want to run this I will again Ask co-pilot how can I install just I don't want to illustrate this right here it will take a few precious minutes you can do it on your own if you want I want to use the building node module so these tests are all right but I want to use node test you know not the popular option so I will delete everything except the import all right and first of all I will import what I want from node test import all right like this and I want to import the describe and the test and I will also import assert you know I can ask GitHub co-pilot to write my tests but it won't know exactly it will give me a short starting of my function all right this is the good start I will close this parenthesis all right let's see if now it knows what I want well if it will offer again to write the whole function I won't I don't want this because I want a system under test so here I'll say system under test is my check password all right and now I want to test the first implementation test and I guess this is working or this is a valid test case this is is also important and a good practice always start with a simple message to see or a simple test to see if your test setup is working well we don't have any test setup right here so I will first initialize an mpm project right here I will call mpm init minus y of course I could have could have asked GitHub compile to do this and right here I will add a testing message right here I will say node minus minus test and this should be all right let's see if this is working I will clear this and call mpm test all right and we don't have we have an error because it says that we cannot use import statement outside of a module the good old JavaScript error well of course I can let's ask GitHub copilot what's the error right here and I told it that I'm getting this error while running my code let's see all right and I guess at some point yes the message is Meaningful you know this is the reason and it will ask me it will give me also a uh suggestion to add this type module in the script tag and right here I will add this type I will add this as a module and this should fix the problem all right again I have a problem you know this means that you also need to have some experience with JavaScript the problem right here is that I need to make this uh import specifically from a JavaScript function from a Javascript file and finally with this change the test worked just fine let's proceed into the next lecture and see how we can extend these tests with GitHub Copilot let's extend uh this testing Su it or better said let's create new tests for all the outcomes of our check password dump function and let's first of all I'm not happy with this test implementation because it will yes it will check if the test throws an error but it doesn't check for the error message and this test should check for the error message it will have the same outcome if we are passing a different or a wrong password so I want a a new test which also checks for the error message let's see if GitHub copilot is smart enough to do this and I will say right here I will create a new test function and I will say the test description throws an error if password is not a string and checks for the error message let's see if copilot is smart enough to do this and yes it gives us a nice solution not now it will tell us that it will make this check not with the error type but with a new error password must be a string also we can directly make this uh into a message you know Constructor so I think the better way to do this is to also have a point right here in which I can specify for the message like this and this test is more meaningful now again with shown GitHub co-pilot the basic structure of a test which concerns us so I've said I've given some meaningful context to GitHub copilot about the structure I want for my tests let me also format this file a little and now if I will simply click on enter GitHub copilot will give me again a meaningful test again I'm not happy with the way we are testing for the message so right here I will specify I want a message and yes the password must be at least eight characters let's see if GitHub copilot knows that I want a test with a message all right and yes it now give me will give me a taste with a meaningful message we can move on and move on from this point is simply a matter of uh enter and tab and sometime these tabs doesn't work as it's the case for me yes I need to also do some typing sorry my my job is uh still secure yes I want this implementation let me give me give me the assert yes I'm happy with this all right I also have the use case for a lowercase for a uppercase letter and finally we should have an use case for the special character or a number all right we also have this number and let's see the special character yes all right let's see if these tests that are generated are working all right they are working all just fine I'm really happy with this implementation but now the problem is that my manager has a problem with my uh implementation with the special characters implementation and says that uh we shouldn't our passwords shouldn't contain the exclamation mark you know just as a requirement for my function and again we will you know dive sideways in the implementation in the standard implementation and see how GitHub copilot knows what we want all right so inside our password Checker now that we have some tests we are able to write a new implementation which doesn't accept special characters right here so I want to change this regular expression to also not accept the exclamation mark so I will simply let's see if GitHub copilot knows this I uh don't know exactly how it will do this because it is not deterministic I will uh start inline chat and uh I will say right here I said right here rewrite this to not accept the exclamation mark let's see if it knows what I mean no it doesn't all right still it understood what I want but again it uh will just rewrites the regular expression so I don't want this so let's give it one more try with a more meaningful message for GitHub copilot so I simply select the regular expression and I will call GitHub copilot and finally when I used a very meaningful message for GitHub copilot to I told it to rewrite the expression to check for special characters and not accept the exclamation mark character in the end it knew what I wanted as you can see the change was really small but finally it knew what I wanted when I made the more clear prompt I will accept this change and now also comes the other fine part about this because we want now to test this and you know if I want test right here let's say if it will know what I mean all right and this is funny because it will give me a test for it does not throw an error if password meets all criteria but this is the exact condition which I didn't want it so I know my code base I can simply rewrite this test right here with a different special character and I also can write a test myself again with the condition that I want so throws an error if the a password contains all right let me delete this and let's see if it will be able to generate the test yes it it is able to generate the test you know this is the right implementation let's see if everything is all right and yes or the tests are passing so we saw in this lecture a more advanced prompting to GitHub copilot and we saw that yes it gives us great assistance at uh writing uh tests at writing lots of code but in the same time it is our job to really understand and master that code let's see some further assistance from uh GitHub co-pilot especially from the GitHub co-pilot chat functionality well and let's say that we want to add typescript or another library inside our project and I'm really new I mean I want to transition to typescript I don't know exactly how to do this so again I can simply ask GitHub co-pilot let me first clear this uh dialogue and ask I have asked it how can I add typescript to my project all right and uh it gave me the full responses and it gave me step by step what exactly I need to do first of all the first step we did before we already have a node project inside our project and then it tells us that we have to install mpm call mpm install typescript and then to create ATS config file well what's also cool about this is that I can simply use this at the end I have this uh review or summary of the commands which I need let's say that I only have to run this mpm install save Dev typescript so I have I will insert this into terminal all right it won't uh install this I will simply copy this and uh only use this right here I will paste this and wait a few moments while typescript installs all right it uh installed typescript and also we can call MPX TSC in it I will simply only call this and I will copy and paste it in the terminal and this will create a few files inside our project but as you can see in the source control entry we have a lot of changed files because this node modules entry is not added to any G ignore well again I will show you the solution that GitHub copilot gives us right here I have asked it what should be contained in theg ignore file for my project let's see what uh it needs all right it knows that it should contain the node modules folder let's wait a little and it gave me an example for a G ignore file for a nodejs project all right and let me create this by hand and then we will insert this with the GitHub copilot chat so here I will create a new file and I will call this dot get ignore all right I have opened this and now I can simply go to the chat view right here and insert it at cursor point right here the cursor is right here I can simply call insert at csor and it will simply insert all this containing part of the suggestion right here in my file if I save this simply then my uh Source control view will be a lot nicer all right let me commit this again let Let's uh let's copile let generate a a meaningful message for us that's great I will commit and sync our changes so I saw in this lecture some other ways GitHub copilot chat assists us at a JavaScript project let's now see how GitHub copilot assists us with typescript and there are a few nice uh suggestions that it can give us for for example I can have a constant let's say that I'm writing a simple uh test to test my uh types I he I say right here con John and uh as you can see GitHub copilot which will start to give me some suggestions since I'm in a file called employee. TS well let me make this an object I won't accept this and as soon as I'm trying to build an object again you can see how GitHub copilot gives us some great suggestions I will accept these all right and we can simply move on and uh we can accept and we can accept new suggestions right here for example it would give us give us a suggestions for an address maybe I want also a suggestion for a different address let me say right here work address and let's say if it will give it in the same in the same uh structure as before yes it will give me in the same structure that's uh that's great and maybe I want a different city right here and as you can see it Knows by default it knows the cities from India let's say that the work address in is in new dely I that's great enough for me let me also add further fields to my object yes a salary I don't want a bonus but maybe I want an email you know it uh the emails are always specific so it didn't give me a suggestion but it can further on give me suggestions like this a phone you know maybe some hobes you know we give me some hobbies and further on WE let's also give you him a get name function all right and it will return us the name nothing fancy until now nothing that we can do also ourselves maybe not so fast but still nothing spectacular what I really like about the GitHub copilot is that now we can also generate a type from this object so if I will select this and invoke GitHub copilot with control I I can say right here gener at a type for this object for this all right and yes it generated the right type I will accept this a new type and now I have a cool type for my employee it even added the type annotation for my constant that's great and we can again take things to the next level let's specify a type uh for a strict email string let's say that I want to generate a a type literal for my email string but I don't really remember how the type literals work in typ script I can simply ask GitHub copilot also I can um instruct it by using uh commments or I can simply say right here generate a type a template literal type for company emails or for emails let's see if it's smart enough to know and yes as you can see now it will know exactly what I want it even generated the right type for me we know you have we have a string at another string do another string and it generated the type and it also replaced the type inside our older type I will accept this this is great and now let's see if it's smart enough to find problems inside our code let's say that we have a typ of right here and now we will have a problem inside our code because it will tell us that this is not matching the type that we are doing let's see if GitHub copilot will assist us with this so I will try to fix using copilot let's see if uh it is smart enough to fix it yes of course it is smart enough and it knows that we are missing the at symbol right here I will accept this solution and everything is all right again we saw in this lecture an introduction to the assistance that we get from GitHub co-pilot for typescript types let's now make another exercise with JavaScript and typescript and see the system that we get from a co-pilot while working with lists and I will tell you it will be fun first for this I will first create a new file I will call call it just data. TS simple as that let's let's start with a uh basic structure of our uh data that we want I will use an employee good old employee data I would say right here interface employee like this just like we did before but let's add some basic uh data right here well I want a name I want a age and I want a salary which are the age and the salary are numbers very nice all right like this what's the problem the problem is that we already have another no problem I will say right here export interface employee that's great now let's create a simple sample data of employees and I will say right here con employees of type employee already GitHub copilot knows that I want a list of employees all right I will close this parenthesis and let's see if if it will give me some sample oh sample employees that's great it gave me some sample employees I will accept this all right and now that we have some sample employees things can get very interesting and also you know when writing tests or data to test my code it is always complicated to have some sample data there are libraries you know which generate data but now we have GitHub copilot that's great now let's Implement some functions let's say that we have a list of employees these are like this and let's now start to work with this list and create some functions that access this data and you will see GitHub copilot already kind of knows what we want for example I will say right here function get by name all right and already gith up copilot knows what I want or somewhat knows what I want or B better said I will say right here better naming would be find employee by name like this all right and it gave me the exact implementation it will uh use the find methods of arrays what happens if for example I'm not careful right here and I have this error I will say right here find employee find by name and this returns an employee well I have an error right here let's see if G GitHub copilot is smart enough to know where the error is it should be I will say right here quick fix fix using co-pilot and yes that's what I wanted to point out it gives us some okay some bad solution to this because it will tell us that hey we can simply return this or do a cast as employee like this this is a very bad solution I will discard this well the problem is with the function signature right here because we can return an employee or we can return undefined if of course no employees are found one solution to this would be to first of all generate some U documentation right here I will say please generate me some documentation all right and now let's try to quick fix this again yes still use me points out to use the as keyword I don't want that let's give it one more chance right here let me save the function the whole function the select it and ask I told it fix the without using the ass keyword let's see if uh it understood what I want all right and finally it understood what I want it will update my uh return type to be employee or undefined finally it no or gray all right and it fixed our error very nice let's try to write an implementation that will return a list of employees which have a bigger salary than an argument that we want to pass so here I'll say function I will say right here filter employees by age filter but I want by let me delete this by salary all right and again GitHub copilot is already smart enough to know that it must use the filter method of uh array and it write me the right implementation to do this this will return all the employees which have a salary bigger than the argument we are are passing by again we can uh take things to the next level I will say right here function filter employees by age and salary let's see if it knows it like this it should know it all right and basically this is the implementation it will return back all the employees which have a age bigger than our argument and a salary bigger than our argument that's great also let's see if it knows to return all the names of our employees so so here I'll say function get all employees names all right and it really knew what I wanted and it knew that uh for this the easiest solution would be to use the map function for JavaScript let's see if it knows how to use the reduce function so here I'll say function get Max salary let's see if it knows all right and it somehow did it but I want to use the reduce function let's see if it knows Implement with reduce let's say if it knows like this all right and I don't like this in in one line let's see if it knows it all right finally understood what I wanted even if it this isn't the cleanest code or the easiest to read it did it in one line and uh this way it returns as the max salary of our employees let's see if now itth knows how to use the same things syntax in order to maybe return the average salary so here I'll say function get average salary and yes it knows to use a similar approach with the reduce function and it will this way it will give us the average salary well we saw a few ways in which we can use array functions in uh type script and JavaScript with the assistance of GitHub copilot maybe a nice project for you would be to write your own data structure and your own uh functions and then with this instance of GitHub copilot write some tests

Channel: Concise Developer

Views: 764

Keywords:

Id: bpZCjQfOQzc

Length: 35min 42sec (2142 seconds)

Published: Thu Jan 04 2024