[00:00] In this exercise, we have a const name here and we're getting an error saying cannot re-declare block scoped variable name. What? This seems really, really weird. Your job is to work out why this error is occurring.

[00:16] And I've given you an actual folder to work in here because the change, there is a change that you can make inside this file, which won't affect things too much, but there is also a change you can make in tsconfig.json, there's an option you can add to this. I will give you a link below to this so you can actually figure this out because there's a lot of potential options in here.

[00:35] Oh my God. So I prefer the tsconfig change, but if you can find the actual change you can make inside index.ts, that's pretty cool too. So see if you can work out why this error is occurring and yeah, I'll see you on the other side.

This exercise includes an actual folder.

Inside of `index.js` we have a single line of code that declares a `const name` variable:

```typescript
const name = "Matt"; // red squiggly line under name

// Hovering over `name` shows:
Cannot re-declare block-scoped variable 'name'.
lib.dom.d.ts(27237, 15): 'name' was also declared here.
```

## Challenge

Your challenge is to fix this error, either by making a change inside of `index.ts` or by modifying the `tsconfig.json` file.

Hint: referring to the [TypeScript Compiler Options](https://www.typescriptlang.org/tsconfig) might be helpful!

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

[00:00] Okay, what's happening here? Well, this is a pretty complex thing to explain. What's going on here is that we have a name variable and we're saying cannot redeclare block scoped variable name. So if we think about this,

[00:16] this file here is basically being detected by TypeScript as not a module, it's a file inside the global scope. What TypeScript does by default is if you don't have any imports and exports inside a file, it will assume that this file is supposed to be a global script.

[00:34] This is TypeScript's default because TypeScript is old. It's old, it's like 11 years old, right? And it's initially when it was built, it was meant to just compile JavaScript down into things that could be put in script tags in the browser that were meant to be in the global scope. And name, actually, if we go name like this,

[00:53] you can see that it's actually like, it's something available in the global scope. You can command click on it and it's actually in the DOM here. So it's in the DOM typings that come with your project here. And so, because we don't have any imports and exports inside this file, then we are basically conflicting

[01:13] with something that's already in the global scope. If we were to use constant name like this, uppercase name, then it wouldn't conflict. So let's say that we're inside a project that actually uses modules and this is a module, how do we tell TypeScript that this is a module? Well, we can add an empty export to the file.

[01:31] And now, because TypeScript understands that this is a module, it's not going to throw that error. So that's great. So we can either do it with an export or with an import. So we can say import, yeah, assert or whatever, import anything. And now TypeScript won't throw this error.

[01:48] But how do we actually tell TypeScript that every single file in our application is a module, regardless of what it thinks? Because you can kind of think of this like behavior is pretty legacy, right? The way it detects whether something is a module. Surely it should just assume that everything is a module.

[02:07] Well, we can get it to do that. We can say inside our tsconfig.json, we can use module detection force here. So by default, it's auto. So this basically checks whether you have an import or export. If you don't have import or export, it assumes a global script and then changes it to,

[02:26] oh, sorry, we don't want auto, we want force. This will force it to assume that every single file, whether it contains an import or export or not, is a module. And I recommend you turn this tsconfig option on in all of your projects that use modules. It is a relatively recent one, but my God, it's so useful

[02:45] because if you have some beginners on your project, it's just going to throw you off because this is not going to cause an error at runtime, but if I go back to the problem set up here, it's not going to cause an error at runtime because this is a module, but TypeScript thinks that it's a script.

[03:02] And so this is a really, really useful tsconfig option that I have in my default tsconfig setup for all of my projects. I can't think of the last time I actually used it. Oh no, I can think of a few years ago, I did like a project that was literally just script tags

[03:19] in the browser, but yeah, modules are pretty awesome because they just let you segment your code and make everything easier. So module detection force is in my tsconfig cheat sheet, which I will also link to below. And it's a pretty nice setup for avoiding this error completely.

TypeScript is telling us we can't redeclare the `name` variable because it has already been declared inside of `lib.dom.d.ts`.

The `index.ts` file is being detected as a global script rather than a module. This is because, by default, TypeScript assumes that a file without any imports and exports is meant to be a global script.

As it happens, there is a deprecated `name` variable that ships as part of the DOM typings that come with TypeScript. We get an error because we're trying to redeclare this variable.

By writing just `name`, you can `CMD + click` in VS Code to jump to its declaration.

## Resolving the Error

We could change the variable name to avoid the conflict with the global `name` variable:

```typescript
const NAME = "Matt";
```

Alternatively, we could make TypeScript treat `index.ts` as a module rather than a global script. We can do this by adding an empty export or import statement to the `index.ts` file:

```typescript
export {};
```

However, this might not be the most elegant solution.

## Forcing Module Detection

Instead, we can tell TypeScript to consider every single file in our application as a module, regardless of its content. This can be done by modifying the `tsconfig.json` file.

By default, TypeScript's module detection is set to `auto`. This means it will check if there's an import or export statement in the file.

To force module detection, we can change this setting to `force`:

```json
{
	"moduleDetection": "force"
}
```

It's a good idea to enable this option in all your projects that use modules.

This tsconfig option is particularly helpful if you have beginners on your team, as it can prevent confusion and reduce the likelihood of encountering errors at runtime

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"

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"

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"

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 "Cannot Redeclare Block-Scoped Variable"

Transcript