How to fix Property 'x' is declared but never used in TypeScript

// Example of unused variable
const unusedVariable = "hello";  // Warning: 'unusedVariable' is declared but never used

// Ask yourself:
// 1. Is this variable part of a future feature?
// 2. Is it used in a different file (exported)?
// 3. Is it a placeholder for upcoming implementation?

// If genuinely unused, remove it:
// const unusedVariable = "hello";  // DELETE THIS LINE

// If it will be used later, you can prefix with underscore to suppress warning:
const _unusedVariable = "hello";  // No warning with underscore prefix

// Unused function
function calculateTotal() {  // Warning
  return 100;
}

// If needed for exports or future use:
export function calculateTotal() {  // No warning if exported
  return 100;
}

// Or prefix with underscore:
function _calculateTotal() {  // No warning
  return 100;
}

// WRONG - imported but not used
import React, { useState, useEffect } from 'react';  // Warning if useState/useEffect not used

// CORRECT - only import what you need
import React from 'react';

// If you need them later:
import React from 'react';
// import { useState, useEffect } from 'react';  // Comment out until needed

// Using a linter or IDE can help:
// In VS Code: Right-click → "Organize Imports" (Ctrl+Shift+O)
// This automatically removes unused imports

// For type-only imports that shouldn't trigger warnings:
import type { User } from './types';  // Type-only imports don't count as unused

// WRONG - unused parameter triggers warning
function handleClick(event: MouseEvent) {
  console.log('Clicked!');
  // 'event' parameter not used - warning
}

// CORRECT - prefix with underscore
function handleClick(_event: MouseEvent) {
  console.log('Clicked!');
  // No warning with underscore prefix
}

// For multiple unused parameters:
function fetchData(_url: string, _options: RequestInit, callback: (data: any) => void) {
  // Only callback is used, url and options are intentionally unused
  callback({});
}

// For destructuring with unused properties:
const { usedProp, _unusedProp } = someObject;  // Prefix unused destructured properties

// In try-catch where error might not be used:
try {
  riskyOperation();
} catch (_error) {  // Prefix if error not used
  console.log('Operation failed');
}

// tsconfig.json
{
  "compilerOptions": {
    // Strict mode options (all enabled by default in strict mode)
    "noUnusedLocals": true,      // Check for unused local variables
    "noUnusedParameters": true,  // Check for unused function parameters
    "noImplicitReturns": true,   // All code paths must return a value

    // Alternative: Use strict mode which includes these
    "strict": true  // Enables all strict type-checking options
  }
}

{
  "compilerOptions": {
    "noUnusedLocals": false,     // Disable unused locals check
    "noUnusedParameters": false  // Disable unused parameters check
  }
}

// @ts-nocheck - Disable all checks for this file
// or
// @ts-ignore - Disable next line
const unused = "test";  // @ts-ignore

# Install ESLint with TypeScript support
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  rules: {
    '@typescript-eslint/no-unused-vars': ['warn', {
      'argsIgnorePattern': '^_',
      'varsIgnorePattern': '^_',
      'caughtErrorsIgnorePattern': '^_'
    }],
    'no-unused-vars': 'off' // Turn off base rule in favor of TypeScript rule
  }
};

npx eslint src/ --fix

// 1. Destructuring with rest operator
const { used, ...rest } = obj;  // 'rest' might appear unused but is valid

// 2. Functions used as types
type Handler = (event: Event) => void;
const onClick: Handler = (event) => {  // 'event' appears unused but is part of type
  console.log('clicked');
};

// 3. Module augmentation
declare global {
  interface Window {
    myCustomProp: string;  // Augmentation, not direct usage
  }
}

// 4. Side-effect imports
import './styles.css';  // Import for side effects, no named imports
import 'polyfill';      // Polyfill that modifies global scope

// 5. Re-export patterns
export { Button } from './Button';  // Re-export, Button not "used" in this file

// 6. Generic type parameters
function identity<T>(value: T): T {  // T might appear unused in simple cases
  return value;
}

// 7. Decorator parameters
function Log(target: any, key: string) {  // Parameters used by decorator system
  // target and key might not be referenced in body
}

// For these cases, use ignore comments or underscore prefix:
import './styles.css';  // OK - side effect import
const { used, ..._rest } = obj;  // Prefix if rest truly unused