[00:00] In this exercise we have a class of user where it has a private property of username and username is saying property username has no initializer and is not definitely assigned in the constructor. Your job is to work out why this error is occurring and how we can make it go away. Good luck!

In this exercise, we're working with a `User` class that contains a private property named `username`:

```typescript
class User {
	private username: string; // red squiggly line under username
}
```

There is an error under `username` that reads:

```typescript
// hovering over username shows:
Property 'username' has no initializer and is not definitely assigned in the constructor.
```

## Challenge

Your challenge is to update the `User` class so this error goes away.

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

[00:00] Okay, let's break down this error, see why it's occurring. Property, username, so this username is a property of the class, has no initializer. It's not actually being initialized, it's not being assigned to, private username will just sort of exist. When we actually instantiate the class,

[00:17] const user equals new user here, sure, we can access user.username, or in fact we can't because it's private, but let's say we could. User.username, it's supposed to be a string, but what value does it have? It's not actually being given a value, so it's not being initialized.

[00:33] And then it's not definitely assigned in the constructor. So it seems like we have two choices here. We can either give it an initializer or assign it in the constructor. Let's see what that means. We can give it an initializer. We can say private username string equals an empty string.

[00:52] And so username here is now being inferred as string, so we say const user equals new user. I'll change this to being public just so we can access it. And now user.username is going to be an empty string on this. So this is a class property initializer here. We are initializing it, kicking it off

[01:11] with some sort of value. But how about assigning in the constructor? Well, we can create a constructor here. We can say constructor, which is a function which is called when the user class is initialized. And then we can say this.username equals an empty string. Perfect, this basically does the same thing.

[01:29] If we have two here, if we have a username like this and we give it like an actual string there, the constructor will win here. So it's like the class initializer or class property initializer gets called first or gets run first, and then the constructor gets run afterwards. So then there's a third one here,

[01:47] which is we can basically make this optional. If we think, right, actually, this error just doesn't matter to me. I don't care about this. I just want to sometimes have a username available on this object. Then we can say private username might exist, and it's a string. So there we go. That's how to make this error go away in a few different ways.

[02:06] This basically has no initializer. You haven't initialized it. It's not definitely assigned in the constructor. And let's just hone in on definitely for a second, because that's interesting. If we were to say if math.random is greater than 0.5, for instance, then if we put it in there, is this gonna, oh no,

[02:24] because we've accidentally got an initializer on it too. Now, it's just got a 50-50 chance of being initialized, right? It's not definitely assigned in the constructor. And it basically, like TypeScript is pretty clever here. It's basically saying, okay, you've got a 50-50 chance of doing this. It's not gonna work out for you

[02:44] if it's like greater than 0 or something, which I'm pretty sure it always will be, certainly when it's greater than minus one. If you take it out of the if statement, now it's definitely going to be assigned. So that's what that definitely is doing inside that error message. So sure, you've got the choice of either giving an initializer

[03:03] or actually assigning it in the constructor, or of course, just making it optional. That's a choice too. And so out of those three options, there's probably enough context for you to solve your error.

The "no initializer and not definitely assigned in the constructor" error happens because our class isn't set up properly:

```typescript
class User {
	private username: string; // red squiggly line under username
}
```

There are two primary ways to solve this issue: initializing the property or assigning it in the constructor.

## Solution 1: Initializing the Property

A straightforward way to resolve this error is to initialize the property with a value:

```typescript
class User {
	private username: string = "";
}
```

This assigns an initial empty string value to `username`.

Now if you were to create a new instance of User and attempt to access the username property, it would return an empty string as a default value:

```typescript
const user = new User();
user.username; // empty string
```

## Solution 2: Assigning Value in the Constructor

Alternatively, you can assign the `username` property its value in the constructor of the class:

```typescript
class User {
	private username?: string;

	constructor() {
		this.username = "";
	}
}
```

This does much the same thing as initializing the property, but this time the value assignment happens in the class constructor that gets called when a new instance of a class is created.

Note that if the property has both an initializer and an assignment in the constructor, the constructor will take precedence. The value assigned in the constructor will be the value of the property when we create a new class instance.

## Solution 3: Making Property Optional

In certain cases, you might not really need to always use the property. If this is such a case, then the final solution would be to make the property optional:

```typescript
class User {
	private username?: string;
}
```

Defining 'username' as optional indicates that it might exist and might contain a string value. TypeScript won't throw any error with this because it allows for the 'username' property to be undefined upon class instance creation.

## Exploring 'Definitely'

An interesting part of the error is the term 'definitely assigned'.

When we say a property value is definitely assigned, it underscores the certainty of the value assignment.

For example, here we have a 50-50 chance of assigning a value to the `username` property:

```typescript
class User {
  private username: string; // red squiggly line under username

  constructor() {
      if (Math.random() > 0) {
          this.username = "";
      }
}
```

We still have an error underneath `username` because TypeScript is not definitely sure that the value will be assigned.

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"

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"

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 "Property X Has No Initializer"

Transcript