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

Question

考虑以下代码:

const defaultState = () => {
  return {
    profile: {
      id: '',
      displayName: '',
      givenName: '',
    },
    photo: '',
  }
}

const state = reactive(defaultState())

export const setGraphProfile = async () => {
  const response = await getGraphProfile()
  state.profile = { ...defaultState().profile, ...response.data }
}

这会生成 ESLint 警告:

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

这意味着 response.data 中的属性可能与 profile 中的不匹配. getGraphProfile的返回是 Promise<AxiosResponse<any>> .当然，通过简单地忽略它很容易摆脱这个 ESLint 警告:

// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
state.profile = { ...defaultState().profile, ...response.data }

问题:

如何塑造 Promise 中的数据 getGraphProfile所以它匹配？
因为可以创建一个 TS interface但这只会使用对象 defaultState().profile 创建重复的代码

为什么 TypeScript 对这段代码没有问题，但 linter 有问题？两者都不需要对齐吗？

实现:

const callGraph = (
  url: string,
  token: string,
  axiosConfig?: AxiosRequestConfig
) => {
  const params: AxiosRequestConfig = {
    method: 'GET',
    url: url,
    headers: { Authorization: `Bearer ${token}` },
  }
  return axios({ ...params, ...axiosConfig })
}

const getGraphDetails = async (
  uri: string,
  scopes: string[],
  axiosConfig?: AxiosRequestConfig
) => {
  try {
    const response = await getToken(scopes)
    if (response && response.accessToken) {
      return callGraph(uri, response.accessToken, axiosConfig)
    } else {
      throw new Error('We could not get a token because of page redirect')
    }
  } catch (error) {
    throw new Error(`We could not get a token: ${error}`)
  }
}

export const getGraphProfile = async () => {
  try {
    return await getGraphDetails(
      config.resources.msGraphProfile.uri,
      config.resources.msGraphProfile.scopes
    )
  } catch (error) {
    throw new Error(`Failed retrieving the graph profile: ${error}`)
  }
}

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')
    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
    return `data:${response.headers['content-type']};base64, ${imageBase64}`
  } catch (error) {
    throw new Error(`Failed retrieving the graph photo: ${error}`)
  }
}

Answer 1

TypeScript 不会产生警告，只会产生错误。就 TS 而言，any赋值有效。这就是 linter 提供额外支持的地方。
幸运的是，您不需要复制您的界面。使用 TypeScript 的 ReturnType获取 profile 的类型您的 defaultState 中的对象方法:

type IProfile = ReturnType<typeof defaultState>["profile"]

上面一行利用了 3 个很棒的 TypeScript 特性:

ReturnType推断函数返回的类型

typeof从对象实例推断接口(interface)

["profile"]获取接口(interface)的某个属性的类型

现在，让你的 callGraph通用函数:

function callGraph<T>(url: string, token: string, axiosConfig?: AxiosRequestConfig) {
  const params: AxiosRequestConfig = {
    method: 'GET',
    url: url,
    headers: { Authorization: `Bearer ${token}` },
  }
  return axios.request<T>({ ...params, ...axiosConfig })
}

并更新 callGraph调用您的 getGraphDetails功能:

...
  if (response && response.accessToken) {
    return callGraph<IProfile>(uri, response.accessToken, axiosConfig)
  }
...

现在您的图形调用已正确键入，您不必复制配置文件定义；相反，您使用 TypeScript 令人敬畏的类型推断技术从函数的返回类型中“读取您的接口(interface)”。