Custom TS types for Webpack + React ES6-Style Imports

custom-types-ts.md

Custom Typescript Types Recipes for React + Webpack ES6 style imports

use case: CSS files in /src/styles dir, and SVG and PNG files in /assets/images dir

• custom.d.ts file in dir of svg, png assets:

declare module "*.svg" {
    const content: any;
    export default content;
}

declare module "*.png" {
    const content: any;
    export default content;
}

• custom.d.ts file in styles dir alongside CSS files:

declare module "*.css" {
    const content: any;
    export default content;
}

• include those files/custom types, in tsconfig.json in project root:

{
  "compilerOptions": {
    "outDir": "dist",
    "sourceMap": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react"
  },
  "include": ["./src/**/*", "src/styles/custom.d.ts", "assets/images/custom.d.ts"]
}