From 6bc6e2c4941b9eb5453801e3503099949cda5c49 Mon Sep 17 00:00:00 2001
From: Yamagishi Kazutoshi <ykzts@desire.sh>
Date: Sat, 17 Oct 2020 05:04:39 +0900
Subject: [PATCH] Improve types for Image Component (#17954)

![Screenshot on VS Code](https://user-images.githubusercontent.com/12539/96300300-43fc1280-1030-11eb-89ae-dba8beeca583.png)

The only attribute that must be used with Image Component is src, but all attributes are required and TypeScript will warn you.
---
 packages/next/client/image.tsx | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index 6274fcb841..7d96a5a886 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -16,14 +16,12 @@ type ImageData = {
   breakpoints?: number[]
 }
 
-type ImageProps = {
+type ImageProps = Omit<JSX.IntrinsicElements['img'], 'src' | 'sizes'> & {
   src: string
-  host: string
-  sizes: string
-  breakpoints: number[]
-  priority: boolean
-  unoptimized: boolean
-  rest: any[]
+  host?: string
+  sizes?: string
+  priority?: boolean
+  unoptimized?: boolean
 }
 
 let imageData: any = process.env.__NEXT_IMAGE_OPTS
@@ -73,15 +71,15 @@ type PreloadData = {
   src: string
   host: string
   widths: number[]
-  sizes: string
-  unoptimized: boolean
+  sizes?: string
+  unoptimized?: boolean
 }
 
 function generatePreload({
   src,
   host,
   widths,
-  unoptimized,
+  unoptimized = false,
   sizes,
 }: PreloadData): ReactElement {
   // This function generates an image preload that makes use of the "imagesrcset" and "imagesizes"
@@ -106,8 +104,8 @@ export default function Image({
   src,
   host,
   sizes,
-  unoptimized,
-  priority,
+  unoptimized = false,
+  priority = false,
   ...rest
 }: ImageProps) {
   // Sanity Checks:
-- 
GitLab