Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In Typescript, what is the ! (exclamation mark / bang) operator when dereferencing a member?

When looking at the sourcecode for a tslint rule, I came across the following statement:

if (node.parent!.kind === ts.SyntaxKind.ObjectLiteralExpression) {     return; } 

Notice the ! operator after node.parent. Interesting!

I first tried compiling the file locally with my currently installed version of TS (1.5.3). The resulting error pointed to the exact location of the bang:

$ tsc --noImplicitAny memberAccessRule.ts  noPublicModifierRule.ts(57,24): error TS1005: ')' expected. 

Next I upgraded to the latest TS (2.1.6), which compiled it without issue. So it seems to be feature of TS 2.x. But the transpilation ignored the bang completely, resulting in the following JS:

if (node.parent.kind === ts.SyntaxKind.ObjectLiteralExpression) {     return; } 

My Google fu has thus far failed me.

What is TS's exclamation mark operator, and how does it work?

like image 324
Mike Chamberlain Avatar asked Feb 16 '17 12:02

Mike Chamberlain


People also ask

What is an exclamation mark in TypeScript?

What is the TypeScript exclamation mark? The non-null assertion operator tells the TypeScript compiler that a value typed as optional cannot be null or undefined . For example, if we define a variable as possibly a string or undefined, the !

What does Bang mean in TypeScript?

The exclamation/bang operator that comes after accessing a property (also called a "postfix bang") is known as a non-null assertion. The use case for this operator is to convert a "nullish" (aka, possibly null or undefined) value type into a non-null equivalent.

What does double exclamation mark mean in TypeScript?

It's really simple: it's short way to cast a variable to be a boolean (true or false) value.

What does the exclamation point mean in Javascript?

In Javascript, the exclamation mark (“!”) symbol, called a “bang,” is the logical “not” operator. Placed in front of a boolean value it will reverse the value, returning the opposite. ! true; // Returns false.


2 Answers

That's the non-null assertion operator. It is a way to tell the compiler "this expression cannot be null or undefined here, so don't complain about the possibility of it being null or undefined." Sometimes the type checker is unable to make that determination itself.

It is explained here:

A new ! post-fix expression operator may be used to assert that its operand is non-null and non-undefined in contexts where the type checker is unable to conclude that fact. Specifically, the operation x! produces a value of the type of x with null and undefined excluded. Similar to type assertions of the forms <T>x and x as T, the ! non-null assertion operator is simply removed in the emitted JavaScript code.

I find the use of the term "assert" a bit misleading in that explanation. It is "assert" in the sense that the developer is asserting it, not in the sense that a test is going to be performed. The last line indeed indicates that it results in no JavaScript code being emitted.

like image 200
Louis Avatar answered Sep 19 '22 06:09

Louis


Louis' answer is great, but I thought I would try to sum it up succinctly:

The bang operator tells the compiler to temporarily relax the "not null" constraint that it might otherwise demand. It says to the compiler: "As the developer, I know better than you that this variable cannot be null right now".

like image 23
Mike Chamberlain Avatar answered Sep 18 '22 06:09

Mike Chamberlain