[00:00] In this exercise, we have some search params here where we're saying search params equals new URL search params, window.location.search. This returns a URL search params type or class or class instance, and that you can then call get on. And we're getting the search params ID, which then we get back as string or null.

[00:19] And then we're console logging it to ID two upcase. Your job is to work out why this error is occurring, ID is possibly null, and to figure out how we can make this better. There are a few ways of doing this. A couple are TypeScript only, a couple are runtime,

[00:37] and most of them will change the behavior of this setup too. So yeah, that's your job. See if you can fix it. Good luck.

Here we start by declaring a variable `searchParams` that is initialized with the `URLSearchParams` class instance:

```tsx
const searchParams = new URLSearchParams(window.location.search);
```

This object permits us to invoke the `get` method, which is used to retrieve the `id` parameter. The `get` method can return `string` or `null`:

```tsx
const id = searchParams.get("id");
```

When we attempt to log the `id` to the console, we get an error:

```tsx
console.log(id.toUpperCase()); // red squiggly line under id
```

The error message reads:

```tsx
// hovering over id shows:
'id' is possibly 'null'.
```

## Challenge

TypeScript is telling us that `id` could be `null`. Your challenge for this exercise is to figure out why this error is happening and how to fix it.

There are a few ways to solve this error. Some are TypeScript-specific, while others regard runtime. See how many you can come up with!

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

[00:00] Okay, so the issue here is that ID could either be string or null, and if it's null here, if we call toUpperCase on it, we're actually going to get a runtime error. This is not so good, okay? If we get a runtime error, it's going to crash our entire application or we're going to hit

[00:18] the closest try catch. It's not going to be good. And so this error from TypeScript is really bloody useful because ID might be null, and so if you try to call any methods on it or even access any properties on it, you're going to be screwed. So, how do we solve this? Well, we could, first of all, just do an optional chain on this.

[00:38] What this does is it says ID, if it exists, then call toUpperCase on it. And you'll notice here, too, that if we go console.result equals this, then this result is either going to be string or undefined.

[00:53] If ID is a string, it means that ID.toUpperCase is going to be called on it. But if it's null, then this optional chaining is going to trigger and it's going to return undefined instead. So we've sort of converted our null into an undefined, which is a little bit odd. But there we go. That's the behavior here. This is a perfectly reasonable way of doing it.

[01:12] This will never fail at runtime, which is why TypeScript is not giving us any errors, but it also won't guarantee that this is a string that's being console logged. The second way to do this, this is more unsafe here. This is the unsafe way of doing it, is to use basically a bang operator here. I can't remember what this is called.

[01:30] It's a non-nullable assertion. That's right. What we're doing here is we're saying ID, this actually doesn't do anything at runtime. This is a TypeScript-only assertion. And we say ID.toUpperCase. We're basically saying we are guaranteeing that ID is not null.

[01:49] This is unsafe because if ID is null at runtime, this will cause an error. But if we happen to know that ID is always, always, always defined, sure, we can probably just get away with saying ID.toUpperCase. What I like to do in these situations, oddly enough, is you can actually add multiple non-null assertion operators.

[02:08] So you can go ID.toUpperCase. And this gives you a warning, at least, that what you're doing is unsafe. But it's not great practice to do this, really, because ID actually is possibly null. It might genuinely not exist.

[02:23] And so it's better to defensively handle that than just say, my ID is definitely not null. So this is sometimes useful if you really know more than TypeScript. But sometimes it's just not very useful and will cause more issues. So a better way to do this is to actually add some narrowing in here.

[02:41] You can say, if ID exists, then you say console.log ID.toUpperCase. So now, this is clever. This is really clever. You notice that we haven't done anything to our ID.toUpperCase. We basically just said, if ID exists, or if it's truthy, then we get console.log ID.toUpperCase.

[02:59] And inside the narrowing thing here, we get ID as a string instead of ID being possibly null. Really, really nice. We can do this as well with a typeof check, too. So we can say, if typeof ID equals string, then say console.log ID.toUpperCase.

[03:15] And the final one we can do is we can actually say, if no ID, throw new error, ID not found. Amazing. And now, because it knows that we've basically just returned, or thrown an error in the situation

[03:31] where it's null, ID.toUpperCase is always available here. It's a string. So there we go. Filtering out nulls and filtering out undefined, by the way, we get the same thing if ID was a string or null or undefined here. We'd have to handle undefined in basically the same way. Doing it this way means that you've got a few options, basically.

[03:51] You can either do an unsafe call here, so an unsafe non-null assertion. You can do some optional chaining as well, which is a really nice terse way of doing it. Let me just console.log the results there. Or you can do some narrowing here. And the narrowing means if basically ID does not exist, we're not even going to console.log, which is quite nice too.

[04:10] And so handling possibly null or undefined things is a really key feature of TypeScript and a key way that you're going to improve your code because null or undefined popping up in the wrong place, that is not going to be good for anyone because it's a recipe for runtime errors.

The `id` we're getting from `searchParams.get("id")` could either be a string or null:

```typescript
const searchParams = new URLSearchParams(window.location.search);
const id = searchParams.get("id");

// hovering over `id` shows:
const id: string | null;
```

If we try to call `toUpperCase()` on a null value, we'll encounter a runtime error. This is not a good situation, and TypeScript's error is useful in warning us about this potential issue.

```typescript
console.log(id.toUpperCase()); // This will throw a runtime error if id is null
```

There are several ways to address this error:

## Optional Chaining

The first technique is to use optional chaining, represented by the `?.` operator:

```typescript
const result = id?.toUpperCase();
```

This tells TypeScript to call `toUpperCase()` on `id` if `id` exists. If `ID` is null, the function will return `undefined`.

This method doesn't guarantee that `result` will be a string, but it will prevent the runtime error.

## Unsafe Non-nullable Assertion

Another option is to use the `!` operator to assert that `id` is not null:

```typescript
console.log(id!.toUpperCase());
```

The `!` operator doesn't do anything at runtime and is only used for TypeScript's type checking.

However, this is generally not a good idea because if `id` is indeed null, you will encounter the same runtime error as before.

## Type Narrowing

A better option is to conduct type narrowing by checking if `id` exists before calling `toUpperCase()`:

If `ID` does exist, TypeScript will treat `id` within the narrowing block as a string:

```typescript
if (id) {
	console.log(id.toUpperCase());
}

// hovering over `id` inside the `if` block shows:
const id: string;
```

Alternatively, you can use a `typeof` check to verify if `id` is a string:

```typescript
if (typeof id === "string") {
	console.log(id.toUpperCase());
}
```

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"

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"

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"

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

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"

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 Possibly Null Or Undefined"

Transcript