[Typescript] Importing and Typing non-code files in Typescript

Here we're attempting to import several PNG files into our TypeScript program:

import pngUrl1 from "./example1.png"; // red squiggly line under "./example1.png"
import pngUrl2 from "./example2.png"; // red squiggly line under "./example2.png"
import pngUrl3 from "./example3.png"; // red squiggly line under "./example3.png"
import pngUrl4 from "./example4.png"; // red squiggly line under "./example4.png"

 

Let's start by creating a png.d.ts file in the src directory since we need to put something in the global scope.

// inside src/png.d.ts
declare module "*.png" {
  const png: string;

  export default png;
}

Now in our index.ts file, the imported PNG images work without error. Thanks to our png.d.ts declaration, TypeScript recognizes that these imports are strings.

The key takeaway from this lesson is the versatility and potential of wildcards in module declarations. This is a handy technique to use when working with non-JavaScript files in a TypeScript project.