vue.js - What does !: mean in Typescript?

Question

$refs!: {
    helloComponent: Hello
}

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

Answer 1

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.

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.