Issue integrating typescript

I am currently using this template for my chrome extension, but I now want to switch to using Typescript.

I looked at the Typescript config file and I already see an issue with it and the way this template works

tsconfig.json { "compilerOptions": { "module": "commonjs", "target": "es6", "noImplicitAny": false, "sourceMap": false, "rootDir": "src", "outDir": "dist/js", "noEmitOnError": true, "typeRoots": [ "node_modules/@types" ] } }

but I fail how the typescript config file would integrate with this templates webpack.config.js file.

Any help? Thanks.

[UchennaOkafor]

@Kocal Thank you so much for your contribution to this project, I didn’t expect such a quick reply.

[Kocal]

Hi,

I’ve used this template with TypeScript and I have no problem.

Be sure to:

• have TypeScript dependencies installed (typescript ts-loader)
• configure Webpack and ts-loader, you need to add a new rule in module.rules:

const config = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        },
      },
    ]
  }
}

• and configure TypeScript, this is my tsconfig.json I am using:

{
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "built",
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es2017",
    "sourceMap": true,
    "strict": true,
    "noImplicitReturns": true,
    "allowJs": true
  },
  "include": ["src/**/*.ts", "src/**/*.vue"],
  "exclude": ["node_modules"]
}