从 JS 切换到 TS 时类型错误上不存在属性

Question

Hello I have recently made the decision to switch from JS to TS for better coding but I am getting these errors from TypeScript, Validate function works perfectly fine in JavaScript.

Property 'user' does not exist on type '{ isValid: boolean; user: string; userLowercase: string; } | undefined'
Property 'userLowercase' does not exist on type '{ isValid: boolean; user: string; userLowercase: string; } | undefined'

These are the files

//functions.ts
function Validate(arg) {
    if (!arg) return
    let query :string = arg.toString().replace("@", "")
    let regex = /^[a-zA-Z0-9._-]+$/
    let isValid = regex.test(query)
    if (!isValid) return
    let userLowercase :string = query.toLowerCase()
    return { isValid: true, user : query, userLowercase }
}

//firstCommand.ts 
import { Validate } from './functions'

class firstCommand extends Commands {
    async command() {
        if (!Validate(this.arg)) return
        const { user, userLowercase } = Validate(this.arg)
        ///
    }
}

I have searched on Google but no one seem to have the same problem? Am I writing the code wrong and how can I fix this?

Thank you so much!

Answer 1

This error tells you what is wrong:

Property 'user' does not exist on type
  '{ isValid: boolean; user: string; userLowercase: string; } | undefined'

Note the last bit | undefined | undefined . That means the the type of your variable could be the value you expect, or it might be undefined . If the value actually is undefined , then your program would crash here.

The problem is your Validate() function. It has this line:

if (!arg) return

And this line:

if (!isValid) return

So if arg or isValid are falsy, the function returns undefined . It only return the full object if it makes past those early return statements.

All that means that the return type of your function is:

{ isValid: boolean; user: string; userLowercase: string; } | undefined

---

To fix this you must test the value for existence before you treat this value as if it exists.

const validationResult = Validate(this.arg)
if (validationResult) {
  const { user, userLowercase } = validationResult
  // proceed...
}

Typescript will notice that you checked the variable for existence, and let you proceed from inside that if statement.