DEV Community

Cover image for 5 ways to Shoot Yourself in the Foot With Typescript (And What To Do Instead) πŸ”«πŸ¦ΆπŸ½
Ndeye Fatou Diop
Ndeye Fatou Diop

Posted on • Edited on • Originally published at frontendjoy.com

5 ways to Shoot Yourself in the Foot With Typescript (And What To Do Instead) πŸ”«πŸ¦ΆπŸ½

TypeScript is great!

But as a beginner, there are at least 5 ways you can shoot yourself in the foot and end up with a broken app.

Find them below, along with what to do instead πŸ‘‡πŸ½:

Mistake #1: Using any recklessly 😡

Using any inadequately removes all the benefits of Typescript.

For example, (a, b) => a+b won't catch bad arguments passed at compile time.

Instead, use the correct types, unknown, or a mixed codebase (Javascript + Typescript).

Mistake #2: Having strictNullChecks turned off πŸ”•

When turned off, the following code will compile fine but fail in production.

function printUser(user: User) {...}
const me = users.find((u) => u.name === "Ndeye Fatou Diop")  
printUser(user) <- This will throw in if an user is not found
Enter fullscreen mode Exit fullscreen mode

So make sure to turn it on.

Mistake #3: Having noUncheckedIndexedAccess turned off πŸ”‡

When turned off, the following code will compile fine but fail in production.

const usersByLocation = {"France": [], "USA": []}
usersByLocation["India"].push(...) <- This will fail
print(usersByLocation["France"][0].name) <- This will fail
Enter fullscreen mode Exit fullscreen mode

So please do yourself a favor and turn it on.

Mistake #4: Using the exclamation mark inappropriately 🫒

Using !, the non-null assertion operator, is rarely a good idea. Your code won't catch when the value is undefined.

Instead, handle null/undefined values properly or rewrite your code.

Mistake #5: Abusing of type assertion πŸ€₯

Using value as MyType is tempting when your code doesn't compile. But, this is risky because the type assertion may be false at runtime, leading to potential UI crashes.

Instead, use this sparingly and only in the relevant context.


That's it 😁

Thank you for reading this post πŸ™, I hope it will help you in your journey!

Leave a comment πŸ“© and add other mistakes you made with TypeScript.

And Don't forget to Drop a "πŸ’–πŸ¦„πŸ”₯".

If you like articles like this, join my FREE newsletter, FrontendJoy, or find me on X/Twitter.

Top comments (0)