Use ‘unknown’ instead of ‘any’ in TypeScript (Try / Catch error handling)

👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Add authentication to your app FAST: bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (BIG update soon): email.bytegrad.com
⏱️ Timestamps:
0:00 data: unknown
1:06 ts-reset
1:36 error: unknown
4:59 Handle unknown
8:03 Utility function
#typescript #typescripttutorial

[@ByteGrad]

👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs

[@elenamikhaylova5086]

Thank you for explaining this well, i have banged my head on JS error handling for so long

[@ismoiljonabduqahhorov5825]

Hello ByteGrad I was struggling with error handling and your tutorial really helped dealing with errors loved your content good luck

[@vincenzocristiano135]

This is pure gold! Thanks a lot!!!

[@npaul1440]

Your tutorials and content are A Class. Just get a better microphone if possible. Thanks

[@mujibulhaquetanim]

yap, sounds is too low.

[@MailarYT]

Your really good explaining, keep going Cheers

[@meka4996]

Amazing! Thanks

[@user-vb4vs5yz6w]

thank you for sharing this topic

[@solosdev6946]

Thanks finding a solution for this :D

[@loydcose2780]

This is awesome!

[@honkhonkv2236]

Hello, awesome channel for a noob like me! I was wondering, at 10:42 in our utility function couldn't we just omit to type the message as string and instead in the return do something like "return message.toString()" ?

[@WilliamShrek]

That's exactly how I handle request errors in our projects. 😅 Those Python develelopers cannot agree with Java developers on error response, and they both think it is easy to handle those errors in the client side.

[@bheemkumarthami]

Thanks a lot. keep going

[@user-zj9jd8hd7q]

We still not consider the case where "message" is also an object

[@scide-x7242]

Thank you chris

[@Axorax]

I didn't know there was an unknown type 😮

[@antonapalanyuk338]

What about to save mark as 'any' and use following: console.log(error?.message || error?.stack || error); It is suitable for all error data types

[@AFE-GmdG]

I would write
... else if (error && typeof error === "object" && "message in error && typeof error.message === "string") { ...
If there is a message in an error object but it isn't a string, it should possibly use the default error message instead.

[@ByteGrad]

Good point

[@ajaychandel9976]

cool

[@mryo_]

Thanks.
export const getErrorMessage = (error: unknown) => {
if (error instanceof Error || (error && typeof error === "object" && "message" in error && typeof error.message === "string")) {
return error.message;
} else if (typeof error === "string") {
return error;
}
return "Something went wrong";
};

[@charuwaka1]

use a generic API response wrapper

[@panbotuk]

Why use unknown and any in typescript?

[@user-ik7rp8qz5g]

const res = ... as unknown as any

[@namstel9225]

I prefer
typeof error?.message === "string"

[@deatho0ne587]

What if error.message is is an object, HTML, etc... Casting to string then would not be really safe.

[@ByteGrad]

Good point

[@deatho0ne587]

It is good for another video about TypeGaurds maybe.

[@ciach0_]

Then that would be [object Object]

[@deatho0ne587]

The thing is even if it is an object should you trust it for display purposes?

[@charuwaka1]

use zod

[@silenthooman]

the fn is async, and he used the then, man just use await