Question

我们正在尝试为下面的JSON文件创建TypeScript定义。

app-config.json

{
  "auth": {
    "clientId": "acb610688b49",
  },
  "cache": {
    "cacheLocation": "localStorage"
  },
  "scopes": {
    "loginRequest": ["openid", "profile", "user.read"]
  },
  "resources": {
    "gatewayApi": {
      "resourceUri": "https://localhost:44351/api",
      "resourceScope": ["api://0e01a2d8/access_as_user"]
    },
    "msGraphProfile": {
      "resourceUri": "https://graph.microsoft.com/v1.0/me",
      "resourceScope": ["openid", "profile", "user.read"]
    }
  }
}

msal Configuration Type知道属性auth和cache。属性scopes和resources未知。因此，我们正在尝试将msal配置的类型与自定义添加的属性合并。

可能有比此处显示的资源更多的资源。

import * as Msal from 'msal'
import * as configJson from 'src/app-config.json'

interface ResourceInterface {
  resourceUri: string
  resourceScope: string | string[]
}

interface ResourcesInterface {
  [key: string]: ResourceInterface
}

interface JsonConfigInterface {
  auth: Msal.Configuration,
  cache: Msal.Configuration,
  scopes: {
    loginRequest: string[]
  }
  resources: ResourcesInterface
}

const config: JsonConfigInterface = configJson as JsonConfigInterface

上面的接口失败，并显示错误消息：

类型'{auth：{clientId：string; 权限：字符串； redirectUri：字符串； postLogoutRedirectUri：字符串； };缓存：{cacheLocation：string; };范围：{loginRequest：串[]; };资源：{gatewayApi：{...; }; msGraphProfile：{...; }; msGraphMail：{...; }; msGraphGroupMember：{...; }; }; }' 输入 'JsonConfigInterface'可能是错误的，因为这两种类型彼此充分重叠。如果这是故意的，请转换首先是“未知”。属性“ auth”的类型为不相容。类型'{clientId：string;类型中缺少属性'auth'。权限：字符串； redirectUri：字符串； postLogoutRedirectUri：字符串； }'但类型'Configuration'.ts（2352）Configuration.d.ts（89，5）中需要：此处声明为“ auth”。

我们是TS的新手，正在努力弄清楚。为什么不能合并这些类型？我们在做什么错了？

谢谢您的帮助。

Answer 1

Msal.Configuration是

export type Configuration = {
  auth: AuthOptions,
  cache?: CacheOptions,
  system?: SystemOptions,
  framework?: FrameworkOptions
};

所以您不能说auth的类型是Msal.Configuration。您应该尝试类似

interface JsonConfigInterface extends Msal.Configuration {
  scopes: {
    loginRequest: string[]
  },
  resources: ResourcesInterface
}

auth和缓存已经在Msal.Configuration中。如果要缓存不是可选的，则应该

interface JsonConfigInterface extends Msal.Configuration {
  cache: Msal.CacheOptions,
  scopes: {
    loginRequest: string[]
  },
  resources: ResourcesInterface
}

Answer 2

您应该以{{1}}和auth的形式输入cache和AuthOptions，如{{3}中所述，可以从CacheOptions导出。 }您已提供。这样，就可以推断出哪些属性是必需的/可选的。

Configuration.ts

将打字稿类型和接口合并为一个

2 个答案: