I'm following along with the Choose ES6 Modules Today guide, and I noticed one of the import statements he's using has an exclamation mark at the end:
import 'bootstrap/css/bootstrap.css!';
What does that exclamation mark signify?
This import statement appears on the first line of the startup.js file.
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.
produces a value of the type of x with null and undefined excluded. The description contains many fancy words, but in plain English, it means: when you add an exclamation mark after variable/property name, you're telling to TypeScript that you're certain that value is not null or undefined.
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 !
The exclamation mark (non-null assertion) operator removes null and undefined from the type of an expression. It is used when we we know that a variable that TypeScript thinks could be null or undefined actually isn't.
It means that a plugin will be called to load the file. By default the plugin/loader name equals the extension name. So in your example the css plugin will be called to load the bootstrap/css/bootstrap.css
file. One can define the plugin explicitly:
import 'bootstrap/css/bootstrap.css!css';
or
import 'bootstrap/css/bootstrap.css!customCssLoader';
Plugins have to be installed like any other normal module. More about this syntax here.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With