DEV Community

Cover image for 🗾️ TypeScript Customers Info With MapBox
alexpaper
alexpaper

Posted on

🗾️ TypeScript Customers Info With MapBox

Working with typescript especially in the beginning (I am a beginner 🤔️),
declaring the type of each variable, the syntax not always intuitive, can be very frustrating! 😤️

The code stretches a lot but the advantages in the long run are undeniable! 🤓️

In this video guide i created a litle customer page to get familiar with typescript sintax, for example, when you fetch some customer info you need to declare in advance the object type using ** interface **

// User Interface
interface User {
    name: string;
    username: string;
    email: string;
    address:{
        street: string;
        suite: string;
        city: string;
        zipcode: string;
        geo:{
            lat: string;
            lng: string;
        }
    };
    phone: string;
    website: string;
    company: {
        name:string;
        catchPhrase: string;
        bs:string;
    };
};

Enter fullscreen mode Exit fullscreen mode

In this way typescript knows what kind of data to expect, and if there is something wrong, report it in advance!

To view the customer coordinates I used MapBox

Hope this little exercise helps you better understand the importance of typescript in your code!

Video Guide

Have a nice day!
🖐️

Top comments (0)