What sets apart the symbols '!: ' and '?: ' in TypeScript object declarations?

Question

What sets apart the symbols '!: ' and '?: ' in TypeScript object declarations?

Class Employee {
  firstName: string;
  lastName!: string;
  middleName?: string;
}

Can you explain the significance of the different field declarations within the Employee class?

Check out a Live Example

typescript class option-type

Answer 1

Answer №1

When the compiler option strictNullChecks: false is enabled

If you have strictNullChecks: false set in your tsconfig.json, then both scenarios are essentially the same because having strictNullChecks disabled allows all fields to accept null or undefined as valid values.

When the compiler option strictNullChecks: true is enabled

class Employee {
   firstName: string;
   lastName!: string;
   middleName?: string;
}

firstName: string specifies that firstName must be of type string. It cannot be assigned a value of null or undefined. All uninitialized fields will default to undefined, triggering an error message stating

Property 'firstName' has no initializer and is not definitely assigned in constructor

.

To resolve this error, you can either initialize like so:

firstName: string = 'Some default value'

or include a constructor function where the value is assigned.

constructor() {
    this.firstName = 'some default value';
}

Now regarding the use of the ! syntax. The lastName!: string syntax denotes that only a value of type string is allowed for lastName; null and undefined are not permissible. Although it prevents the definite assignment error from being raised by the compiler. Consider the following example:

   class Employee {
       firstName: string;
       lastName!: string;
       middleName?: string;

      constructor() {
          // This suppresses the compiler error about first name not being initialized
          this.firstName = 'some default value';
          // Compiler does not recognize lastName being assigned within init() function
          this.init();
      }
      
      private init(): void {
          this.lastName = 'some default value';
      }
    }

In the above code snippet, lastName is indeed assigned in the constructor through the this.init() call. Nevertheless, the compiler remains unaware of this fact. Hence, adding the ! serves as a way to communicate to the compiler, "I know what I'm doing." It is then incumbent upon you to ensure the accuracy of your code.

As for the middleName?: string syntax. This is akin to middleName: string | undefined; Given that all values default to undefined, the compiler will not flag any issues pertaining to the uninitialized state of middleName.

Answer 2

When the compiler option strictNullChecks: false is enabled

If you have strictNullChecks: false set in your tsconfig.json, then both scenarios are essentially the same because having strictNullChecks disabled allows all fields to accept null or undefined as valid values.

When the compiler option strictNullChecks: true is enabled

class Employee {
   firstName: string;
   lastName!: string;
   middleName?: string;
}

firstName: string specifies that firstName must be of type string. It cannot be assigned a value of null or undefined. All uninitialized fields will default to undefined, triggering an error message stating

Property 'firstName' has no initializer and is not definitely assigned in constructor

.

To resolve this error, you can either initialize like so:

firstName: string = 'Some default value'

or include a constructor function where the value is assigned.

constructor() {
    this.firstName = 'some default value';
}

Now regarding the use of the ! syntax. The lastName!: string syntax denotes that only a value of type string is allowed for lastName; null and undefined are not permissible. Although it prevents the definite assignment error from being raised by the compiler. Consider the following example:

   class Employee {
       firstName: string;
       lastName!: string;
       middleName?: string;

      constructor() {
          // This suppresses the compiler error about first name not being initialized
          this.firstName = 'some default value';
          // Compiler does not recognize lastName being assigned within init() function
          this.init();
      }
      
      private init(): void {
          this.lastName = 'some default value';
      }
    }

In the above code snippet, lastName is indeed assigned in the constructor through the this.init() call. Nevertheless, the compiler remains unaware of this fact. Hence, adding the ! serves as a way to communicate to the compiler, "I know what I'm doing." It is then incumbent upon you to ensure the accuracy of your code.

As for the middleName?: string syntax. This is akin to middleName: string | undefined; Given that all values default to undefined, the compiler will not flag any issues pertaining to the uninitialized state of middleName.

Answer 3

Answer №2

The ? positioned there signifies that the property is optional, as explained in this resource.

