When TypeScript Makes a Lot of Sense

I've been taught by the best to always use it.

It makes code clean even though it's a hell to maintain sometimes.

I'm an avid user and perhaps a fan, since it makes JavaScript feel like the other tier-one languages, e.g., Java (I know I said tier 1 language).

But if I were to be sincere, I've never had it save my ass on any one day. Maybe until today.

I've got myself running a project that works with React Native on the front end and Express/Supabase on the Backend.

The mobile app stack, I'll swear by the way.

Everything is working pretty well until I was working on the authentication, and since I was handling different user roles, I needed to dynamically store user data.

To put it explicitly, I was building a pharmacy mobile app for a client that will handle customer, driver, consultation, and pharmacy roles dynamically.

Obviously, these users will have different tables on Supabase(Postgres), different columns, and potentially different rows.

Imagine a user was to sign up.

We needed to dynamically handle their signup data and store them in their respective tables.

Yup.

Then I ran into an error.

I had dynamically sent "userData" (the object containing the onboarding data of a user) to the backend and let the backend put it in the right table.

The backend handles this beautifully, or at least I thought.

If there was any slight mistake (e.g excess information) in the userData that doesn't correspond to a respective role's table,, we're running into an error.

A silent error.

E.g if I sent

userData ={Id: 'ywywh', address: 'Nowhere City', license: '745'}

Instead of

userData ={Id: 'ywywh', address: 'Nowhere City'}

Supabase (Postgres) would reject it.

The reason is, the table doesn't have a "license" column. You're sending excess information which would be rejected.

And if you're not handling errors properly, you may be stuck debugging for hours.

TypeScript fixes this so easily.

Define an interface for each user type. Get this from your Postgres tables. Use the exact column names.

This could look like this for me…

type UserRole = 'customer' | 'pharmacy' | 'driver';

interface customerUser {
 id: string,
 name: string,
 address: string,
 phone: string,
 email: string,
}

interface pharmacyUser {
 id: string,
 name: string,
 location: string,
 address: string,
 phone: string,
 email: string,
}

interface driverUser {
 id: string,
 name: string,
 vehicle: string,
 license_plate: string,
 phone: string,
 email: string,
 is_available: string,
}

With this, I'm sure I'm sending the right data for each table.

I don't send excess, nor do I send little.

TypeScript lets you identify errors beforehand.

Clarity is unmatched.

In our case, we could have gotten a squigly red line that would have saved us hours of debugging.

If you enjoyed, share and thanks!.