Can anyone help me to solve this typescript error message, please?
Unanswered
Jacquit posted this in #help-forum
JacquitOP
I got this error message when I tried to pass down data to a child component:
Type '{ title: string; text: string; image: { src: string; alt: string; align: string; background: string; }; }' is not assignable to type 'TextWithImageProps'.
The types of 'image.align' are incompatible between these types.
Type 'string' is not assignable to type 'AlignProps'
Can
Here is my interface:
type AlignProps = "left" | "right";
export interface TextWithImageProps {
title: string;
text: string;
image: {
src: string;
alt: string;
align: AlignProps;
background: string;
};
}
Here is the data I am trying to pass down the child component:
const data = {
title: 'Welcome to this digital platform',
text: "<h3>Hello world!</h3><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p><ul><li><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></li> <li><p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></li></ul>",
image: {
src: 'https://images.unsplash.com/photo-1530686245768-ec6aac46aa3a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
alt: 'Cloudy blue sky in the montainous area',
align: 'left',
background: '#6a6a6a',
},
};
Type '{ title: string; text: string; image: { src: string; alt: string; align: string; background: string; }; }' is not assignable to type 'TextWithImageProps'.
The types of 'image.align' are incompatible between these types.
Type 'string' is not assignable to type 'AlignProps'
Can
Here is my interface:
type AlignProps = "left" | "right";
export interface TextWithImageProps {
title: string;
text: string;
image: {
src: string;
alt: string;
align: AlignProps;
background: string;
};
}
Here is the data I am trying to pass down the child component:
const data = {
title: 'Welcome to this digital platform',
text: "<h3>Hello world!</h3><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p><ul><li><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></li> <li><p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></li></ul>",
image: {
src: 'https://images.unsplash.com/photo-1530686245768-ec6aac46aa3a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
alt: 'Cloudy blue sky in the montainous area',
align: 'left',
background: '#6a6a6a',
},
};
2 Replies
JacquitOP
Thank you so much @jouvel, you are a lifesaver.