1

In VSCode, I am working with TypeScript and experiencing an issue when I compile to JavaScript whereby the IDE will complain that certain elements - classes, variables etc. - are duplicates. This is because they exist in the TypeScript file and the JavaScript file that is created as a result.

I imagine this is a fairly common problem, but to clarify a couple of things:

  1. This does not appear to prevent TypeScript compilation
  2. This only occurs when the .js file is open in the IDE (VSCode)

Below is an image showing what I mean:

Duplicate identifier error

I am not very experienced in working with npm or the command line, so I'm not sure if I've inadvertently enabled this behaviour or missed something out - it is clearly undesirable though, so I was wondering if anyone can think what might be causing the problem? For a start, is this more likely to be a VSCode problem or a TypeScript problem?

I have looked at a few similar questions on SO - e.g. this, but none seem to be experiencing the exact same issue as me.

Many thanks!

Mick McCarthy
  • 428
  • 2
  • 16

1 Answers1

2

I believe you have both typescript and javascript in the same folder somehow. Can you share your tsconfig file? Important this to notice is outdir that will ensure that compiled files are not kept at the same destination.

{
  "compilerOptions": {

    "target": "es6",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "sourceMap": true,                     /* Generates corresponding '.map' file. */
    "outDir": "dist",                        /* Redirect output structure to the directory. */

    "strict": true,                           /* Enable all strict type-checking options. */


    "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */



    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
  }
}

Package.json, this will allow you to run npm commands like npm start....

{
  "name": "learning_ts",
  "version": "1.0.0",
  "description": "",
  "main": "dist/target_group.js",
  "scripts": {
    "debug": "tsc && node --nolazy dist/target_group.js",
    "start": "tsc && node dist/target_group.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/node": "^14.11.1",
    "aws-sdk": "^2.756.0",
    "dotenv": "^8.2.0"
  },
  "devDependencies": {
    "tslint": "^5.12.1",
    "typescript": "^3.3.3"
  }
}
Shubham Singh
  • 946
  • 6
  • 12
  • Hi Shubham, interestingly I do not appear to have a tsconfig file in the root folder - is this possible? Where might I find it? – Mick McCarthy Sep 23 '20 at 14:18
  • 1
    you may have to create it. I will edit my answer and copy both package.json and tsconfig. Change that based on your need. – Shubham Singh Sep 23 '20 at 14:48
  • Ignore previous message if you saw it - I thought I had fixed the problem but it persists. Here is my package.json file: `{ "name": "ts-sandbox", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "comp": "tsc --outDir js sandbox.ts" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "eslint": "^7.9.0", "typescript": "^4.0.3" } }` – Mick McCarthy Sep 23 '20 at 15:10
  • Creating a tsconfig file seems to have fixed it, yes. Thanks! – Mick McCarthy Sep 24 '20 at 12:29