The following eslint errors are generated by the code below :

@typescript-eslint/no-unsafe-member-access: Unsafe member access ['content-type'] on an any value.

export const getGraphPhoto = async () => {
  try {
    const response = await getGraphDetails(
      config.resources.msGraphPhoto.uri,
      config.resources.msGraphPhoto.scopes,
      { responseType: 'arraybuffer' }
    )
    if (!(response && response.data)) {
      return ''
    }
    const imageBase64 = new Buffer(response.data, 'binary').toString('base64')
    return `data:${response.headers['content-type']};base64, ${imageBase64}`
  } catch (error) {
    throw new Error(`Failed retrieving the graph photo: ${error as string}`)
  }
}

The promise getGraphDetails returns Promise<AxiosResponse<any>>

The issue is clearly that the property response.headers['content-type'] might not be present on the response object. To fix this I tried checking for it first but that doesn't get rid of the warning:

    if (
      !(response && response.data && response.headers && response.headers['content-type'])
    ) { return '' }

Thank you for any guidance you can give me to better understand and solve this issue.

The following eslint errors are generated by the code below :

@typescript-eslint/no-unsafe-member-access: Unsafe member access ['content-type'] on an any value.

export const getGraphPhoto = async () => {
  try {
    const response = await getGraphDetails(
      config.resources.msGraphPhoto.uri,
      config.resources.msGraphPhoto.scopes,
      { responseType: 'arraybuffer' }
    )
    if (!(response && response.data)) {
      return ''
    }
    const imageBase64 = new Buffer(response.data, 'binary').toString('base64')
    return `data:${response.headers['content-type']};base64, ${imageBase64}`
  } catch (error) {
    throw new Error(`Failed retrieving the graph photo: ${error as string}`)
  }
}

The promise getGraphDetails returns Promise<AxiosResponse<any>>

The issue is clearly that the property response.headers['content-type'] might not be present on the response object. To fix this I tried checking for it first but that doesn't get rid of the warning:

    if (
      !(response && response.data && response.headers && response.headers['content-type'])
    ) { return '' }

Thank you for any guidance you can give me to better understand and solve this issue.

• javascript
• typescript
• eslint

• These errors are simply being logged, aren't they? I mean, they're not blocking errors that prevent your application from running – virgiliogm Commented Jul 15, 2020 at 13:10
• That is correct – DarkLite1 Commented Jul 15, 2020 at 13:10

1 Answer 1

I haven't used TypeScript in a while so I hope I don't make any mistakes... I think that the intention of the rule is not to prevent access to a property that does not exist but to warn of the access to a property of any object typified as any (explicitly or implicitly). The rule doesn't take into account if there is code checking that this property exists but simply the type of the object. If it is not warning about accessing to response.data or response.headers but only to response. headers['content-type'], I guess that getGraphDetails response is typed but headers property is typed as any. I think you have three options:

• Set the type to the response headers. I'm not sure if you could find one in an existing project but, if not, you could declare an Interface as explicit as you want to fit your needs and use it like this:

interface ResponseHeaders {
  'content-type': string,
  [key: string]: string, // you could set more explicit headers names or even remove the above and set just this line
}
const headers : ResponseHeaders = response.headers;

• Disable the rule for this line or the entire file.

• Ignore the warning.