[英]Types of property 'cacheLocation' are incompatible
我有一個與 javascript 反應的舊應用程序,但我啟動了一個新應用程序,將 .JS 代碼緩慢遷移到 Typescript。
當 its.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);
問題是adalConfig
的類型被斷言而不是被定義 。 您可以在文檔中閱讀有關它的更多信息,但這基本上意味着TypeScript會猜測類型。 簡短示例:
type FooBar = 'foo' | 'bar';
const fooBar1 = 'foo'; // fooBar1: 'foo'
const fooBar2: FooBar = 'foo'; // fooBar2: FooBar
類型斷言取決於很多東西,而且很難手動猜測TypeScript將斷言哪種類型。 不過,快速編寫TS代碼確實很有用。 無論如何-代碼中的問題是adalConfig.cacheLocation
被聲明為string
,但是相反,您希望TypeScript了解其類型與"localStorage" | "sessionStorage" | undefined
兼容"localStorage" | "sessionStorage" | undefined
"localStorage" | "sessionStorage" | undefined
"localStorage" | "sessionStorage" | undefined
。
有兩種方法:
cacheLocation: 'localStorage' as 'localStorage'
:將精確到TypeScript,即cacheLocation
類型為'localStorage'
,從而與您想要的兼容 export const adalConfig: AdalConfig = ...
將精確到TypeScript,即整個adalConfig
對象是AdalConfig
類型的,因此它具有基本相同的效果 @ explosion-pills和@zerkms在此問題的評論中做出了貢獻
我知道這是一個老歌,但總是有助於發布更新。 您可以從 msal 庫中導入配置來設置 config 變量的類型。
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)
import { CacheLocation } from "@auth0/auth0-react";
const AUTH0_CASH_LOCATION: CacheLocation | unefined = "localstorage";
這會幫助你。 Auth0 提供程序確保緩存應保存在 memory 或 localStorage 中,因此您應該為 cacheLocation 選項提供 localStorage 或 memory
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.