Menu
I put up my own typescript project with the Parcel compiler and got everything running on the built-in server. I implemented pixi.js and wanted to import .png files into my .ts files. But when I try to import it says it can't find the module, even tho both files are in the same folder? What am I missing?
I tried to do the following
npm install @types/node --save-dev
tsconfig.json (located in my root folder)
{
"compilerOptions": {
"types": ["node"],
"typeRoots": ["node_modules/@types"]
}
}
782
To allow image import with TypeScript, we can use declare to declare the type for image files. to declare the type for modules with the . png extension.
No need to "place" or use the File > Open menu. Locate the PNG file that you'd like to import on your computer. Making sure you have your Photoshop file window open in the background and in view, drag and drop the PNG file onto the Photoshop document. This will automatically create a new layer for the imported PNG.
To add the type for Image with TypeScript, we should use the HTMLImageElement for Image instances. const image: HTMLImageElement = new Image(); to set image to the HTMLImageElement . Image files selected from an input should have the File type and URL strings for images should have the string type.
To allow image import with TypeScript, we can use declare to declare the type for image files. to declare the type for modules with the .png extension. And then we can import .png files without errors.
Use import * as chalk from "chalk";. A TypeScript module can say export default myFunction to export just one thing. Use import myFunction from "./myModule" to bring it in. More commonly, TypeScript modules say export myFunction in which case myFunction will be one of the properties on the exported object.
TypeScript also shares the same concept of a module. Any file which contains a top-level import or export is considered a module. The module is designed to arrange a code written in TypeScript and used as a local scope. Modules are basically scripts written in separate files. Import allows you to reference their source location in an existing file.
The problem is that you confuse TypeScript level modules and Webpack level modules. In Webpack any file that you import goes through some build pipeline. In Typescript only .ts and .js files are relevant and if you try to import x from file.png TypeScript just does not know what to do with it, webpack config is not used by TypeScript.
As far as I can guess from your given example, this does not have anything to do with Parcel.
Parcel v1 will internally invoke tsc and the compiler will simply emit an error for unknown file extensions like .png, because pure TS projects will only be able to import code files (.js,.ts, .tsx, .jsx or .json) without a module bundler like Parcel or Webpack involved.
Bundlers allow to import other file types by converting them into valid modules that can be consumed in your project (implemented by loaders in Webpack, Parcel does handle it even more transparently).
In order to "convince" the compiler, that these sorts of imports are fine and to make the module known, wildcard module declarations can be used. For example to make .png file imports compile, you create a file globals.d.ts or similar with following declaration:
declare module '*.png';
That already should be enough to satisfy the compiler (here is a Parcel specific related issue).
Hope, it helps.
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
