I have a small problem deleting with types. Here is my code snippet where I have the issue:
const prams = useParams<RouteParams>();
const [event, setEvent] = useState<EventType>();
const [error, setError] = useState<boolean>(false);
const [loading, setLoading] = useState<boolean>(false);
let id = prams.id;
console.log(id);
useEffect(() => {
setLoading(true);
if (id) {
getEventById(id)
.then((res: EventType) => { // the issue is here it says is not assignable to parameter of type '(value: unknown) => void | PromiseLike<void>'
setEvent(res);
console.log(res, "rs");
setLoading(false);
})
.catch((err) => {
setError(true);
setLoading(false);
});
}
}, [id]);
console.log(event, "events");
When I replace Event with any it works fine.
the function for request the Event
import axios from "axios";
import { Config, URL } from "./Api";
const getEventById = async (id: string) => {
const { data } = await axios.get(`${URL}getEvent/${id}`, Config);
return Object.values(data?.event)[0];
};
export { getEventById };
Here is the Event Type:
export type EventType = {
ADDRESS: string;
EVENT_DATE: string;
ID: string;
MIN_PRICE: number;
NAME: string;
PICTURE: string;
PLACE: string;
PREVIEW: string;
REGISTRATION_END_DATE: string;
TYPE: string;
DESCRIPTION: string;
RESTAURANT_LOGO: string;
RESTAURANT_ID?: string;
};
and here is the response from the getEventById():
Any clue where the problem is, or maybe the solution?
Well, your getEventById doesn't declare a proper return type, so it does not return a Promise<Event> but a Promise<any> because there is no way, the TS compiler can infer the correct type.
The simplest would probably be
const getEventById = async (id: string): Promise<Event> => {
const { data } = await axios.get(`${URL}getEvent/${id}`, Config);
return Object.values(data?.event)[0];
};
Here Event is representing the Keyboard event. You need a different interface relevant to the response from the service. Try renaming it and see if you are importing the right interface
Related
I am getting some error while importing JSON file using Template literal in react typescript.
export interface IData {
BASE_PRICE: number;
TIER: string;
LIST_PRICE_MIN: number;
LIST_PRICE_MAX: number;
DISCOUNT_PART_NUM: Discout;
}
type Discout = {
D1RJ6LL: number;
D1RJ8LL: number;
D1RJALL: number;
};
const [data, setData] = useState<IData[]>([]);
useEffect(() => {
fetchPrice(lang);
}, [lang]);
const fetchData = (lang: string) => {
if (lang) {
const data = import(`../locales/${lang}.json`);
setData(data); // its giving me error like Argument of type 'Promise<any>' is not assignable to parameter of type 'SetStateAction<IData[]>
}
};
I tried this way and I am not getting any issue but also I am not able to see data in proper way
Here is image
const fetchPrice = async (lang: string) => {
if (lang) {
const priceRangeData = import(`../locales/${lang}.json`);
setData(await priceRangeData);
}
};
You issue stems from import being an async function, which will always return a Promise with the data. Your fetchPrice already handles this by being an async function too, which can then await the promise as you do in setData(await priceRangeData). So a solution would be to do the same for fetchData, like so:
const fetchData = async (lang: string) => {
if (lang) {
const data = await import(`../locales/${lang}.json`);
setData(data);
}
};
You just need make fetchData to be async function and make await before import(), because it return Promise. Don't forget make type assertion.
const fetchData = async (lang: string) => {
if (lang) {
const data = await import(`../locales/${lang}.json`);
setData(data.default as IData[]);
}
};
What I need to do is to be able to log in with GIS, and then fetch an URL that would end with the {user.email} we just got from decoding the JWT.
Here is my code :
interface userI {
name: string | null;
iat?: number;
iss?: string;
picture?: string;
email?: string;
}
interface bookingI {
id: number;
bureau: string;
aile: string;
office: string;
office_id: string;
cote: string;
time: Date;
etage: string;
direction: string;
espace: string;
}
const [ user, setUser] = useState<userI>({name: null});
function handleCallbackResponse(response: any) {
console.log("Encoded JWT ID token: " + response.credential);
var userObject = jwt_decode(response.credential);
console.log(userObject);
localStorage.setItem('user', JSON.stringify(userObject))
setUser(userObject as userI);
document.getElementById("signInDiv")!.hidden = true;
}
useEffect(() => {
/* global google */
//#ts-ignore
google.accounts.id.initialize({
client_id: "myId",
callback: handleCallbackResponse
});
//#ts-ignore
google.accounts.id.renderButton(
document.getElementById("signInDiv"),
{ theme: "outline", size: "large", shape: "pill"}
);
},[]);
const [booking, setBooking] = useState<bookingI>();
const apiUrl = "apiUrl"
useEffect(() => {
const api = async () => {
const data = await fetch(`${apiUrl}/${user.email}`, {
method: "GET"
});
const jsonData = await data.json();
console.log("jsonData : ")
console.log(jsonData)
setBooking(jsonData.data);
};
api();
},[]);
What I have been able to do so far : Log in with GIS, decoding JWT and display {user.email} it in return, fetch my API NOT dynamically ("url/myemail").
What I did not manage to do : Be able to fetch (`url/${user.email}`) the moment login with GIS was successful (and not before), stay signed in even after refreshing (maybe it's the problem I need to fix).
Pretty new to Typescript, thank you for your patience and consideration.
Solved :
const userEmail = user.email
const fullUrl = `${apiUrl}/${userEmail}`
useEffect(() => {
const api = async () => {
//console.log(fullUrl)
const data = await fetch(`${fullUrl}`, {
method: "GET"
});
const jsonData = await data.json();
//console.log("jsonData : ")
//console.log(jsonData)
console.log("Extractable data : ")
console.log(jsonData.data)
setBooking(jsonData.data);
};
if (userEmail !== undefined){
api();
}
},[fullUrl, userEmail]);
I still need to stay signed in even after refreshing but my main problem is solved
Im new to using typescript with react. I have an application where I call an api and set the response to a state. I have created a generic type for api calls as follow.
const responseBody = <T>(response: AxiosResponse<T>) => response.data;
const restApiCalls = {
get: <T>(url: string) => axios.get<T>(url).then(responseBody),
post: <T>(url: string, body: {}) =>
axios.post<T>(url, body).then(responseBody),
put: <T>(url: string, body: {}) => axios.put<T>(url, body).then(responseBody),
};
const users = {
getUsers: () =>
restApiCalls.get<Users[]>("https://jsonplaceholder.typicode.com/users"),
};
const apis = {
users,
};
export default apis;
The getUser() function calls the get request and returns a list of Users
The following is the User interface
export interface Users {
id: boolean;
name: string;
username: string;
email: string;
address: Address;
phone: string;
website: string;
company: Company;
}
interface Address {
street: string;
suite: string;
city: string;
zipcode: string;
geo: Geo;
}
interface Geo {
lat: string;
lng: string;
}
interface Company {
name: string;
catchPhrase: string;
bs: string;
}
When calling the api, the api returns the data successfully and I assigned the returned data to the state using setUsermethod.
Following is the state.
const [user, setUser] = useState<Users[]>();
I assigned the fetched data to state as follow.
useEffect(() => {
const fetchData = async () => {
const res = await apis.users.getUsers();
setUser(res);
};
fetchData();
}, []);
when console the user state, the data is is there and it is logged successfully. But I want to check the length of the user state in a if condition. If I check the length, it show the following error.
Object is possibly 'undefined'.ts(2532)
This is the code I used to check the length
const someFunction= () => {
if (user?.length > 1) {
for (let index = 0; index < user?.length; index++) {
console.log(user[index])
}
}
};
But I if set the state type to any instead of User[], it works. WHat might be the issue?
The expressions with users are all capable of resolving to undefined, which cannot be compared to a number and cannot be indexed. For example user?.length could be undefined (if user is undefined); same with user[index]
You need to handle the undefined case. For example:
const someFunction= () => {
if(!user) { return; }
if (user.length > 1) {
for (let index = 0; index < user.length; index++) {
console.log(user[index])
}
}
};
I have an interface that describes basic database CRUD operations like so:
export interface IUserDB {
insert: (params: UserAttributes) => Promise<UserResult>
findById: ({ id }: { id: number }) => Promise<UserResult | null>
findByEmail: ({ email }: { email: string }) => Promise<UserResult | null>
remove: ({ id }: { id: number }) => Promise<any>
update: ({
id,
...changes
}: { id: number } & UserAttributes) => Promise<UserResult>
}
I then go ahead to use this interface in this manner:
const makeAddUser = ({ usersDb }: { usersDb: IUserDb }) => {
return async function addUser(userDetails: User) {
const user = makeUser(userDetails)
const exists = await usersDb.findByEmail({ email: user.getEmail() })
if (exists) {
throw new UniqueConstraintError('Email')
}
const newUser = await usersDb.insert({
name: user.getName(),
email: user.getEmail(),
password: user.getPassword(),
username: user.getUsername(),
})
const { id } = newUser.user
await publisher(id.toString(), 'newuser.verify')
await consumer('verify_queue', verifyUser, '*.verify')
return newUser
}
}
I want to be able to reuse this interface for PostDb and CommentDb without me having to write another interface that describes a Post database operation, how can I achieve this? I read about Typescript Generics, but I am not really sure how to apply it to this case, any help will be appreciated. I am still trying to get a hang of Typescript. Thank you very much!
Not really sure how to explain it other than to just show you, but here is what I would do (with some filler code to make things work, but just focus on the interfaces). But basically you define an interface, and pass in the types you want it to support inside <>. So below I do
export interface IDB<Attributes, Result> {
which means you pass in two additional types to this:
interface IUserDb extends IDB<UserAttributes, UserResult>
and now IUserDb is an IDB where any place IDB has Attributes it instead uses UserAttributes, and same with Result and UserResult:
https://codesandbox.io/s/typescript-playground-export-forked-nej0s?file=/index.ts:0-1569
export interface IDB<Attributes, Result> {
insert: (params: Omit<Attributes, 'id'>) => Promise<Result>
findById: ({ id }: { id: number }) => Promise<Result | null>
remove: ({ id }: { id: number }) => Promise<any>
update: ({
id,
...changes
}: { id: number } & Attributes) => Promise<Result>
}
interface UserAttributes {
id: string;
name: string;
username: string;
email: string;
password: string;
}
interface UserResult extends UserAttributes {
getEmail(): string
getName(): string
getPassword(): string
getUsername(): string
}
export interface IUserDb extends IDB<UserAttributes, UserResult>{
findByEmail: ({ email }: { email: string }) => Promise<UserResult | null>
}
const makeUser = (user: UserAttributes): UserResult => {
const u: any = { ...user };
u.getName = () => u.name;
u.getEmail = () => u.email;
u.getPassword = () => u.password;
u.getUsername = () => u.username;
return u as UserResult;
}
const UniqueConstraintError = (err: string) => new Error(`Unique Constraint Error: ${err}`);
const makeAddUser = ({ usersDb }: { usersDb: IUserDb }) => {
return async function addUser(userDetails: UserAttributes) {
const user = makeUser(userDetails)
const exists = await usersDb.findByEmail({ email: user.getEmail() })
if (exists) {
throw UniqueConstraintError('Email')
}
const newUser = await usersDb.insert({
name: user.getName(),
email: user.getEmail(),
password: user.getPassword(),
username: user.getUsername(),
})
return newUser
}
}
I try to write setState method in React.
But compile error occurs.
I want to know how to solve this issue.
frontend: react/typesript
articleApi.tsx
import axios from 'axios';
import {Article} from '../articleData';
export const getSingleArticleFactory = (id: string) => {
const getSingleArticle = async (id: string) => {
try {
const response = await axios.get('/api/article/' + id);
if (response.status !== 200) {
throw new Error('Server Error');
}
const article: Article = response.data;
return article;
} catch (err) {
throw err;
}
};
return getSingleArticle;
};
Detail.tsx
//import
interface ArticleState {
article: Article;
redirect: boolean;
user: firebase.User | null;
}
class Detail extends React.Component<
RouteComponentProps<{id: string}>,
ArticleState
> {
constructor(props: RouteComponentProps<{id: string}>) {
super(props);
this.state = {
article: {
id: 0,
title: '',
content: '',
imageNames: [],
},
redirect: false,
user: null,
};
this.getArticle = this.getArticle.bind(this);
this.deleteArticle = this.deleteArticle.bind(this);
}
getArticle() {
this.setState({
//error occures here
article: api.getSingleArticleFactory(this.props.match.params.id);,
});
}
articleData.tsx
export interface Article {
id: number;
title: string;
content: string;
imageNames: ImageName[];
}
interface ImageName {
name: string;
}
I expect there is no compile error.
But the actual is not.
I want to know how to solve this issue.
const getSingleArticleFactory: (id: string) => (id: string) => Promise<Article>
Argument of type '{ article: (id: string) => Promise<Article>; }' is not assignable to parameter of type 'ArticleState | ((prevState: Readonly<ArticleState>, props: Readonly<RouteComponentProps<{ id: string; }, StaticContext, any>>) => ArticleState | Pick<ArticleState, "article"> | null) | Pick<...> | null'.
Type '{ article: (id: string) => Promise<Article>; }' is not assignable to type 'Pick<ArticleState, "article">'.
Types of property 'article' are incompatible.
Type '(id: string) => Promise<Article>' is missing the following properties from type 'Article': id, title, content, imageNamests(2345)
I fixed it in following way:
async getArticle() {
const getSingleArticle = api.getSingleArticleFactory();
const articleData = await getSingleArticle(this.props.match.params.id);
this.setState({
article: articleData,
});
}
export const getSingleArticleFactory = () => {
const getSingleArticle = async (id: string) => {
try {
const response = await axios.get('/api/article/' + id);
if (response.status !== 200) {
throw new Error('Server Error');
}
const article: Article = response.data;
return article;
} catch (err) {
throw err;
}
};
return getSingleArticle;
};