Skip to content

Instantly share code, notes, and snippets.

@hedgerh
Created April 29, 2019 23:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hedgerh/f87a435f99ac83369b92a3b04116600f to your computer and use it in GitHub Desktop.
Save hedgerh/f87a435f99ac83369b92a3b04116600f to your computer and use it in GitHub Desktop.
Benefits of using Typescript with React #1: You get compile time prop validation and auto completion. This is especially helpful when working with a 3rd party UI library that you aren't 100% familiar with yet.
import React from 'react';
interface IImage {
alt: string;
src: string;
}
interface IGalleryProps {
images: IImage[]
}
const Gallery: React.FC<IGalleryProps> = ({ images }) => (
<div>
{ images.map(image => <img src={image.src} alt={image.alt} />)}
</div>
)
const badImages = [{
src: 'https://via.placeholder.com/150',
}, {
src: 'https://via.placeholder.com/150',
}]
const images = [{
src: 'https://via.placeholder.com/150',
alt: 'An example alt'
}, {
src: 'https://via.placeholder.com/150',
alt: 'Another example alt'
}]
const App: React.FC = () => {
return (
<div className="App">
<Gallery images={images}/>
</div>
)
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment