如何在文字对象上正确使用接口

问题描述

我在打字稿上苦苦挣扎。假设您有一个文字对象，该对象的值是使用传播运算符分配的：

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'.

尝试像this answer中那样在文字对象上设置接口MicrosoftGraph.User并不能解决它，因为我必须对语法做一些错误：

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

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

这会在下面引发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的正确方法是什么？

解决方法

问题出在隐式类型上。

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: '',} as { profile: MicrosoftGraph.User },}