Как правильно использовать интерфейс на буквальном объекте

Question

Я немного борюсь с машинописным текстом. Предположим, у вас есть буквальный объект, значение которого присваивается оператором распространения:

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

const state = reactive(defaultState())
const response = await getGraphProfile()
state.profile = { ...defaultState().profile, ...response.data }

После обновления библиотеки типов @microsoft/microsoft-graph-types возникают следующие ошибки TS:

TS2322: Type '{ accountEnabled?: Maybe<boolean>; ageGroup?: string | null | undefined; assignedLicenses?: MicrosoftGraph.AssignedLicense[] | undefined; assignedPlans?: MicrosoftGraph.AssignedPlan[] | undefined; ... 102 more ...; surName: string; }' is not assignable to type '{ id: string; displayName: string; givenName: string; surName: string; jobTitle: string; mail: string; mobilePhone: string; officeLocation: string; businessPhones: string[]; preferredLanguage: string; userPrincipalName: string; }'.
  Types of property 'displayName' are incompatible.
    Type 'string | null' is not assignable to type 'string'.
      Type 'null' is not assignable to type 'string'.

Пытаюсь настроить интерфейс MicrosoftGraph.Userна буквальном объекте, как в этом ответе, не разрешил его, так как я должен что-то делать с синтаксисом:

import * as MicrosoftGraph from '@microsoft/microsoft-graph-types'

const defaultState = () => {
  return {
    profile: MicrosoftGraph.User = {
      id: '',
      displayName: '',
      givenName: '',
      surName: '',
    },
  }
}

Это вызывает ошибку TS ниже, но User интерфейс определенно есть и правильно используется в функции getGraphProfile.

TS2339: свойство "Пользователь" не существует для типа "typeof import("T:/Test/Brecht/Node/prod/hip-frontend/node_modules/@microsoft/microsoft-graph-types/microsoft-graph")".

Дополнительный код:

import config from 'src/app-config.json'
import axios, { AxiosRequestConfig } from 'axios'
import { getToken } from 'src/services/auth/authService'
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types'

const 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 })
}

const getGraphDetails = async <T>(
  uri: string,
  scopes: string[],
  axiosConfig?: AxiosRequestConfig
) => {
  try {
    const response = await getToken(scopes)
    if (response && response.accessToken) {
      return callGraph<T>(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<MicrosoftGraph.User>(
      config.resources.msGraphProfile.uri,
      config.resources.msGraphProfile.scopes
    )
  } catch (error) {
    throw new Error(`Failed retrieving the graph profile: ${error}`)
  }
}

Как правильно спасти недвижимость displayName в качестве string | null?

Answer 1

Проблема заключается в неявных типах.

const state = reactive(defaultState())

State здесь определяется без явного типа и назначается как reactive(defaultState). Это означает, что он обозначается какdefaultState.

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

defaultState здесь не имеет типа и, следовательно, имеет неявный тип возвращаемого объекта.

Итак, когда мы присваиваем значение state

state.profile = { ...defaultState().profile, ...response.data }

где response.data типизирован для MicrosoftGraph.User где displayName: string | null.

Так state.profile.displayNameтип это string но, response.data.displayNameтип это string | null что приводит к нашей ошибке TS.

Решение

Все, что нам нужно сделать, это лучше defaultState.

const defaultState = () => {
  return {
    profile: {
      id: '',
      displayName: '',
      givenName: '',
      surName: '',
    },
  } as { profile: MicrosoftGraph.User },
}