score:1

Accepted answer

assuming you have defined user as:

const user: user|undefined = ...;

if you want to access a property of user, use this syntax:

user!.firstname

this tells typescript that you know what you're doing and that user is never undefined or null. it also tells typescript that properties accessed this way are not to be assumed to possibly be null or undefined, which i'm guessing is why you were now getting more errors.


note!

const user: user|undefined = ...;

is redundant typing. you can just revert back to using

const user: user = ...;

but instead of using the ?. operator to access properties, continue using !..

sorry if this is your first time using typescript. it's usually not this bad.

score:1

consider splitting your components into:

  • components that must have a user
  • components that may have a user

from the component that may have a user, render the component that must have one.

class usercomponent extends react.component<{ user: user }> {
  render() {
        // note: since user must be defined for this component, we are able to access properties without the ? or ! syntax
        return (
            <div>{this.props.user.firstname}</div>
        )
    }
}

// note: this.state.user is optional, and therefore is initialized as undefined
class mayhaveusercomponent extends react.component<{}, { user?: user }> {
    render() {
        if (this.state.user) {
            return <usercomponent user={this.state.user} />
        }
        return (
            <div>no user yet!</div>
        )
    }

    setuser(user: user) {
      this.setstate({ user: { ...user, ...this.state.user } })
    }
}

score:1

you're not just making typescript happy here. if you pass user: undefined to code that expects there to be a user object, then that will definitely cause runtime errors when you use undefined like an object. these checks are necessary if that is to be allowed.

typically, i handle that in react by returning a render early if a required value is null or undefined. after that return, you can assume the user exists as normal.

class component({ user: user | null | undefined }) {
  if (!user) return <someloadingindicator /> // or: return null, or whatever

  // from here on, `user` is known to be of type `user`, not null, and not undefined.

  return <div>{user.lastname}</div>
}

adding conditions, such as if(user) does not seem to satisfy ts.

it really does though. you just have to be on a conditional branch where the check has been run. meaning you have to be in the { } of an if statement:

const user: user | null = math.random() > 0.5 ? getuser() : null
if (user) {
  // here user is of type: user
} else {
  // here user is of type: null
}
// here user is of type: user | null

or in code that could only run if the conditional was truthy.

const user: user | null = math.random() > 0.5 ? getuser() : null
if (!user) {
  // here user is of type: null
  throw new error("user is required!")
}
// here user is of type: user

Related Query

More Query from same tag