homeabout meblogprojectsstack
  • home
  • about me
  • blog
  • projects
  • stack
    github.com/figueroaignacio/
    linkedin.com/in/figueroa-ignacio/
    ignaciofigueroadev@gmail.com
Ignacio Figueroa
Ignacio FigueroaFullstack Developer & Programming Student at UTN

You can contact me below.

    github.com/figueroaignacio/
    linkedin.com/in/figueroa-ignacio/
    ignaciofigueroadev@gmail.com

How to Implement TypeScript Without Losing Your Mind (and Why You Should Do It Already)

Why TypeScript helps you write better code and how it changes the way you program from day one.

Posted by

Ignacio Figueroa
Ignacio FigueroaFullstack Developer & Programming Student at UTN

If you're starting a new project or trying to improve one that’s already running, let me say it straight: using TypeScript will save you a lot of headaches.
It’s not magic, it’s not elitism, it’s not “I’m a better dev because I use TS.”

It’s simply a tool that keeps you from breaking things due to predictable, stupid mistakes.

In this article, I’ll show you how to implement TypeScript with zero fluff, from the real experience of someone who uses it every day on React, Next.js, and internal libraries.

Why I Started Using TypeScript (and Why I’ll Never Drop It)

The truth?
I started using TS because I was tired of breaking things over dumb details.

Misspelled variables, functions returning whatever they wanted, props passed incorrectly…
Those things that JavaScript happily ignores until your whole app explodes.

With TypeScript:

  • the editor warns you first,
  • your code gets cleaner,
  • and half your bugs never reach production.

It literally makes you think before you write.

How to Add TypeScript to a Project (simple and real)

If you have a JS project and want to migrate to TS, here’s the real process:

Install TypeScript (in my case I use pnpm but you can use what you like):

1pnpm install typescript @types/node

Then run:

1pnpx tsc --init

This generates a tsconfig.json, the file where TS decides how strict you want things to be.

Rename your files:

  • *.js → *.ts
  • *.jsx → *.tsx

That’s it.
No mystery.

Recommended Config (the one I use ALWAYS)

Inside tsconfig.json there are a million options, but these are the ones that truly matter:

1{
2 "strict": true,
3 "baseUrl": ".",
4 "paths": {
5 "@/*": ["src/*"]
6 }
7}
  • strict: forces you to think, but saves your life
  • baseUrl + paths: clean imports, no 200-character paths

First Steps With Types (what you actually need)

No theory dump.
Here’s what you’ll really use:

Basic types:

1let name: string;
2let age: number;
3let isActive: boolean;

Typing component props:

1type ButtonProps = {
2 label: string;
3 onClick?: () => void;
4};
5
6export function Button({ label, onClick }: ButtonProps) {
7 return <button onClick={onClick}>{label}</button>;
8}

Boom.
You’re already using TS.

Common Mistakes When Migrating to TypeScript (so you don’t repeat mine)

Using any everywhere
Tempting, but don’t.
If you need any too much, your structure is unclear.

Not typing function returns
Save your future self.

Leaving files as .js instead of .ts
Yes… it happened to me. Don’t be me.

Not using Record<T, K>
If you like mapping things and avoiding switch statements like I do, this is your best friend.

TypeScript doesn’t make you “better,” but it makes you cleaner

Using TypeScript isn’t a requirement to be a good developer.
But it gives you something extremely valuable: confidence in your own code.

It prevents stupid errors, organizes your thinking, and forces you to slow down just enough to not break everything.

If you want to level up your projects, TS is one of those changes that has zero downside.

Closing this

If you’re hesitating about migrating to TypeScript, let me put it this way:

Do it.
It’s one of those changes that gives you twice what it asks for.

And if you get stuck, it’s not because TypeScript is hard.
It’s because your JavaScript probably had chaos that TS is now exposing.

That’s a good thing.