Estoy tratando de importar imágenes para usar dentro de un componente React con TypeScript. El paquete que estoy usando es Parcel (no Webpack).
Creé un archivo .d.ts dentro del proyecto con la extensión de archivo de imagen y lo incluí dentro tsconfig.json . Sin embargo, cuando intento importar una imagen, TS me grita que Cannot find module .
La estructura de mi proyecto:
+ src + assets - image.jpg + components - Box.tsx - App.tsx - index.d.ts - index.html - index.tsx - tsconfig.json - tslint.json Traté de importar la imagen en App.tsx así. VS Code subrayó '../assets/image.jpg' y dijo Cannot find module '../assets/image.jpg' .
import * as React from 'react'; import * as img from '../assets/image.jpg'; const Box = props => { // do things... } export default Box; Las discusiones que encontré en línea apuntan a la necesidad de definir un archivo .d.ts yo mismo, así que creé ese archivo index.d.ts con esta línea.
declare module '*.jpg'; Luego agregó "include": ["./src/index.d.ts"] dentro de tsconfig.json , después de "compilerOptions" : {...} .
¿Qué me perdí? ¿Cómo puedo solucionar el error que arroja TS?
cree el archivo index.d.ts en la carpeta src y agregue esta línea
declare module '*.jpg';Si literalmente escribió "include": ["./src/index.d.ts"] en tsconfig.json y no tiene una configuración de "files" , eso significa que el proyecto definido por tsconfig.json incluye solo el único archivo ./src/index.d.ts . Cuando abre cualquier otro archivo en VS Code, VS Code usa una instancia de servicio de lenguaje independiente que no usa su tsconfig.json . Ajuste su configuración "include" para que coincida con todos los archivos .ts y .tsx en su proyecto, o simplemente elimínelo y confíe en el comportamiento predeterminado de incluir todos los archivos en el directorio que contiene tsconfig.json .
TypeScript ignora index.d.ts porque asume que index.d.ts se genera a partir de index.tsx y es más probable que index.tsx esté actualizado. Nombra tu archivo index.d.ts de otra manera, por ejemplo, declaration.d.ts .
Crear módulo/tipo
# src/types/images.d.ts declare module '*.jpg'; declare module '*.jpeg';Cambiar tsconfig.json
{ "compilerOptions": { "typeRoots" : ["node_modules/@types", "src/types"] } }