Angular HTML Javascript Projects Typescript

Easily create custom Typescript interfaces with

I am sure you, as a web developer, have faced a lot of times the problem of having to deal with complex Objects in your Typescript or Angular projects. One way to do it is creating our custom Typescript interfaces or classes, but it could give us a lot of work when, as said, the objects are too complex . We will see in this article how to create our Typescript interfaces using a powerful tool called . This tool can be accessed through the website but also as a Visual Studio extension.

Probably many of you are experienced developers who know the benefits of Typescript interfaces and custom types much better than me, but the point here is, among everything, how to use to deal with big Objects, and to make an interface for those big Objects in less than a minute even if they have dozens of properties.

First of all, we will see a piece of code which shows us one typical response returned by an HTTP request in Angular, from the Giphy API. I am currently developing an app which uses Giphy API to show images, among other functionalities, and I will use some pieces of code to show you how to use it and the great advantages of creating your custom Typescript interfaces.

This time, as it is a long code, will just link it and not embed, for readability reasons:

As you can see, it is an Object with a lot of properties, nested ones… it is easy to have errors trying to access those properties, and is very difficult to trace a path to one nested property, you could have mistyping errors…

Advantages creating custom Typescript interfaces

With Typescript interfaces, we will be able to avoid the errors mentioned above more easily, taking advantage of the help that Typescript can give us to access an Object and its properties.

Not only that: as mentioned above, with we will be able to create our Typescript interface for such complex Objects fast and easily.

Let´s imagine we will request 10 items from Giphy with our HTTP request. The limit of items can be as a query parameter, as we will see later. Please read Giphy documentation to know more about it.

The result will be a very big Object with thousands of lines. But it doesn´t matter. Let´s see the code. First we will intentionally use a typical bad practice to request data, using the “any” types.

Bad way of requesting data: using “any” type

This would be our HTTP request. The ApiData property is where we will store our data to be shown in the template.

As you can see we have declared a variable called wholeQueryString where we can set the limit of items we want to request. To see more info about the other parameters I recommend you again to visit Giphy for Developers documentation.

  let wholeQueryString:string=`${URL}${Key}&limit=10&q=${searchQueryParameter}`;

Also we have set the property and the parameter for the HTTP request as “any”. Sometimes developers use this to avoid Typescript throwing errors. For example, when we do;

If we don´t declare the response as “any”, Typescript will say something like “ey, this is a generic Object type, I can´t see a data property inside because it is not part of a generic Object type”.

image to show typescript error when not using proper typescript interfaces, but the any type

We can solve it by setting the response as “any”, it is like telling Typescript: “Is OK, I know what I am doing, just let me do”. Then it won´t complain:

image to illustrate a bad way to fix error with the any type

But this way, we must know our response Object structure; we must check the properties and know our response has a data property. That can get worse if we must access something like[0].url

As mentioned above, it is easy that you have errors trying to follow complex, nested property paths.

It is a solution, our software will work; but is not the best way to do it.

Using to create our Typescript interfaces

Let´s create then our custom Typescript interface, see how it helps us, and how to create it with

If you know something about Typescript interfaces, you can figure out how hard it would be to build our interface for an Object as we get on this Giphy response, isn´t it? Imagine you have to check more than 20 properties, declare types… and same for nested Objects.

Fortunately we will use to do that now.

First we run our HTTP code.

As we have a

console.log (response);

It will show us the complete Object that Giphy returns.

image to illustrate an object returned by angular HTTP request

We just copy the entire Object and paste it inside the left panel of It will transform our JSON Object into typesafe code in any language, including Typescript.

Remember to copy the entire Object, just right-click over it and select “copy object”, works the same for Firefox and Google Chrome.

You must write a name for your Typescript interfaces, in this case we will use GiphyResponse. Then, in the options button you can select the language you want the JSON to be parsed. In our case it is Typescript.

image to show how to parse a JSON into custom Typescript interfaces

And that’s it! We have a complete interface of our long response in less than one minute!

Using the generated data for our projects

Now that we have the code, we just can copy and paste it to create our own Typescript interfaces inside our Angular project.

First we will create a file called


Preferably do it inside an “interfaces” folder. Just copy the code generated by

Now we are ready to use our custom Typescript interfaces wherever we need inside our project. And now, we will use it to handle Objects easily with the help that Typescript can give us.

