[00:00] In this exercise, I have a function called somethingdangerous. And somethingdangerous, what it does is it says, if math.random is greater than 0.5, it throws an error. This means there's an approximate, like it's gonna fail about 50% of the time. And so I wrap it in a try-catch.

[00:17] And that try-catch here, this error, is of type unknown. And so the error I get here is error is of type unknown. Your job is to work out why this error is occurring and what I can do in terms of this catch to make sure that I actually can console log the message properly if this error is what I think it is.

[00:37] So there are a few solutions here. You might need to use some instance of checks or you might need to do a type assertion. There are a few ways of getting around this. Good luck.

In this exercise, we're working with a function named `somethingDangerous` which uses a conditional statement based on `Math.random()`. If the value from `Math.random()` exceeds 0.5, the function will throw an error, leading to a roughly 50% chance of failure:

```typescript
const somethingDangerous = () => {
	if (Math.random() > 0.5) {
		throw new Error("Oh dear!");
	}
};
```

To handle this error, we use a try-catch block. However, there's an error message under `error` inside of the catch block:

```typescript
try {
  somethingDangerous();
} catch (error: unknown) {
  console.log(error.message); // red squiggly line under error
}

// Hovering over `error` shows:
'error' is of type 'unknown'.
```

## Challenge

Your task is to understand why this error is happening and determine what changes you could make in the catch block in order to correctly log the error message.

Hint: You may need to use type checks like `instanceof` or apply a type assertion. Try different strategies and see what works best!

Explore techniques for solving the 'is of type unknown' error in TypeScript.

[00:00] Okay, unknown is a type that sometimes comes up and often comes up when we're dealing with try-catches. We say catch error here, and this error is of type unknown. Unknown basically means it could be anything, but it's different from any.

[00:14] We can actually say catch error any here, but any basically turns off type checking on anything that it's assigned to. So error here, because it's unknown, unknown doesn't turn off type checking. And so with unknown, we can actually narrow it down into the type that we want.

[00:33] Now, there is a way of doing this where we basically know that something dangerous is going to throw an error here, and it's going to be a certain error. But let's say that we accidentally say math.random here, and we have a tsignore that's kind of suppressing the check here. So we have math.random.

[00:52] Well, we might end up not getting an error here. This might actually be a type error instead. So we don't definitively know what type of error this catch is going to be, so TypeScript can't infer it. And so it ends up being unknown. So in every try-catch we'll use, you will have an error here which is unknown.

[01:09] So we could use an as here. We could say error as error.message. We could make an assertion. We could tell TypeScript, no, you're wrong to think of this as unknown. This error basically is an error here. And so we error as error.message.

[01:27] And so error has a few different possible properties here. Cause, message, name, stack. And we just console log the message here. We can't do error colon error here because basically unknown can't be assigned to error.

[01:43] And this check here, basically this kind of annotation that we're doing here is type safe. We're not actually like yelling at TypeScript. We're not knocking TypeScript over the head. Whereas the as down here, we are actually suppressing TypeScript a little bit. We're forcing it to say, okay, this error is an error here.

[02:03] So this is an unsafe way of doing it. What might a safe way of doing it look like? Well, we could do a bit of a funky check here. We could add some if statements here by checking, okay, if type of error is an object and type of error is not null, right?

[02:20] Because of course, null in TypeScript is like a type of object. And there is a error property or a message property on the error. Then we can console log error.message. We know that it is basically a message, right? Okay, this is pretty gross.

[02:38] And this does work, you know, outside of this, like we're going to get the error off. Error is unknown here. And it is going to effectively check if this object has a message property and then console log it. And then if we don't, for instance, if we get the wrong thing,

[02:54] then we're going to throw the actual error that came up. If, for instance, we did do math.random here, then we would actually get to throw the error up there. In fact, no, because it would probably have a message property, so it would still be console logged. But it's good practice just to make sure that everything possible is handled inside your catch. So this is pretty gross.

[03:13] How can we improve on this? Well, we can say if error instance of error. And now what we're doing here is we're saying, okay, if error is assignable to the error class, then we've got our console log error.message. This is a really, really nice little thing to bear in mind

[03:31] because it just gives you a one-liner that you can use to say, okay, if I've got my error, then I'm going to do this with it. Fantastic. And if we were to throw different types of errors, like type error or syntax error, for instance, then they all extend the base error class.

[03:47] This means that syntax error is still an instance of error, which is good. So there we go. This is basically a really nice way that you can handle try-catches. And just know that if this error comes up in the future, this x is of type unknown, then you can usually narrow your way out of it.

[04:07] Or if you have some complex narrowing, then you can use Zod instead. And if you have questions about Zod, you can see the free Zod tutorial that's on this site.

The `unknown` type implies that the value contained in the `error` could be anything.

However, it is distinct from the `any` type.

While `any` turns off type checking on anything it's assigned to, `unknown` maintains type checking. This means we can narrow the value down to the type we anticipate.

## Narrowing with `as`

One option for fixing this issue is to use `as` to assert that the `error` is of type `Error`:

```typescript
try {
	somethingDangerous();
} catch (error) {
	console.log((error as Error).message);
}
```

Using `as` tells TypeScript that we know better and it is wrong to think of the `error` as being `unknown`.

## Conditional Checks

Another option is to use conditional checks.

For example, we can use `typeof` to make sure that `error` is an object and includes a `message` property:

```typescript
try {
	somethingDangerous();
} catch (error) {
	if (typeof error === "object" && "message" in error) {
		console.log(error.message);
	} else {
		throw error;
	}
}
```

