Object is possibly 'undefined' in Typescript on string value ''

Question

I am new to Typescript and currently converting our application from React JSX to TS so please let me know if I am misunderstanding the error.

I am getting Object is possibly 'undefined' on a prop string that is passed down from a parent component. The string is defined within INITIAL_STATE in the `parent as

private static INITIAL_STATE = {
  password: ''
};

Meaning that the prop for password in the child component should never be undefined. The child component is

interface InterfaceProps {
  onlyOneLeft?: boolean;
  isEnabled?: boolean;
  signInMethod?: any;
  onUnlink?: any;
  password?: string;
  passwordTwo?: string;
  handleFormSubmit?: any;
  handleInputChange?: any;
}

const ChildComponent = ({ password }: InterfaceProps): any => {
  const regUpCase = new RegExp('^(?=.*[A-Z])');
  const regLwCase = new RegExp('^(?=.*[a-z])');
  const regDigit = new RegExp('^(?=.*[0-9])');
  const regChar = new RegExp('^(?=.*[*@!#%&()^~{}_-])');

  const pwLength = password.length >= 8;
  const pwUpCase = regUpCase.test(password);
  const pwLwCase = regLwCase.test(password);
  const pwChar = regChar.test(password);
  const pwDigit = regDigit.test(password);
  const pwSpecial = pwChar || pwDigit;

  const isInvalid =
    !pwLength || !pwUpCase || !pwLwCase || !pwSpecial || password === '';

  return isInvalid ? (
    ... // return when password isInvalid
  ) : (
    ... // return when password !isInvalid
  );
};

ChildComponent.propTypes = {
  password: PropTypes.string
};

export default ChildComponent;

On pwLength I am seeing the error of Object is possibly 'undefined' on the password prop.

On { pwUpCase, pwLwCase, pwChar, pwDigit } on the password prop I am getting an error of Argument of type 'string | undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'.

My thought in this scenario is that the props password will never be undefined as it has an initial state of '' in the parent component.

Am I required to still check for password to undefined? Or perhaps should the correct method be to move isInvalid to the parent component? I would prefer I didn't need to, so any suggestions would be very helpful.

You are destructuring password from props and accessing its length property, but in your props interface you've marked password as optional, i.e. possibly undefined so password.length could possibly error if the prop is not passed. — Andrew Li
– Andrew Li, Commented Jun 24, 2019 at 14:41
Thanks @Li357. The reason for InterfaceProps): any is because I also have several functions passed down too but for the question I removed those as they do not apply. Again my understanding on any could be misplaced. — Darren
– Darren, Commented Jun 24, 2019 at 14:43
I am not talking about any (though you really shouldn't be using it as the return type. You can just let TS infer). I'm talking about password?: string -- you've marked the password prop as optional so there is a possibility password.length will error because password is undefined which TS is telling you. — Andrew Li
– Andrew Li, Commented Jun 24, 2019 at 14:46
I see. That makes perfect sense. Is there any benefit of using password: string over the answer below by R3tep? — Darren
– Darren, Commented Jun 24, 2019 at 14:52
R3tep suggests giving the prop a default value. Your suggestion makes the prop no longer optional, so whenever you use your component, you have to pass password. Do whatever suits you, though I'd expect R3tep is more fitting (providing a default value) — Andrew Li
– Andrew Li, Commented Jun 24, 2019 at 14:54

R3tep · Accepted Answer · 2019-06-24 14:50:16Z

2

password is optional on your interface.

So you need to pass a default value to password.

Like:

const ChildComponent = ({ password = '' }: InterfaceProps): any => {
-----------------------------------^^^^

answered Jun 24, 2019 at 14:50

R3tep

12.9k10 gold badges52 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Darren Over a year ago

Thank you. This did fix the error. Is there any benefit in operating this way opposed to the comment above of changing password?: string to password: string?

R3tep Over a year ago

This is a good question. I provid a way that respect the original interface. But if password is finally not optional. You can just remove ? into the interface.

Collectives™ on Stack Overflow

Object is possibly 'undefined' in Typescript on string value ''

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related