@typescript-eslint/no-unsafe-assignment: Unsafe assignment of an `any` value

Question

I am using TypeScript in my client , when i run my application , there are two errors show as follow :

@typescript-eslint/no-unsafe-assignment: Unsafe assignment of an `any` value.

@typescript-eslint/no-unsafe-member-access: Unsafe member access .value on an `any` value.

Here is my code :

const userInfo = ref({} as UserInfo) // first error

$f.axios
    .get<UserInfo>('/comm/auth/get-my-info')
    .then((result) => {
      userInfo.value = result.data // second error
    })
    .catch((err) => {
      //....
    })

UserInfo in .ts:

export interface UserInfo {
  userName: string
  realName: string
  password: string | null
  email: string | null
  mobilePhone: string | null
  appToken: string | null
  internalTags: string | null
  enabledState: boolean
  isApiUser: boolean
  createDt: Date
  createP: string
  createPn: string | null
  updateDt: Date
  updateP: string
  updatePn: string | null
  firstLogin: true
  passwordExpiresDt: Date | null
  rolesString: string | null
  userRoleIds: number[] | null
}

Answer 1

@typescript-eslint/no-unsafe-assignment: Unsafe assignment of an any value.

This means that the properties in response.data might not match the ones of the interface UserInfo.

We can get rid of this ESLint warning by adding like :

// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment

@typescript-eslint/no-unsafe-member-access: Unsafe member access .value on an any value.

As per the above error, You don't have any value property in your UserInfo interface. Hence, it is expecting value property should be there in the interface. Issue will get resolve by adding it in the UserInfo.