将 typescript 类型和接口合二为一答案

【问题标题】：Merge typescript type and interface into one将 typescript 类型和接口合二为一
【发布时间】：2020-05-14 19:09:53
【问题描述】：

我们正在尝试为下面的 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"]
    }
  }
}

auth 和 cache 属性由 msal Configuration Type 已知。 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; 权限：字符串；重定向URI：字符串； postLogoutRedirectUri：字符串； };缓存：{缓存位置：字符串； };范围：{登录请求：细绳[]; };资源：{ gatewayApi：{ ...; }; msGraphProfile: { ...; }; msGraphMail: { ...; }; msGraphGroupMember: { ...; }; }; }' 输入 'JsonConfigInterface' 可能是一个错误，因为这两种类型都没有与另一个充分重叠。如果这是故意的，请转换首先表达“未知”。属性“auth”的类型是不相容。 '{ clientId: string; 类型中缺少属性 'auth'权限：字符串；重定向URI：字符串； postLogoutRedirectUri：字符串； }' 但 'Configuration'.ts(2352) Configuration.d.ts(89, 5) 类型中需要： 'auth' 在这里声明。

我们是 TS 新手，正在努力解决这个问题。为什么这些类型不能合并？我们做错了什么？

感谢您的帮助。

【问题讨论】：

标签： javascript typescript

【解决方案1】：

Msal.Configuration 是

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

所以你不能说认证类型是 Msal.Configuration。你应该尝试类似

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

身份验证和缓存已在 Msal.Configuration 中。如果你想缓存不是可选的，你应该这样做

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

【讨论】：

【解决方案2】：

您应该将auth 和cache 输入为AuthOptions 和CacheOptions，可以从Configuration.ts 导出，如您提供的link 所述。这样，它将能够推断出哪些属性是必需的/可选的。

interface JsonConfigInterface {
  auth: AuthOptions,
  cache: CacheOptions,
  scopes: {
    loginRequest: string[]
  }
  resources: ResourcesInterface
}

【讨论】：