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 squi
Transcript
00:00 In this exercise, we're importing a bunch of PNG files. And normally, PNG files are not kind of recognized by TypeScript. They don't know what they are. And so we need to say that whenever we import a PNG, it's going to be of type string. This is really useful in environments like Webpack, for instance,
00:19 where if you import something that isn't a JS file, it will do some transformations on it. It will say, oh, you're importing an image. Well, let me put that image in the bundle somewhere, do some optimizations on it maybe. And then when you import it into JavaScript, you get a string identifier, a string reference to that asset. So this is really important in various types of environments.
00:38 Your job is to work out a way inside a .d.ts file that we can specify all of these PNGs. And you notice too that the PNGs don't actually exist on the system. So we're going to just be sort of lying a little bit to TypeScript and saying whenever we import a PNG, it's going to be of type string.
00:57 Good luck.
