[Docs] Migrate image-component example to typescript (vercel#40204)

<!--
Thanks for opening a PR! Your contribution is much appreciated.
In order to make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below.
Choose the right checklist for the change that you're making:
-->

@styfle as suggested here the TS PR.

> I suggest creating the first PR that is just JS => TS.
> 
> The create a second PR that makes style changes.
> 

## Changelog

- Update react
- Migrated to typescript

## Related

vercel#40153

## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)

examples/image-component/components/view-source.js → examples/image-component/components/view-source.tsx

@@ -1,21 +1,25 @@
-import { svg, arm } from './view-source.module.css'
+import styles from './view-source.module.css'
 
-const ViewSource = ({ pathname }) => (
+type ViewSourceProps = {
+  pathname: string
+}
+
+const ViewSource = ({ pathname }: ViewSourceProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="80"
     height="80"
     viewBox="0 0 250 250"
     fill="#151513"
-    className={svg}
+    className={styles.svg}
   >
     <a
       title="View Source"
       href={`https://github.com/vercel/next.js/tree/canary/examples/image-component/${pathname}`}
     >
       <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#fff" />
       <path
-        className={arm}
+        className={styles.arm}
         d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
       />
       <path d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z" />

examples/image-component/package.json

@@ -7,7 +7,12 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.7.14",
+    "@types/react": "16.9.17",
+    "typescript": "4.8.2"
   }
 }

examples/image-component/pages/_app.tsx

@@ -0,0 +1,6 @@
+import type { AppProps } from 'next/app'
+import '../app.css'
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}

examples/image-component/pages/background.js → examples/image-component/pages/background.tsx

@@ -1,11 +1,11 @@
 import Image from 'next/image'
 import ViewSource from '../components/view-source'
-import { bgWrap, bgText } from '../styles.module.css'
+import styles from '../styles.module.css'
 
-const Background = () => (
+const BackgroundPage = () => (
   <div>
-    <ViewSource pathname="pages/background.js" />
-    <div className={bgWrap}>
+    <ViewSource pathname="pages/background.tsx" />
+    <div className={styles.bgWrap}>
       <Image
         alt="Mountains"
         src="/mountains.jpg"
@@ -14,12 +14,12 @@ const Background = () => (
         quality={100}
       />
     </div>
-    <p className={bgText}>
+    <p className={styles.bgText}>
       Image Component
       <br />
       as a Background
     </p>
   </div>
 )
 
-export default Background
+export default BackgroundPage

examples/image-component/pages/color.js → examples/image-component/pages/color.tsx

@@ -5,20 +5,20 @@ import ViewSource from '../components/view-source'
 const keyStr =
   'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
 
-const triplet = (e1, e2, e3) =>
+const triplet = (e1: number, e2: number, e3: number) =>
   keyStr.charAt(e1 >> 2) +
   keyStr.charAt(((e1 & 3) << 4) | (e2 >> 4)) +
   keyStr.charAt(((e2 & 15) << 2) | (e3 >> 6)) +
   keyStr.charAt(e3 & 63)
 
-const rgbDataURL = (r, g, b) =>
+const rgbDataURL = (r: number, g: number, b: number) =>
   `data:image/gif;base64,R0lGODlhAQABAPAA${
     triplet(0, r, g) + triplet(b, 255, 255)
   }/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`
 
 const Color = () => (
   <div>
-    <ViewSource pathname="pages/color.js" />
+    <ViewSource pathname="pages/color.tsx" />
     <h1>Image Component With Color Data URL</h1>
     <Image
       alt="Dog"

examples/image-component/pages/index.js → examples/image-component/pages/index.tsx

@@ -3,12 +3,15 @@ import Image from 'next/image'
 import Link from 'next/link'
 import ViewSource from '../components/view-source'
 import vercel from '../public/vercel.png'
+import type { PropsWithChildren } from 'react'
 
-const Code = (p) => <code className={styles.inlineCode} {...p} />
+const Code = (props: PropsWithChildren) => (
+  <code className={styles.inlineCode} {...props} />
+)
 
 const Index = () => (
   <div className={styles.container}>
-    <ViewSource pathname="pages/index.js" />
+    <ViewSource pathname="pages/index.tsx" />
     <div className={styles.card}>
       <h1>Image Component with Next.js</h1>
       <p>

examples/image-component/pages/layout-fill.js → examples/image-component/pages/layout-fill.tsx

@@ -4,7 +4,7 @@ import mountains from '../public/mountains.jpg'
 
 const Fill = () => (
   <div>
-    <ViewSource pathname="pages/layout-fill.js" />
+    <ViewSource pathname="pages/layout-fill.tsx" />
     <h1>Image Component With Layout Fill</h1>
     <div style={{ position: 'relative', width: '300px', height: '500px' }}>
       <Image alt="Mountains" src={mountains} layout="fill" objectFit="cover" />

examples/image-component/pages/layout-fixed.js → examples/image-component/pages/layout-fixed.tsx

@@ -4,7 +4,7 @@ import mountains from '../public/mountains.jpg'
 
 const Fixed = () => (
   <div>
-    <ViewSource pathname="pages/layout-fixed.js" />
+    <ViewSource pathname="pages/layout-fixed.tsx" />
     <h1>Image Component With Layout Fixed</h1>
     <Image
       alt="Mountains"

examples/image-component/pages/layout-intrinsic.js → examples/image-component/pages/layout-intrinsic.tsx

@@ -4,7 +4,7 @@ import mountains from '../public/mountains.jpg'
 
 const Intrinsic = () => (
   <div>
-    <ViewSource pathname="pages/layout-intrinsic.js" />
+    <ViewSource pathname="pages/layout-intrinsic.tsx" />
     <h1>Image Component With Layout Intrinsic</h1>
     <Image
       alt="Mountains"

examples/image-component/pages/layout-responsive.js → examples/image-component/pages/layout-responsive.tsx

@@ -4,7 +4,7 @@ import mountains from '../public/mountains.jpg'
 
 const Responsive = () => (
   <div>
-    <ViewSource pathname="pages/layout-responsive.js" />
+    <ViewSource pathname="pages/layout-responsive.tsx" />
     <h1>Image Component With Layout Responsive</h1>
     <Image
       alt="Mountains"

examples/image-component/pages/placeholder.js → examples/image-component/pages/placeholder.tsx

@@ -4,7 +4,7 @@ import mountains from '../public/mountains.jpg'
 
 const PlaceholderBlur = () => (
   <div>
-    <ViewSource pathname="pages/placeholder.js" />
+    <ViewSource pathname="pages/placeholder.tsx" />
     <h1>Image Component With Placeholder Blur</h1>
     <Image
       alt="Mountains"

examples/image-component/pages/shimmer.js → examples/image-component/pages/shimmer.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image'
 import ViewSource from '../components/view-source'
 
-const shimmer = (w, h) => `
+const shimmer = (w: number, h: number) => `
 <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
     <linearGradient id="g">
@@ -15,14 +15,14 @@ const shimmer = (w, h) => `
   <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
 </svg>`
 
-const toBase64 = (str) =>
+const toBase64 = (str: string) =>
   typeof window === 'undefined'
     ? Buffer.from(str).toString('base64')
     : window.btoa(str)
 
 const Shimmer = () => (
   <div>
-    <ViewSource pathname="pages/shimmer.js" />
+    <ViewSource pathname="pages/shimmer.tsx" />
     <h1>Image Component With Shimmer Data URL</h1>
     <Image
       alt="Mountains"

examples/image-component/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}