javascript - 属性 'cacheLocation' 的类型不兼容

Question

我有一个旧应用程序与 javascript 进行 react ，但我启动了一个新应用程序，以慢慢将 .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);

Answer 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 理解其类型与 兼容“本地存储”| “ session 存储”|未定义。

有两种方法:

1. cacheLocation: 'localStorage' as 'localStorage':将精确到 TypeScript，cacheLocation 的类型为 'localStorage'，从而与你想要什么
2. export const adalConfig: AdalConfig = ... 将向 TypeScript 精确表明整个 adalConfig 对象的类型为 AdalConfig，因此它具有效果基本相同

<子>感谢@explosion-pills和 @zerkms谁对此问题的评论做出了贡献