fix(gatsby-image): Fix typings for fixed and fluid props (#24767)

schwartzmj · ascorbic · web-flow · commit 08e0aa1be204 · 2020-08-12T13:57:16.000+05:30
Co-authored-by: Matt Kane &lt;m@mk.gg&gt;
diff --git a/packages/gatsby-image/index.d.ts b/packages/gatsby-image/index.d.ts
@@ -24,11 +24,15 @@ export interface FluidObject {
   media?: string
 }
 
-interface GatsbyImageProps {
+interface GatsbyImageOptionalProps {
+  /**
+   * @deprecated Use `fixed`
+   */
   resolutions?: FixedObject
+  /**
+   * @deprecated Use `fluid`
+   */
   sizes?: FluidObject
-  fixed?: FixedObject | FixedObject[]
-  fluid?: FluidObject | FluidObject[]
   fadeIn?: boolean
   durationFadeIn?: number
   title?: string
@@ -49,6 +53,16 @@ interface GatsbyImageProps {
   loading?: `auto` | `lazy` | `eager`
   draggable?: boolean
 }
+  
+interface GatsbyImageFluidProps extends GatsbyImageOptionalProps {
+  fluid: FluidObject | FluidObject[]
+}
+
+interface GatsbyImageFixedProps extends GatsbyImageOptionalProps {
+  fixed: FixedObject | FixedObject[]
+}
+
+export type GatsbyImageProps = GatsbyImageFluidProps | GatsbyImageFixedProps
 
 export default class GatsbyImage extends React.Component<
   GatsbyImageProps,
diff --git a/packages/gatsby-image/withIEPolyfill/index.d.ts b/packages/gatsby-image/withIEPolyfill/index.d.ts
@@ -2,7 +2,7 @@ import * as React from "react"
 
 import GatsbyImage, { GatsbyImageProps } from "../index"
 
-interface GatsbyImageWithIEPolyfillProps extends GatsbyImageProps {
+type GatsbyImageWithIEPolyfillProps = GatsbyImageProps & {
   objectFit?: `fill` | `contain` | `cover` | `none` | `scale-down`
   objectPosition?: string
 }

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ import * as React from "react"`
`2`	`2`
`3`	`3`	`import GatsbyImage, { GatsbyImageProps } from "../index"`
`4`	`4`
`5`		`-interface GatsbyImageWithIEPolyfillProps extends GatsbyImageProps {`
	`5`	`+type GatsbyImageWithIEPolyfillProps = GatsbyImageProps & {`
`6`	`6`	objectFit?: `fill` \| `contain` \| `cover` \| `none` \| `scale-down`
`7`	`7`	`objectPosition?: string`
`8`	`8`	`}`