Is it possible to include the term 'public' exclusively within a .ts file in a TypeScript TSLint React environment?

I'm struggling to understand why I am encountering an error in VSCode while working on a react typescript project with tslint setup. The error message states:

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

[Also, I'm wondering why I'm not receiving the usual warning/error for variables that are never read/used.]

https://i.sstatic.net/0CZnE.png

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

https://i.sstatic.net/ykbxU.png

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

https://i.sstatic.net/VhwVd.png

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

https://i.sstatic.net/nvUxm.png

typescriptvisual-studio-codetslint

Answer №1

By default, tsx is not enabled in the configuration. Have you considered adding 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
  }
}

Answer №2

It looks like your question may have already been addressed in this link. Here is some additional information on what I believe the issue could be: js 'types' can only be used in a .ts file - Visual Studio Code using @ts-check
Upon reviewing my own setup, I noticed that I am currently using tslint version 1.0.0. It also seems that your typescript version might be causing the problem. If you are working with typescript 2.3 or older, html files will be treated as typescript files when tide is enabled. To resolve this, consider updating your typescript to version 2.4.1 and also update typescript/language-service. Additionally, you can add the following to your tsconfig.json file. The issue could potentially be related to your angular version.
In regards to why the a variable is showing as unused, it is likely because you declared the variable but have not yet utilized it in your code. You can ignore this warning for now, as once you use the variable in your code, the warning should disappear. Try changing your angular version to see if the warning goes away. Normally, tslint should detect .ts files and work as expected.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Every checkbox has been selected based on the @input value

My component has an @Input that I want to use to create an input and checkbox. import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; @Component({ selector: 'app-aside', templateUrl: './aside.component ...

javascriptangulartypescript

Converting types to "any" and encountering the error message "There are two distinct types with the same name, but they are not related."

I am encountering some challenges while trying to use an NPM module that I developed along with its Typescript typings in another application. To simplify the examples, I will omit properties that are not relevant to the issue at hand. Within my module&ap ...

node.jstypescriptexpressjoi

Serving HTML from NodeJS instead of JSON

I have implemented two middleware functions import { NextFunction, Request, Response } from 'express'; const notFoundHandler = (req: Request, res: Response, next: NextFunction) => { const error = new Error(`Page Not Found - ${req.originalUr ...

node.jstypescriptexpress

Set every attribute inside a Typescript interface as non-mandatory

I have defined an interface within my software: interface Asset { id: string; internal_id: string; usage: number; } This interface is a component of another interface named Post: interface Post { asset: Asset; } In addition, there is an interfa ...

typescript

Check the @versionColumn value for validation prior to the entity save operation in TypeORM

I am currently in the process of saving data in a PostgreSQL database using TypeORM with NestJS integration. The data I am saving includes a version property, which is managed using TypeORM's @VersionColumn feature. This feature increments a number ea ...

node.jstypescriptnestjstypeorm

What is the best way to access dynamic URL parameters in the Next.js 13 app router from a nested server-side component?

This query pertains to the Server-Side components in Next.js 13 app router: I have a good grasp on how the slug parameter is passed to the default function in app/blog/[slug]/page.tsx: export default function Page({ params }: { params: { slug: string } }) ...

typescriptnext.js

Implement Angular backend API on Azure Cloud Platform

I successfully created a backend API that connects to SQL and is hosted on my Azure account. However, I am unsure of the steps needed to deploy this API on Azure and make it accessible so that I can connect my Angular app to its URL instead of using loca ...

htmlangulartypescriptazureazure-devops

Navigating through pages: How can I retrieve the current page value for implementing next and previous functions in Angular 7?

Greetings, I am a new learner of Angular and currently working on custom pagination. However, I am facing difficulty in finding the current page for implementing the next and previous functions. Can anyone guide me on how to obtain the current page value? ...

htmltypescriptangular7

An issue was encountered when attempting to log out the user from Firebase

My website is built using the Ionic and Angular Frameworks along with Firestore database. The signout feature works as expected, but unfortunately, an error occurs when a user tries to sign out of their account. The error message: FirebaseError: Missing o ...

angulartypescriptionic-frameworkgoogle-cloud-firestorefirebase-authentication

Unlocking the potential of deeply nested child objects

I have a recursively typed object that I want to retrieve the keys and any child keys of a specific type from. For example, I am looking to extract a union type consisting of: '/another' | '/parent' | '/child' Here is an il ...

typescript

Encountering a TypeScript error within the queryFn while implementing Supabase authentication alongside React Toolkit Query

I've been attempting to integrate Supabase authentication with React Toolkit Query but encountering an issue with the utilization of the queryFn. Here is the code snippet that employs supabase.auth.signUp to register a user using email/password. You ...

reactjstypescriptreact-typescriptrtk-querysupabase-js

The form doesn't seem to be functioning properly when I incorporate the formgroup and service within the ngOnInit() method

I implemented the formgroup code in ngOnInit() and also utilized a service in ngOnInit(). However, the asynchronous nature of the form is causing issues. The full code on StackBlitz works when I use dummy JSON data within the constructor. Check out the wor ...

angulartypescript

Alphabetically sorting objects in an array using Angular

If your TypeScript code looks something like this: items: { size: number, name: string }[] = []; ngOnInit(): void { this.items = [ { size: 3, name: 'Richard' }, { size: 17, name: 'Alex' }, ...

htmlangulartypescriptsorting

When using Router.push() in next.js, the error TypeError: products.map is not a function may arise

Currently, I am implementing redux saga in my project. Here is how the state looks: const productList = useSelector((state: RootState) => state.productList); const { loading, error, products, page, pages } = productList; In the useEffect hook, I dispa ...

reactjstypescriptreduxnext.jsredux-saga

Incorporate a JavaScript library into a personalized JavaScript file that is utilized within my Angular2 project

Integrating Machine Learning into my Angular2 project using the "synaptic.js" JavaScript library is my goal. After executing the command npm install synaptic --save I intend to execute a custom javascript file (myJsFile.js): function myFunction() { v ...

javascriptnode.jsangulartypescriptsynaptic.js

Apollo useQuery enables risky array destructuring of a tuple element containing any value

Currently, I am incorporating TypeScript into my project and have a GraphQL query definition that utilizes Apollo's useQuery. According to the documentation, the call should be typed, however, I am encountering an ESLint error regarding data being ass ...

typescripteslintapolloreact-apollo

Tips for using the arrow keys to navigate the cursor/caret within an input field

I am trying to create a function that allows the cursor/caret to move inside an input field character by character using the arrow keys (ArrowLeft, ArrowRight) on a keydown event. Current Approach: const handleKeyDown = (e: KeyboardEvent<HTMLInputEle ...

javascripthtmlreactjstypescriptdom-events

When an import is included, a Typescript self-executing function will fail to run

Looking at this Typescript code: (()=> { console.log('called boot'); // 'called boot' })(); The resulting JavaScript is: (function () { console.log('called boot'); })(); define("StockMarketService", ["require", "exp ...

javascripttypescript

The issue of resolving NestJs ParseEnumPipe

I'm currently using the NestJs framework (which I absolutely adore) and I need to validate incoming data against an Enum in Typscript. Here's what I have: enum ProductAction { PURCHASE = 'PURCHASE', } @Patch('products/:uuid&apos ...

javascripttypescriptnestjsnestjs-config

Having trouble loading AngularJS 2 router

I'm encountering an issue with my Angular 2 project. Directory : - project - dev - api - res - config - script - js - components - blog.components.js ...

javascriptangulartypescriptgulpsystemjs