gatsby-image/withIEPolyfill is missing typings

[janKir]

Description

When importing in Typescript from gatsby-image/withIEPolyfill vscode says that it

Could not find a declaration file for module 'gatsby-image/withIEPolyfill'.

In the root folder of gatsby-image is a index.d.ts which is missing in the withIEPolyfill submodule. I need to use this submodule because the objectFit prop doesn't seem to work otherwise.

Steps to reproduce

1. Start a gatsby project with typescript.
2. Create a typescript component.
3. Add import Img from 'gatsby-image/withIEPolyfill';

Expected result

Types should exist for the withIEPolyfill submodule.

Actual result

error (in vscode):

Could not find a declaration file for module 'gatsby-image/withIEPolyfill'. 'c:/path/to/project/node_modules/gatsby-image/withIEPolyfill/index.js' implicitly has an 'any' type.
Try npm install @types/gatsby-image if it exists or add a new declaration (.d.ts) file containing declare module 'gatsby-image/withIEPolyfill';ts(7016)

Environment

System:
OS: Windows 10
CPU: (4) x64 Intel(R) Core(TM) i5-6200U CPU @ 2.30GHz
Binaries:
Yarn: 1.16.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
Languages:
Python: 3.5.1
Browsers:
Edge: 44.17763.1.0
npmPackages:
gatsby: ^2.2.3 => 2.7.1
gatsby-cli: ^2.6.2 => 2.6.2
gatsby-image: ^2.0.38 => 2.1.1
gatsby-plugin-manifest: ^2.0.24 => 2.1.1
gatsby-plugin-offline: ^2.0.25 => 2.1.1
gatsby-plugin-react-helmet: ^3.0.10 => 3.0.12
gatsby-plugin-react-leaflet: ^2.0.4 => 2.0.8
gatsby-plugin-sharp: ^2.0.34 => 2.1.1
gatsby-plugin-styled-components: ^3.0.7 => 3.0.7
gatsby-plugin-typescript: ^2.0.11 => 2.0.15
gatsby-plugin-typography: ^2.2.10 => 2.2.13
gatsby-source-filesystem: ^2.0.28 => 2.0.37
gatsby-transformer-javascript-frontmatter: ^2.0.10 => 2.0.10
gatsby-transformer-sharp: ^2.1.18 => 2.1.19

Actually this command throws the following error after the last line (translated from German):

System cannot find the given path.

[DSchau]

@janKir sounds like you have a great handle on this, and the steps necessary to make the change.

We'd love a PR!

[janKir]

In my gatsby project, typings are recognized if I put the following index.d.ts file into the gatsby-image/withIEPolyfill folder inside the node_modules.

import * as React from "react"

import GatsbyImage, { GatsbyImageProps } from "../index"

interface GatsbyImageWithIEPolyfillProps extends GatsbyImageProps {
  objectFit?: `fill` | `contain` | `cover` | `none` | `scale-down`
  objectPosition?: string
}

export default class GatsbyImageWithIEPolyfill extends React.Component<
  GatsbyImageWithIEPolyfillProps,
  any
> {}

I haven't contributed to gatsby before so actually I don't really know all the steps necessary to file a PR.

[DSchau]

Of course! We'll we'd love to have this be your first, so let me help walk you through that!

1. This is a great resource to learn more about contributing. Pay particular note to Setting up your Local Dev Environment
2. As part of the above process, you'll have a fork and a local version of Gatsby set up!
3. You'll want to test your changes to ensure they work with the built project
   • Note: gatsby-dev-cli will help a ton here!

Please let us know if we can provide any more info! I'm looking forward to the PR!