We will change the “any” types we have written before, with our new custom type, GiphyResponse, or derived ones.

We can see our interface has now image to show structure generated for our custom Typescript interfaces The relevant data we need, as its own name says, will be inside the “data” property.

Remember we will store our data inside a property. As we see, the data is an array of Datum type, so we change:

 public APIdata:any;


 public APIdata:Datum[];

As it is an array, we can initialize inside the constructor it simply as:


Now we must change the HTTP response code. So you can replace this:

for this:

Apart from the type change we have done for the property, we can see we changed two things inside the HTTP request:

  • Now the response parameter has also our custom type. Please note that it would now work even just leaving the response without type:
next: (response)=>{;


        console.log (response);


But I humbly think it is a better idea to specify this response with our custom type

next: (response:GiphyResponse)=>{;


        console.log (response);


Well, and where is the advantage of all of this?

Look what happens now:

gif image to describe advantages of using custom Typescript interfaces

Yes! Now Typescript knows the structure and property of the Object, thanks to our custom Typescript interfaces. We have told Typescript something more specific and well described than a vague “any” type so it can help us.

The best advantage is that, if we have to access now to any nested property inside the object, we can do it much more easily, with Typescript safely guiding us through the structure of the Object.

Look at this. Remember data property is an array, so we could do, for example, for first element of the array:

second GIF to illustrate how to navigate through an Object with custom Typescript interfaces and types

You can see all nested properties, objects… much easier than exploring the browser console and following the paths by yourself, right?

I hope this article was useful for you. Remember to check other Angular or Typescript related articles we have written.


Image by James Osborne found in Pixabay

PHP Projects What have I learned?

Building a REST API with SLIM 4 – part 2 – What have I learned? The use of CRON JOBS

Remember you can check and test the project here:

and see the repo here:

On this post, we continue and finish the article and work described here.

To develop this project, I have followed official docs as well as two great tutorials to work with Slim 4



-First of all, I had to work with composer, which is a PHP package manager similar to npm for Javascript. Never worked with it.

I also have learnt some things I consider good practices or at least a better way to do things than I was doing before:


-The attribute names on forms should not be composed of many words without separation. For example is better to avoid mistypings and confussions:




So it would be, for example:

<input type=”checkbox” name=” login_checkbox_name”>

Also never use spaces, can lead to errors when validating


-I am very concerned about security. As I had to store user´s session  I have investigated a lot regarding cookies and other options to store and remember user sessions.


I realized that storing sensitive data like user´s hashed password to remember the session  on cookies is not secure (when you are nov ice is usually to make it that way). So, after seeing disvantages of options like Local Storage which can be easily attacked through javascript and XSS injections, I decided to use a session token which will generate a random code when user wants to remember session and which will be unique for that only user and session.


-I have also realized that, although learning to validate a form with raw PHP is essential, if you want to save time, sometimes you must use some of those libraries, specially if you have a project with a given deadline. It has disvantages like relying on an external library to do things that could entirely be done by yourself, but nowadays is necessary.

ln this case, I researched and used valitron to validate the form.


-Maybe the most important among all the things listed in this post that I noticed, is the importance of trying to write clear, proper comments.  Benefits:

  • A good and clear structure, will be useful not only for future programmers but for yourself in the future. How many times happened that you check a code some years or even months later, and you don´t know why or how you did something? Good comments will avoid it. Make comments as if you don´t know how to code. Don´t take things for granted. Some programmers think commenting code is a sign of unclean code which doesn´t speaks by itself. As I pointed out, I personally find you could have problems to understand your own code in the future and, also, I find it disrespectful for new developers which could join the project later, if you work on a team. A team is supposed to be working for a common goal, and we must make things easy to each other. For me the willing to help, and the wish to learn are even more important than coding skills to achieve success on a company.
  • Another implicit advantage will be you will save a lot of time later, because you won´t have to clean so much For sure you can do a bulk deleting action with some IDEs like VS Code, if you have to delete all the commented “var_dump()” or “die()” you left everywhere; but it vcould lead to errors if you delete something should not be deleted with that bulk deletion.So, I have read some good articles and spent a lot of time  improving comments. I know it is far from being perfect but I hope it is clear enough (I wait for your advices anyway).
  • Also I tried to present a professional and clear file on the project.  Proper work with markdown (md) files (remember you can see it on my GitHub repository), can help you look like a real developer which cares about project´s usage. for next project I will try the flavored Github markdown too.

-Also regarding security and usage, I find important that recruiters or potential employers are allowed to actively test my work; that means they can create users, upload images…

In order they can test my projects on a more secure way, I started to use MySQL scheduled tasks and/ or CRON jobs.

That allow me to reset the app´s database on a regular basis (daily, monthly…), so we are sure it doesn´t matter what the user do; the app will be restored with the demo data I want it  to include and show.

Usually it is done with MySQL scheduled jobs, but sometimes it is not possible, like it actuallyu happened to me on this project. Reason is, my hosting provider uses a shared web server, and for security reasons, scheduled tasks are only allowed for a super user, and a super user would compromise the safety of other databases hosted by other users on that hosting.

To solve that, they allow to execute those scheduled jobs through CRON JOBS , which are linux commands which will work on a server going under that Operative System (for example, with Apache). This way you can create scheduled jobs without having too many, risky privileges.


– I have noticed (or better said, remembered) the importance of always having PAPER AND PEN with you.

Someone told me about that at the beginning of my career, but  many times we don’t realize due to pressure, and sometimes we don´t see we can save a lot of time if we stop coding and start to analyse a problem with a paper and a pen.

For example, on this project I had a problem to show the errors array provided by valitron library. I thought it would return an array with each error being an index of that array; but after struggling with some problems to properly show those errors,  when I made a print of the array with print_r(), I saw it was something different


So, with the little help of a paper and a pen to see it more structured, I saw the errors array it was actually an array of arrays, being each error an array itself, so I had to iterate like the old, basic matrix (with two foreach loops).



-Another thing I find a good practice is that a method should do only what it says it does.

If your method is called “insertUser()” your method should only insert that user. Connection to Database should be for example another method which would implement the connection logic, and would be called inside “insertUser()”


-More about security basics: Using PHP PDO statements will improve our code´s security and can avoid SQL injections.


-And last but not least, maybe is also a good practice if we obfuscate your Javascript files to make things a little harder for potencial attackers. Specially if for example you use AJAX  techniques to retrieve data from a database.

You have a good free tool to obfuscate yourt code here:


So I can say, developing this project has been extremely productive to me, because I have remembered and learned many useful things which will help me to be a better developer.

Development has gone slower than I would like because at the same time I am updating my Angular and Javascript skills, as well as digging a bit into the Reactive Programming paradigm which is so usual and essential today (including the mentioned Angular framework).

Also I am learning swedish and learning to play guitar as well as giving sports and mindfulness the importance in life it should have for every of us. Even as developers such things can be more helpful than we could think to be more productive. That´s why I mention it: I learned the importance of taking care about your body and mind. I will finish with a good reading about it:


PHP Projects What have I learned?

Building a REST API with SLIM 4: Part 1

Before I had to be full.time dedicated to take care about my mother, I had some projects to include on my portfolio.

One of them was a REST API made with PHP and SLIM2. I used this API as a mock backend for many applications, like my car selling fake app. Here you can see the back-end and fron-end code (made with Angular 6) of that app

Also you can see the project working here ( you will find a 403 Forbidden response, but ask me and I will give you an access to check). The reason that is is closed is that you can “play” with it: change or upload pictures… and I don´t want that to be done by anyone on the internet, of course 🙂

When I wanted to code it again, to refresh my knowledge, I noticed there were a lot of differences between SLIM 2 and the actual SLIM 4. Also, as the old version was made following a course, I wanted to make again from scratch,  then I can feel the API is “more mine”.

SLIM is a PHP framework, very useful to quickly create apps or APIs. Maybe it is not so powerful as Laravel, for example, but for people like me, which are more focused on Javascript and frameworks based on it, like Angular or React, SLIM can be a good solution when we want to do things like this.

As documentation is maybe not as clear for a noob asd it should be, I will start a series of articles to describe how I made the API and what worked for me.

But the first thing will be to sync GIT with my GITHUB and my IDE (Visual Studio Code), to commit the changes easily. That will be the next article. Of course you don´t need to do that but I think is a good moment to explain the very basics I know about it.