What is the difference Between '!:' and '?:' in TypeScript object definitions?

Question

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

What is the difference in these 3 different fields of Employee class?

Live Example

Answer 1

The ? in that position marks the property optional.

The ! in that position is the definite assignment assertion. It's sort of a declaration-level version of the non-null assertion operator, but used on a property (can also be used on variables) rather than on an expression.

There are two — or arguably three — errors in that example:

1. Class should be class; JavaScript and TypeScript are case-sensitive.

2. You need an initializer on firstName (or a constructor that assigns to it unconditionally).

3. The ! on lastName tells TypeScript that lastName will definitely be assigned, suppressing the kind of error you're getting for firstName, but nothing (in the example) actually does the assignment that using ! there promises TypeScript you know for sure you're doing.

Edit: The code you linked later deals with #1 and #2 above, but not #3. TypeScript won't warn that lastName is never assigned and assumes its value is a string, when in fact it's not there and so reading its value will result in undefined.