3

I have done a fair bit of searching around and maybe my Google-fu is failing me but I can't seem to find an answer to the following:

We use modules with TypeScript classes in them and everything is working fine until I try and implement code-splitting in webpack.

If I have this:

import { MyClass } from "./myClass"
let thing = new MyClass()
thing.init()

And I want to code-split it, so I try this:

import { MyClass } from "./myClass"

async function load() {
  const x = await import("./myClass")

  let thing:MyClass = new x.MyClass()

  thing.init()
}

load()

And webpack packs it up fine, but I do not get code splitting.

So then I try

//import { MyClass } from "./myClass"
async function load() {
  const x = await import("./myClass")

  let thing:any = new x.MyClass()

  thing.init()
}

load()

This code-splits, but then MyClass is now not typed and I lose any type knowledge in my editor/ide.

I feel like I m missing something simple, but I can't work it out.

Help greatly appreciated.

UPDATE #1 - tsconfig 

{
    "compileOnSave": true,
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "alwaysStrict": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "listFiles": false,
        "module": "esnext",
        "moduleResolution": "node",
        "noEmitHelpers": true,
        "noEmitOnError": false,
        "noFallthroughCasesInSwitch": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noImplicitAny": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "outDir": "js",
        "removeComments": false,
        "sourceMap": true,
        "strictFunctionTypes": true,
        "strictNullChecks": true,
        "target": "es2017",
        "typeRoots": ["../node_modules/@types", "../typings"]
    },
    "exclude": ["../node_modules", "js/**/*"],
    "include": ["ts/**/*.ts", "../typings/globals/*.d.ts"]
}
James Summerton
  • 398
  • 2
  • 13
  • What are your tsconfig settings? – Gerrit0 Jan 20 '18 at 06:42
  • @Gerrit0 Updated with tsconfig – James Summerton Jan 21 '18 at 23:01
  • 1
    I played around with this a bit and once I set everything up it worked correctly for me.. Not sure what the problem is. Are imports not implicitly typed for some reason? I made a very basic working example [here](https://github.com/Gerrit0/simple-typescript-webpack-setup) – Gerrit0 Jan 26 '18 at 02:44
  • Thanks for the time you spent to look at this. The issue is that code outside of the async has no typing, for example if I wanted to have a class field that was typed to that type I have to have it as :any not :MyThing. I think I am stuffed and asking it to do things that it just can't do. – James Summerton Jan 29 '18 at 00:37

0 Answers0