"'public' can only be used in a .ts file" in typescript tslint react setup?

Question

I can't work out why in VSCode with a react typescript project, with tslint setup, I am getting the error:

'public' can only be used in a .ts file.

[Actually also why I'm not getting the usual variable a is never read/used warning/error too]

tsconfig.json

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-tslint-plugin"
      }
    ]
  },
}

tslint.json

{
    "defaultSeverity": "error",
    "extends": ["tslint:recommended", "tslint-react"],
    "jsRules": {},
    "rules": {
        "semicolon": [true, "never"]
    },
    "rulesDirectory": []
}

package.json

{
  "name": "test-amplify-1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/jest": "24.0.1",
    "@types/node": "11.9.0",
    "@types/react": "16.8.2",
    "@types/react-dom": "16.8.0",
    "react": "^16.8.1",
    "react-dom": "^16.8.1",
    "react-scripts": "2.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "tslint": "^5.12.1",
    "tslint-react": "^3.6.0",
    "typescript": "^3.3.3",
    "typescript-tslint-plugin": "^0.3.1"
  }
}

vscode extensions

built in's (i.e. nothing touched)

had setup with local packages (typescript/tslint) but for reference re globals:

Oscar Franco · Answer 1 · 2019-02-14T02:43:18.437

0

tsx is not enabled by default I think, have you tried to add jsx to your tsconfig file?

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    // "target": "es5",
    "removeComments": true,
    "jsx": "react",
    "allowJs": false,
    "baseUrl": "src",
    "experimentalDecorators": true,
    "alwaysStrict": true,
    "lib": [
      "es2015"
    ],
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "awesomeTypescriptLoaderOptions": {
    "useCache": true,
    "useTranspileModule": true,
    "transpileOnly": true
  }
}

edited Feb 14 '19 at 02:43

answered Feb 13 '19 at 21:45

Oscar Franco

5,691
5
34
56

tried but this didn't work - updated my tsconfig to be: " { "compilerOptions": { "jsx": "react", "plugins": [ { "name": "typescript-tslint-plugin" } ] }, }" – Greg Feb 14 '19 at 00:58
I added my complete ts config file that I use for most of my projects, give it a go and see if anything helps you – Oscar Franco Feb 14 '19 at 02:43
just tried this but didn't help... do you use local or global typescript / tslint? – Greg Feb 14 '19 at 06:19
I use a local installation of both – Oscar Franco Feb 14 '19 at 11:58
interestingly I just removed the local install for typescript/tslint and when to global on another test react-typescript project I created, and it seems to not have the issue – Greg Feb 15 '19 at 03:38
hmm interesting, which version of typescript were you using? – Oscar Franco Feb 15 '19 at 19:59
3.3.3 was the local version – Greg Feb 17 '19 at 11:07

surendrapanday · Answer 2 · 2019-02-14T08:03:33.260

0

Your question might have been answered already in this. Below is additional detail on what I think it is. js 'types' can only be used in a .ts file - Visual Studio Code using @ts-check
I can see in my end that I am running tslint 1.0.0 version. Also, your typescript version might be problem. If you are using typescript 2.3 or older, html files will be treated as typescript files when tide is enabled. Update typescript to 2.4.1. Also update typescript/language-service. Add the following to tsconfig.json. It could be because of your angular version.
Your question regarding why a variable is complaining as unused, answer would be that you have declared a variable but not used it anywhere in code yet, you can ignore such warning. As soon as you use that variable somewhere in code, that warning will disappear. So, change angular version and see if warning will go. Usually tslint is supposed to detect .ts file and work.

edited Feb 14 '19 at 08:03

answered Feb 14 '19 at 03:32

surendrapanday

530
3
13

I'm running tslint here. Also I'm not using Angular. Re the "a" variable, I was wondering why the warning is not currently showing – Greg Feb 14 '19 at 06:15
was my comment helpful in regards to that ? `a` variable will complain until you don't use that variable somewhere, declaring a variable and leaving it unused is something linting doesn't like. It will happen to imports as well, many imports that you do and don't use in class file in any of the code irrespective of language, will be complained by compiler during compiling period. And, also if you change that `a` into `let a = 1` it will complain again, asking you to change it to `const` because value is not going to change. It's all about linting, syntactically both will be correct. – surendrapanday Feb 14 '19 at 07:42
my issue (and maybe you did understand and I'm missing what you're getting at) is I am expecting tslint to throw up a warning but it is not (i.e. in the image you see there is not a warning) – Greg Feb 14 '19 at 09:42

"'public' can only be used in a .ts file" in typescript tslint react setup?

2 Answers2