This solution works, but isn't the most elegant.

Instead, we could use `instanceof` to check if `error` is an instance of the `Error` class:

```typescript
catch (error) {
  if (error instanceof Error) {
    console.log(error.message);
  } else {
    throw error;
  }
}
```

In this solution, the original error will be thrown if the `error` doesn't extend the base `Error` class. This works well because all types of errors, such as `TypeError` and `SyntaxError`, extend the base `Error` class.

Narrowing is a great way to handle try-catch blocks in TypeScript. If you encounter a situation where `x` is of type `unknown`, you can typically use type narrowing to resolve it.

For more complex narrowing, you can use the Zod library (and check out the free Zod tutorial).

Narrowing is a great way to handle unknown errors when working with try-catch blocks in TypeScript.

Use Narrowing to Handle unknown Errors

Fixing "X Is Of Type Unknown"

Type checking is awesome, but sometimes it gives you error messages that can be challenging to interpret and resolve.

Whether you're new to TypeScript or looking to deepen your understanding, this tutorial is your guide to understanding some of TypeScript's most common errors.

In this tutorial, you'll find challenges centered around reading error messages and practical solutions to solving the issues they describe. You'll gain insights into:

-   **Type Not Assignable Error:** Understand why type mismatches occur and explore solutions like widening type definitions.
-   **Property Does Not Exist on Type Error:** Learn how to deal with undeclared properties and the use of Record types.
-   **Possibly Null or Undefined Error:** Tackle nullability issues with techniques like optional chaining and type narrowing.
-   **Types of Property are Incompatible Error:** Decode complex error messages and refine your type definitions.
-   **Type Unknown Error:** Handle unknown types effectively.
-   **Expression of Type String Can't Be Used to Index Type Error:** Overcome indexing issues with strategic type refinements.
-   **Property Has No Initializer and Is Not Definitely Assigned in Constructor Error:** Address class property initialization challenges.
-   **Conversion of Type May Be a Mistake Error:** Navigate type conversion with caution.
-   **Cannot Redeclare Block-scoped Variable Error:** Resolve naming conflicts and understand TypeScript's module detection.
-   **Could Not Find a Declaration File for Module Error:** Deal with missing type declarations in JavaScript modules.

### Instructions

This tutorial is split into several exercises. Each features a problem that encourages you to take an active, exploratory approach to finding a solution.

### You'll need to:

- Watch and read the problem introduction.
- Check out the TypeScript or React documentation or dive into type definitions to look for help
- Try a solution and check your work. There may be more than one way to solve the challenge! Whether you succeed or get stuck, watch and read the solution and check out the included code.

### Prerequisites

You’ll need a working understanding of TypeScript.

### Running the Exercises

Clone [the Error Messages Tutorial repo](https://github.com/total-typescript/error-messages-tutorial?tab=readme-ov-file), and use npm or yarn to install dependencies.

If you [follow this link to use gitpod](https://gitpod.io/#https://github.com/total-typescript/error-messages-tutorial), you can work in a full VS Code coding environment running in your browser.

Follow the instructions in the [README](https://github.com/total-typescript/error-messages-tutorial/blob/main/readme.md) for more.


TypeScript boosts productivity but faces pitfalls like type mismatches, null values, & puzzling errors. Learn to spot & solve these for swift progress.

Errors Messages Tutorial

User object and a UserProfile interface, your mission is to understand and solve a type error. 'blue' is not assignable to 'light' or 'dark'

This lesson explores type assignability in TypeScript, including why this error occurs and how to fix it. With practical examples and step-by-step guidance.

Understanding and Fixing 'Type Not Assignable' Errors

Fixing "X Is Not Assignable To Y"

Troubleshoot a TypeScript error that says a property does not exist on a certain type.

There are a few ways to solve the Property Does Not Exist on Type error in TypeScript.

Techniques for Solving Property Does Not Exist on Type Error

Fixing "Property Does Not Exist On Type"

TypeScript will show and error when you try to access a property that could be null or undefined.

The "possibly null or undefined" error is a common TypeScript error that can be solved in a few different ways.

Solving the Possibly Null or Undefined Error

Fixing "X is Possibly Null Or Undefined"

Sometimes TypeScript error messages are long and confusing. Learn how to make them more readable.

There are a few ways to make TypeScript error messages more readable and informative.

Getting More Useful TypeScript Errors

Fixing "Types Of Property Are Incompatible"

Fix an error in TypeScript that says an expression can't be used to index a certain type.

Explore a few options for indexing into an object without errors in TypeScript.

Options for Indexing Without Errors

Fixing "Expression Can't Be Used To Index Type X"

Resolve errors related to private property initializers and constructor assignments in TypeScript.

TypeScript errors related to class properties have a few ways of being resolved.

Options for Resolving Class Property Errors

Fixing "Property X Has No Initializer"

TypeScript will give an error when attempting to convert a type that doesn't sufficiently overlap with another type.

There needs to be sufficient overlap in order convert one type to another.

Working Around Type Conversion Errors

Fixing "Conversion Of Type X May Be A Mistake"

There are two ways to solve an error related to re-declaring a block-scoped variable in TypeScript.

Treating a file as a module or adjusting TypeScript configuration can resolve the re-declaring a block-scoped variable error.

Resolving the Block-scoped Variable Error in TypeScript

Fixing "Cannot Redeclare Block-Scoped Variable"

Learn to resolve an error when a TypeScript import is missing a declaration file.

The DefinitelyTyped project provides type declaration files for many popular JavaScript packages.

Transcript

Fixing "X Is Of Type Unknown"

Transcript