对象可能为“ null”-TypeScript linter错误

Question

I have a question about TypeScript! We're doing a JSX to TypeScript conversion across our projects.

  {instances.map(instance => {
    const { id, name, type } = second;

    const pageUrl = makePath(
      routes.page.path,
      { firstId: first.id , secondId: id }, <<<<<<
    );

On the line with "<<<<<<", "first" of "first.id" is highlighted with the following error:

Object is possibly 'null'.

I'm unsure how to define it to where it wouldn't be considered null. I was able to figure out the second one through destructuring, but you can't define "id" twice. Any guidance would be much appreciated!

Answer 1

It seems to work if I define earlier in the component,

  const firstId = (first ? first.id : '');

and replace firstId: first.id with firstId: firstId .

If this isn't a recommended solution, please let me know! However, it does resolve the error I was seeing and it doesn't seem to impact functionality at all.

Answer 2

The type checker is unable to determine if first will ever be non null . You can add a non-null assertion operator ! directly after the object in question to tell the linter that it will not be null, try this:

{ firstId: first!.id , secondId: id }, <<<<<<