Omit ignored property from <Image/ > to prevent confusion (#18796)

Fixes #18793

packages/next/client/image.tsx

@@ -32,7 +32,7 @@ type ImageData = {
 
 type ImageProps = Omit<
   JSX.IntrinsicElements['img'],
-  'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading'
+  'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading' | 'style'
 > & {
   src: string
   quality?: number | string

test/integration/image-component/typescript-style/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  images: {
+    domains: ['via.placeholder.com'],
+  },
+}

test/integration/image-component/typescript-style/pages/invalid.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import Image from 'next/image'
+
+const Invalid = () => {
+  return (
+    <div>
+      <h1>Invalid TS</h1>
+      <Image
+        width={500}
+        height={500}
+        src="https://via.placeholder.com/500"
+        style={{ objectFit: 'cover' }}
+      ></Image>
+      <p id="stubtext">This is the invalid usage</p>
+    </div>
+  )
+}
+
+export default Invalid

test/integration/image-component/typescript-style/test/index.test.js

@@ -0,0 +1,19 @@
+/* eslint-env jest */
+
+import { nextBuild } from 'next-test-utils'
+import { join } from 'path'
+
+jest.setTimeout(1000 * 60 * 2)
+
+const appDir = join(__dirname, '..')
+
+describe('TypeScript Image Component with Styles', () => {
+  describe('next build', () => {
+    it('should fail to build when the `style` prop is passed to <Image />', async () => {
+      const { stderr, code } = await nextBuild(appDir, [], { stderr: true })
+      expect(stderr).toMatch(/Failed to compile/)
+      expect(stderr).toMatch(/Property 'style' does not exist on type/)
+      expect(code).toBe(1)
+    })
+  })
+})

test/integration/image-component/typescript-style/tsconfig.json

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