Phil Choi demonstrates a small TypeScript utility he and his mentee built to auto-generate .ts type definitions from large API JSON responses (example: RandomUser.me). He walks through the functions (typeGetter, writeTypesFile, makeTypes), explains recursion and array handling, runs the tool to produce a types file, and highlights productivity gains for a Playlist app and future reuse.
Chapters
As you advance in your coding career, you're going to think, how can I make my life easier? It's our job to not only just always come up with solutions and Google it, we want to make our life easier permanently. And we can do that by coming up with a function or a little treasure chest I like to call it. Recently, me and my mentee shout out to my mentee. We came up with a little function that really helped us finish our Playlist app and a function that maybe could help you with your project that you're doing now. My name is Phil. I became a senior developer at the age of 30. If this video was of useful to you, please share and like and maybe share in the comments a little piece of code that you use repeatedly in your career. So the story behind this function, we're making it an app and we're hitting like these third party APIs like Spotify or random user or YouTube search API or whatever it is, right? And those have really big responses, right? I'll just give you an example. Like for example, it's the RandomUser Me API. This object is huge if you really think about it. I'm going to view source, I'm going to take this one object here without the seed or the info. So that's like one object and if I take it into my JSON viewer, it's a pretty big object, right? So it has around a gender name and it's some nested fields. It has nested objects. And you know, writing this whole typescript file out is going to take some time, right? Because you're going to have to research it and then kind of look at it and I will run it on an example of this. So we wrote this function to kind of if you can just send in an object and then it could spit out some types file for you to kind of like put into your file, right? So I thought it was pretty useful. I thought it saved a lot of time. There probably are some other NPM packages that do it way better, but this is our implementation and I thought it was pretty interesting, right? So it goes like it started out with this function type getter and then it passed in an object, right? And right now I'll just delete this guy and I will delete this and I'll put in maybe that const random user response and then that to that object and I'll just save it. So let me just explain this function really quick here. Let me just put some comments. So it's a payload, it's an object. That comes in and object and then returns object with keys as types, it returns an object. Now you go function type getter and then it instantiate the let types so it gets set. And then if the type of. So I get the type of at the key. If it's an object, I do this meat of the app and then else I can just map it to like a string number or boolean. So the first check I have is is it an array? Right. If it's not an array, I use recursion on the type getter at that payload key and then I make the type keys and then I add the object typ. So that'll recurse the function and then until it exits and then until it hits a return or a base case. And then if an array happens here, if it is an array, and then if inside of that array it's an object, then we have to use that recursion again. And if not we can just get the type of at the payload of the first key, right? Because they're pretty consistent. And then add these square brackets in the end to identify that it's an array. We'll use it on this pretty big object here. I'll just go here, I'll do a type getter at this random user response and then we can just do a console log. I'll run this code here. So I'll be in here. LS node on what is this type getter JS So if I run the type getter it gives me a huge types of file, right? Gives a gender string, name string, title string first string. So it was a big time saver. But this is great and all, but we need to actually write the file right. So there are some other functions that we lined it up with. I used type getter and then I used the write types file. Okay. The write types file was the types file. So I send in a file name, type name and then content. So it takes three parameters. So maybe I'll write those comments here. The file name, it's going to be a string and that's going to be a string as well. And this is going to be an object name, a file to be output. Then you are types to be object. Okay, so now it takes a right types file, takes file name, type name and content and returns. It'll make a file. So in the end I do a bunch of replace to make sure that it gets rid of all the line breaks and stuff like that we did. So if I just write this right and then I take. Let's just say I'm going to do this one. So that's the right types file. And then we had one, one more function to kind of tie it all together. I think it's called make types. So this make types takes a file name, name of file wanted to be output type name name of type wanting to be built in the payload payload Object to make Types 4 and then the description function to output type of object to use in the project returns a stringified object with quotes not in there. So let's give it a whirl. I think in the type getter we had this random user response make types file I'll make random user response and then we'll run make types on here. So we'll just do console log on make types and it takes a file name. So let's just call it random user types TS and then the type name will be random user and the payload will be the random user response. Let's try it out here. Node make types.js out directory from the right. It's defined in the rights in the right types file. So now if I do like this, in the out file I'll have a random users type and then it'll have all the types that we need in the objects inside of objects. I just save and then it'll just pick it up and it'll be a full type file for the random user. So if I actually did like this, right? And then if I went to like random user response and I press. I would have all the auto completion for us. So then like location and then dot I could go into street and then dot and I would have all this kind of stuff all autocompleted for me but for the typescript so I thought it was pretty useful. I'll put it up in GitHub so everyone can use it and hopefully it'll be good. So it was very awesome to write this function and it was really fun and I thought it was really useful and it was a time saver. So this function that we created, it will be used in her career, probably for the rest of her career. I certainly will use it for myself. So create and collect your little treasures for your treasure chest. And whether it's functions or boilerplates and share it with others as well. We should all help each other as developers. Remember, if I can do it, you can do it too. Coding saves lives.
