90
$refs!: {
    helloComponent: Hello
}

https://github.com/vuejs/vue-class-component/blob/master/example/App.vue

eyllanesc
  • 235,170
  • 19
  • 170
  • 241
Sinosaurus
  • 1,139
  • 1
  • 7
  • 11
  • 4
    Possible duplicate of [In Typescript, what is the ! (exclamation mark / bang) operator when dereferencing a member?](https://stackoverflow.com/questions/42273853/in-typescript-what-is-the-exclamation-mark-bang-operator-when-dereferenci) – Tom Fenech Jun 22 '18 at 08:48
  • By the way, I don't think there's anything wrong with _what_ you're asking, rather _how_ you asked. Please take care with formatting and include some detail in the question itself. The text "enter link description here" was an instruction to you! – Tom Fenech Jun 22 '18 at 08:52
  • The question: title + code + tags contains ALL needed informations. Clean and compact – Kamil Kiełczewski Oct 16 '19 at 10:55

2 Answers2

77

That is a "definite assignment assertion": varname !: sometype informs typescript not to worry about checking if varname might be unassigned (it tells typescript that varname will definitely be assigned, even if typescript cannot infer where it is assigned). Normally typescript will check if the variable may be unassigned, and gives errors.

For more information, see: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#definite-assignment-assertions

iislucas
  • 2,111
  • 1
  • 14
  • 4
  • 8
    This is the right answer, because the question was not about the "non-null assertion operator". As stated in the linked docs: "In a sense, the definite assignment assertion operator is the dual of the non-null assertion operator (in which expressions are post-fixed with a !), which we could also have used in the example." – caraca Nov 09 '20 at 19:19
70

There will be a scenario when TypeScript believes that certain property, variable will be null or undefined. But if you are sure that this variable cannot be null, then you can use this operator known as Definite Assignment Assertion.

Consider the example:

let a = document.getElementById('hello');

if (a) {
    a.style.width = '100px';
}

TypeScript assumes that variable a may be null since there is no guarantee for this element to exists. So before you can access that variable, you have put in if guard. But if you know that your application is always going to have an HTML element with id #hello, then you can rewrite above code as:

const a = document.getElementById('hello');

a!.style.width = '100px';

The above code is more readable and less verbose. Read more here at https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html

EDIT: Technically correct comment by @Simon: Specifically, the operation x! produces a value of the type of x with null and undefined excluded.

Harshal Patil
  • 17,838
  • 14
  • 60
  • 126
  • ```private title?: string; private num!: number; private isDone!: boolean; private isReceived!: boolean;``` – Sinosaurus Jun 22 '18 at 09:56
  • 28
    It's more specific than this. it's important to understand **exactly** what it does or it'll just come back and bite you someday - `"Specifically, the operation x! produces a value of the type of x with null and undefined excluded."`. Also your answer implies that the two blocks of code are equivalent. The first block of code you have is safer - the second can actually have errors. However it's all down to the compiler warnings - and that's the ONLY thing that ! does - is 'adjust the type' known to Typescript. **RUNTIME CODE IS NEVER AFFECTED BY USE OF !** – Simon_Weaver Jan 30 '19 at 06:11
  • 4
    downvoting because the answer does not explain how the code example in the question affects type checking, and the example, while related, does not directly address the question asked and only makes the reader confused. Please see the answer from iislucas below – Zhe Aug 01 '21 at 16:26
  • What happens when `!` is used for a class field? – NeoZoom.lua Jan 19 '22 at 02:23
  • Actually, the answer below answers the question. – Fayyaz Naqvi Sep 24 '22 at 09:30