The ! at that spot denotes a definite assignment assertion, which can be likened to the non-null assertion operator, but applied to properties instead of expressions as outlined in this source.

In the given example, there may be two or possibly three errors:

Class should actually be written as class; keep in mind JavaScript and TypeScript are case-sensitive.
An initializer is required for firstName, unless a constructor is present to assign it unconditionally.
Despite using ! on lastName, indicating that it will definitely be assigned, there is no explicit assignment happening in the code snippet, leading to potential issues when trying to access its value.

Edit: The linked code addresses items #1 and #2 mentioned above, but overlooks #3. TypeScript does not highlight the fact that lastName remains unassigned, assuming it's a string when it could potentially be undefined.

Answer 4

The ? positioned there signifies that the property is optional, as explained in this resource.

The ! at that spot denotes a definite assignment assertion, which can be likened to the non-null assertion operator, but applied to properties instead of expressions as outlined in this source.

In the given example, there may be two or possibly three errors:

Class should actually be written as class; keep in mind JavaScript and TypeScript are case-sensitive.
An initializer is required for firstName, unless a constructor is present to assign it unconditionally.
Despite using ! on lastName, indicating that it will definitely be assigned, there is no explicit assignment happening in the code snippet, leading to potential issues when trying to access its value.

Edit: The linked code addresses items #1 and #2 mentioned above, but overlooks #3. TypeScript does not highlight the fact that lastName remains unassigned, assuming it's a string when it could potentially be undefined.

Answer 5

Answer №3

The secrets lie deeply within the expanse of TypeScript documentation.

? can be found in the realm of interfaces, where it signifies an optional property.

! serves as the definite assertion operator, affirming to the compiler that a property is indeed set (not merely null or undefined) even when such certainty eludes TypeScript's usual analysis.

By the way, the use of Class as a keyword in TypeScript or JavaScript will trigger an error. The correct declaration for a class involves utilizing class. Remember, TypeScript and JavaScript strictly observe case sensitivity with identifiers and keywords (Class versus class denote distinct entities).

Answer 6

The secrets lie deeply within the expanse of TypeScript documentation.

? can be found in the realm of interfaces, where it signifies an optional property.

! serves as the definite assertion operator, affirming to the compiler that a property is indeed set (not merely null or undefined) even when such certainty eludes TypeScript's usual analysis.

By the way, the use of Class as a keyword in TypeScript or JavaScript will trigger an error. The correct declaration for a class involves utilizing class. Remember, TypeScript and JavaScript strictly observe case sensitivity with identifiers and keywords (Class versus class denote distinct entities).

What sets apart the symbols '!: ' and '?: ' in TypeScript object declarations?

Answer №1

Answer №2

Answer №3

Similar questions

What is the correct method for storing a response in an array variable in Angular?

Error encountered: The combination of NextJS and Mongoose is causing a TypeError where it is unable to read properties of undefined, specifically when trying

What are the steps for integrating angular2 starter with express?

TypeScript encounters challenges with implementing Redux containers

Parent variable in Angular Type Script causing undefined error

Angular 14: Trouble with ngFor after latest update - Type 'unknown' causing issues

What is the best method to adjust the width of the PrimeNG ConfirmDialog widget from a logic perspective

What are the possible reasons behind the malfunctioning of my attributes after I replaced my method with a new one

Enhancements to managing universal configuration object across the entire application

I'm looking for a solution to reorganize my current state in order to display the image URL

The argument provided is a string type, which cannot be assigned to a parameter expecting an object with a 'results' property of type string

Dynamic routing with ngIf in Angular 2's router system

Create a solution that is compatible with both web browsers and Node.js

Angular HTTP Patch method requires explicitly defined HTTP options as input parameters

Using a For Loop in VueJS with TypeScript for an array of objects

error: encountering issue with Vue TypeScript Jest tests - '$store' property is undefined

Is there a way to navigate directly to a specific component without passing through the main component?

The error message "TypeError: (0 , N.createContext) is not a function" indicates that

Partial specialization of member functions in C++ templates

Forwarding parameter data type