Non-Null With Root Import

New Vite TypeScript/React apps create themselves like this:

createRoot(document.getElementById('root')!).render(<App />);

What’s going on with that !?

The ! is TypeScript is the non-null assertion operator. It’s a way of saying to our TypeScript compiler: “I know that this is not null; don’t check it.”

Without it, you’ll see this on apps that have been converted to TypeScript, checking for root before loading the app.

const root = document.getElementById('root');

if (!root) {
  throw new Error('Root element not found');
}

createRoot(root).render(<App />);

Type safety is great, here we control both index.html and this bootstrap code, so we know the element exists. If someone removed it, the application couldn’t start. The non-null assertion operator states this explicitly.

Non-null assertion operator docs