Merge typescript type and interface into one

Question

We're trying to create a TypeScript definition for the JSON file below.

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"]
    }
  }
}

The properties auth and cache are known by the msal Configuration Type . The properties scopes and resources are not known. So we're trying to merge the Type of the msal configuration with the custom added properties.

• There can be multiple resources than the ones shown here.

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

The interface above fails with the error message:

Conversion of type '{ auth: { clientId: string; authority: string; redirectUri: string; postLogoutRedirectUri: string; }; cache: { cacheLocation: string; }; scopes: { loginRequest: string[]; }; resources: { gatewayApi: {...; }; msGraphProfile: {...; }; msGraphMail: {...; }; msGraphGroupMember: {...; }; }; }' to type 'JsonConfigInterface' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Types of property 'auth' are incompatible. Property 'auth' is missing in type '{ clientId: string; authority: string; redirectUri: string; postLogoutRedirectUri: string; }' but required in type 'Configuration'.ts(2352) Configuration.d.ts(89, 5): 'auth' is declared here.

We're new to TS and trying to figure it out. Why can these types not be merged? What are we doing wrong?

Thank you for your help.

Answer 1

Msal.Configuration is

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

so you cant say that type of auth is Msal.Configuration. You should try something like

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

auth and cache is already in Msal.Configuration. If you want to cache is not optional, you should do

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

Answer 2

You should be typing auth and cache as AuthOptions and CacheOptions , which can be exported from Configuration.ts , as stated from the link you have provided. This way, it will be able to infer which of the properties are required/optional.

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