如何解决如何在文字对象上正确使用接口
我在打字稿上苦苦挣扎。假设您有一个文字对象,该对象的值是使用传播运算符分配的:
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 },}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。