Angular: unknown 'null !' syntax

Question

While reading Angular 2 source code, I came across NgForOfContext<T> which sources can be found in the official repository here and, below here, the part which brought interest.

In particular the following syntax is something I have never seen in neither plain Javascript nor in Typescript:

private _applyChanges(changes: IterableChanges<T>) {
    const insertTuples: RecordViewTuple<T>[] = [];
    changes.forEachOperation(
        (item: IterableChangeRecord<any>, adjustedPreviousIndex: number, currentIndex: number) => {
          if (item.previousIndex == null) {
            const view = this._viewContainer.createEmbeddedView(
                this._template, new NgForOfContext<T>(null !, this.ngForOf, -1, -1), currentIndex);
            const tuple = new RecordViewTuple<T>(item, view);
            insertTuples.push(tuple);
          } else if (currentIndex == null) {
            this._viewContainer.remove(adjustedPreviousIndex);
          } else {
            const view = this._viewContainer.get(adjustedPreviousIndex) !;
            this._viewContainer.move(view, currentIndex);
            const tuple = new RecordViewTuple(item, <EmbeddedViewRef<NgForOfContext<T>>>view);
            insertTuples.push(tuple);
          }
        });

I am talking about the null ! in line:

this._template, new NgForOfContext<T>(null !, this.ngForOf, -1, -1), currentIndex);

The first argument is null, followed by a logical not (!). In my attampt to understand this code, I have double checked and as far as I know, null is a primitive Javascript (and TS) type and it makes no sense to have a null !. Which moreover would make more syntactical sense if it were !null (not null) that returns true

To make sure I was wrong, I tried to compile it, but to my surprise, it fails. It complains about Unexpected )

Now, obviously Angular works. We all know that. Therefore I must be missing something. Pray, resolve this killer mystery...

probably answered here https://stackoverflow.com/questions/42273853/in-typescript-what-is-the-exclamation-mark-bang-operator-when-dereferenci — bryan60, May 24 '18 at 19:09
you're probably using it wrong, you should post how you're actually using it and the error. — bryan60, May 24 '18 at 19:12
just a tip, angular doesn't preserve whitespace when compiling it's typescript, so the space in there is valid fro them. if you are, then the space will cause an issue. Depending on your typescript version, this may or may not be the default behavior. — bryan60, May 24 '18 at 19:16
well not a space problem since I compiled Angular sources as they are, but I will note the tip — Attersson, May 24 '18 at 19:21

score 3 · Accepted Answer · answered May 24 '18 at 19:11

3

This is called the Non-null assertion operator, It is used when we have a value that can be null to assert that it is not null

  var nullable: string | null = null;
  var nonNullable: string = "";

  nonNullable = nullable // Error 
  nonNullable = nullable! // Ok, we asserted it is not null

In this case it is used (rather counter intuitively) to assert null is not null

nonNullable = null! // Ok, we assert null is not null

Playground link

answered May 24 '18 at 19:11

Titian Cernicova-Dragomir

230,986
31
415
357

1

Thanks. Makes sense. I still have to find what went wrong with the compiling but it definitely shines a light. – Attersson May 24 '18 at 19:16
@Attersson not sure why it did not compile, what error is it giving? and what version of ts do you have installed? (this is a more recent addition I think) – Titian Cernicova-Dragomir May 24 '18 at 19:16
The error was `Unexpected )` as for the version I will have to check but it's definitely not the latest – Attersson May 24 '18 at 19:20
@Attersson the fragment you posed is indeed missing a `(` (the end `)` is mismatched), I thought it was part of a larger fragment – Titian Cernicova-Dragomir May 24 '18 at 19:21
Indeed. You find it in the link – Attersson May 24 '18 at 19:22
And the Version 2.7.2 – Attersson May 24 '18 at 19:26
Also, could you clarify please why null must be checked not to be null? Can I do `any !` ? – Attersson May 24 '18 at 19:38
1

`any` is not a value is is just a type. `null` is both a value and a type, so you are applying the `!` operator to the value. Here the constructor is declaring that that parameter MUST NOT BE NULL. The caller chooses to ignore this imperative direction and forcers the compiler not to issue an error even if null is passed. This may result in later problems, but I guess they know what they are doing :-) – Titian Cernicova-Dragomir May 24 '18 at 19:42
Brilliant. Thanks, you clarified it – Attersson May 24 '18 at 19:43

Angular: unknown 'null !' syntax

1 Answers1