属性“cacheLocation”的类型不兼容答案

【问题标题】：Types of property 'cacheLocation' are incompatible属性“cacheLocation”的类型不兼容
【发布时间】：2021-07-15 08:46:23
【问题描述】：

我有一个与 javascript 反应的旧应用程序，但我启动了一个新应用程序，以慢慢将 .JS 代码迁移到 Typescript。

当它的 .js 构建成功时，我要迁移的第一个文件是一个配置文件。

重命名为 .TS 时出现此错误

/Users/xx/yy/lulo/src/adalConfig.ts
(13,54): Argument of type '{ tenant: string; clientId: string; endpoints: { api: string; }; 'apiUrl': string; cacheLocation: string; }' is not assignable to parameter of type 'AdalConfig'.
  Types of property 'cacheLocation' are incompatible.
    Type 'string' is not assignable to type '"localStorage" | "sessionStorage" | undefined'

文件是这样的：

import { AuthenticationContext, adalFetch, withAdalLogin } from 'react-adal';

export const adalConfig = {
  tenant: 'xxxx-c220-48a2-a73f-1177fa2c098e',
  clientId: 'xxxxx-bd54-456d-8aa7-f8cab3147fd2',
  endpoints: {
    api:'xxxxx-abaa-4519-82cf-e9d022b87536'
  },
  'apiUrl': 'https://xxxxx-app.azurewebsites.net/api',
  cacheLocation: 'localStorage'
};

export const authContext = new AuthenticationContext(adalConfig);

export const adalApiFetch = (fetch, url, options) =>
  adalFetch(authContext, adalConfig.endpoints.api, fetch, adalConfig.apiUrl+url, options);

export const withAdalLoginApi = withAdalLogin(authContext, adalConfig.endpoints.api);

【问题讨论】：

试试cacheLocation: 'localStorage' as 'localStorage'
哈哈，这行得通，为什么？将字符串转换为字符串？
请作为答案发帖
与其丑陋的'localStorage' as 'localStorage' 不如正确输入adalConfig：在声明时指定它的类型。
export const adalConfig: ...typenamehere.... = {

标签： javascript reactjs typescript

【解决方案1】：

问题是adalConfig 的类型被断言而不是被定义。您可以阅读更多关于它的信息in the docs 但它基本上意味着 TypeScript 猜测类型。简短的例子：

type FooBar = 'foo' | 'bar';
const fooBar1 = 'foo'; // fooBar1: 'foo'
const fooBar2: FooBar = 'foo'; // fooBar2: FooBar

TypeScript playground link

类型断言依赖于一大堆东西，真的很难手动猜测 TypeScript 将断言哪种类型。不过，快速编写 TS 代码确实很有用。在任何情况下 - 您的代码中的问题是 adalConfig.cacheLocation 被断言为 string，但是您希望 TypeScript 了解它的类型与 "localStorage" | "sessionStorage" | undefined 兼容。

两种方法：

cacheLocation: 'localStorage' as 'localStorage'：将精确到 TypeScript，cacheLocation 的类型为 'localStorage'，因此与您想要的兼容
export const adalConfig: AdalConfig = ... 将精确到 TypeScript 整个 adalConfig 对象的类型为 AdalConfig，因此它具有基本相同的效果

感谢 @explosion-pills 和 @zerkms 在 cmets 中为这个问题做出了贡献

【讨论】：

【解决方案2】：

我知道这是一个老歌，但总是有助于发布更新。您可以从 msal 库中导入配置来设置配置变量的类型。

import { MsalAuthProvider, LoginType  } from 'react-aad-msal';
import { Configuration } from 'msal';

// Msal Configurations
const config: Configuration = {
    auth: {
      authority: 'https://login.microsoftonline.com/',
      clientId: '<YOUR APPLICATION ID>'
    },
    cache: {
      cacheLocation:"localStorage",
      storeAuthStateInCookie: true,
    }
  };

  // Authentication Parameters
  const authenticationParameters = {
    scopes: [
        `<your app registartion app id>/.default`
    ]
  }
   
  // Options
  const options = {
    loginType: LoginType.Popup,
    tokenRefreshUri: window.location.origin + '/auth.html'
  }

  export const authProvider = new MsalAuthProvider(config, authenticationParameters, options)

【讨论】：