Why do you want to use the "non-null assertion operator"?

The status property can either be string | undefined. What about passing an empty string or perhaps assigning a default value when you don't want to specify a value for status?

<Items status={status || ''}/>

Or:

type ItemProps = {
  status?: string;
};

const Items: React.FC<ItemProps> = ({ status = 'statusDefaultValue' }) => <div>Some JSX</div>

It's a bit hard for me to understand your case without knowing the context. Hope this can help.

You need to use custom type guard

const children = [{ children: 42 }, {}]
    .filter((elem): elem is { children: number } => Boolean(elem.children))
    .map(({ children }) => children) 

A couple of options for you:

1. Explicitly check that user isn't null and throw if it is

2. Define a "logged-in" state interface and write a hook that returns it after checking that user isn't null

3. Define a "logged-in" state interface and write a type assertion function, then use that in Dashboard or the hook

The common theme among them is not just asserting that user isn't null, but proving it at runtime so programming errors using state with null are caught proactively and clearly, rather than being random-seeming "Can't use X of null" errors.

1. Explicit check

Since the user can only see the Dashboard component if they're signed in, and when they're signed in the user context member won't be null, you can check that explicitly:

const { state } = React.useContext(context);
const { user } = state;
if (!user) {
    throw new Error(`ERROR: User reached Dashboard with null 'user' in context`);
}
// ...code uses `user`...

That way, TypeScript knows for the rest of the component code that user is not null, and you get a clear error if a programming error results in trying to use Dashboard when user is null.

2. LoggedInState and a hook

Alternatively, you could define LoggedInState:

interface LoggedInState {
    user: User;
}

and write a reusable hook:

function useLoggedInContext(context: ContextType): LoggedInState {
    const { state } = React.useContext(context);
    if (!state.user) {
        throw new Error(`ERROR: User reached logged-in-only component with null 'user' in context`);
    }
    return state as LoggedInState;
}

That still has a type assertion, but in a single reusable location with runtime code above proving that it's a correct assertion.

Then in Dashboard (and elsewhere):

const { state } = useLoggedIncontext(context);
// ...

3. A type assertion function

You can wrap that up in a type assertion function:

function assertIsLoggedInState(state: State): asserts state is LoggedInState {
    if (!state.user) {
        throw new AssertionError(`'state' has a null 'user' member, expected a logged-in state`);
    }
}

Then either use it directly in Dashboard:

const { state } = React.useContext(context);
assertIsLoggedInState(state);
// ...code can use `state.user`, which TypeScript now knows can't be `null`

or use it in that useLoggedInContext hook:

function useLoggedInContext(context: ContextType): LoggedInState {
    const { state } = React.useContext(context);
    assertIsLoggedInState(state);
    return state; // TypeScript knows this is a LoggedInState
}

As a minor tweak to the first one: If you don't need state for anything else, you can combine those first two statements:

const { state: { user } } = React.useContext(context);
// ...

That only declares user, without declaring state. If you have other things from state that you need, you could add them after user.

It's called the "Non-null assertion operator" and it tells the compiler that x.getY() is not null.

It's a new typescript 2.0 feature and you can read about it in the what's new page, here's what it says:

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 x and x as T, the ! non-null assertion operator is simply removed in the emitted JavaScript code.

// Compiled with --strictNullChecks
function validateEntity(e?: Entity) {
    // Throw exception if e is null or invalid entity
}

function processEntity(e?: Entity) {
    validateEntity(e);
    let s = e!.name;  // Assert that e is non-null and access name
}

Edit

There's an issue for documenting this feature: Document non-null assertion operator (!)

The ! after anything in TypeScript is generally something that you should avoid. You'll see most general linting rules throw a warning against using it.

It is used to force TypeScript to think that the value is not null. When the developer is so confident that this value will not be null or undefined when writing their code, they will use the ! operator.

Generally, it's better to just place a guard statement higher up in your code if something could potentially be null/undefined or use optional chaining instead like this: myPotentiallyUndefinedObject?.name || 'fallback'.

In your specific question about using null!, that just makes zero sense to use because you shouldn't be confidently saying that null will never be null because it's clearly null.

Just say const inputRef = useRef<HTMLInputElement | null>(null); without the ! and let TypeScript know that the value could be null. Then TypeScript will be much nicer to work with in the rest of your component.