I am not sure but try this
import axios,{ AxiosRequestConfig } from 'axios';
const config:AxiosRequestConfig = {
method: "delete",
url: url,
headers: {
"Authorization": `Bearer ${elasticPrivateKey}`,
"Content-Type": "application/json",
},
data: data,
};
Answer from user14433996 on Stack OverflowI am not sure but try this
import axios,{ AxiosRequestConfig } from 'axios';
const config:AxiosRequestConfig = {
method: "delete",
url: url,
headers: {
"Authorization": `Bearer ${elasticPrivateKey}`,
"Content-Type": "application/json",
},
data: data,
};
You can do this:
import axios, { AxiosRequestConfig } from 'axios'
const config: AxiosRequestConfig = {
baseURL: 'https://api.pagar.me/core/v5',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
Authorization: `${process.env.BASIC}`
}
}
const pagarmeApi = axios.create(config)
export default pagarmeApi
Axios 1.3.4 typescript error for AxiosRequestConfig
Axios typescript customize AxiosRequestConfig
Axios interceptors with Typescript - Stack Overflow
reactjs - Axios post request with typescript issue - Stack Overflow
» npm install axios
You can extend any library types, by using the typescript decleration merging feature. (docs)
So this should do the job:
// theFileYouDeclaredTheCustomConfigIn.ts
import 'axios';
declare module 'axios' {
export interface AxiosRequestConfig {
handlerEnabled: boolean;
}
}
// in axios.d.ts
import 'axios';
declare module 'axios' {
export interface AxiosRequestConfig {
handlerEnabled?: boolean;
}
}
Go to the type definition of AxiosRequestConfig, you can see that, everything, including axios headers is optional:
interface AxiosRequestConfig<D = any> {
url?: string;
method?: Method | string;
baseURL?: string;
timeout?: number;
timeoutErrorMessage?: string;
withCredentials?: boolean;
// ... omited
}
When creating an axiosInstance and adding config, the config should be returned for the instance to pick up the configuration:
const axiosInstance = axios.create();
axiosInstance.interceptors.request.use((config) => {
if (config.headers) { // <- adding a check
config.headers["x-projectkey"] = 1234; // no errors
}
config.withCredentials = true; // to include credential, it should be outside of "if" block
return config;
});
Then in every request you made with the axiosInstance, it will include the x-projectkey header and credentials:
axiosInstance.get("url");
You should return config like below:
HTTP.interceptors.request.use((config: AxiosRequestConfig) => {
config.headers['x-projectkey'] = 1234
return config
})
Have fun.
There is an ability to set different types to input an output data (axios definitions):
post<T = never, R = AxiosResponse<T>>(url: string, data?: T, config?: AxiosRequestConfig<T>): Promise<R>;
So, in your case it would be something like:
export interface UserRegistrationModel {
email: string;
password: string;
firstname: string;
lastname: string;
}
export const register = async (user: UserRegistrationModel) => {
const { data } = await http.post<UserRegistrationModel, AxiosResponse<{ accessToken: string }>>("/users", user);
return data;
};
Change your register function to:
export const register = async (user: UserRegistrationModel) => {
const { data } = await http.post<AuthModel>("/users", user);
return data;
};
Also inside your class, the type for post should be:
post<T = any>(
url: string,
data?: T,
config?: AxiosRequestConfig
): Promise<T> {
return this.http.post(url, data, config);
}
Property 'accessToken' does not exist on type 'UserRegistrationModel
You set the return type for data to be UserRegistrationModel, and typescript is telling you that accessToken does not exist on that type. This should be obvious from your definition.
Argument of type '(data: AuthModel) => void' is not assignable to parameter of type '(value: UserRegistrationModel) => void | PromiseLike'. Types of parameters 'data' and 'value' are incompatible. Property 'accessToken' is missing in type 'UserRegistrationModel' but required in type 'AuthModel'.
You are trying to pass a function which expects AuthModel as the only argument, but once again your register function will pass UserRegistrationModel to that function. Typescript is just informing you of this.