Skip to content

[no-unused-vars] warning for used vars #171

@jzilg

Description

@jzilg

Repro

I get many alerts from eslint because I have supposedly unused variables. For Example in this File.

import React, { ReactElement } from 'react'
import Todo from '../../interfaces/todo.interface'
import TodoListItem from '../TodoListItem'
import style from './todo-list.scss'

interface ListProps {
    todos: Todo[]
    addTodo: Function
    saveTodo: Function
    removeTodo: Function
    isLoading: boolean
}

const TodoList = ({
    todos,
    addTodo,
    saveTodo,
    removeTodo,
    isLoading,
}: ListProps): ReactElement<{}> => {
    const createNewId = (): number => {
        if (!todos.length) {
            return 0
        }
        const ids = todos.map(todo => todo.id)
        const highestId = Math.max(...ids)
        return highestId + 1
    }

    const addNewTodo = (): void => {
        const id = createNewId()
        addTodo(id)
    }

    const todoElements = todos.map(todo => (
        <li key={todo.id} className={style['list-element']}>
            <TodoListItem
                todo={todo}
                saveTodo={saveTodo}
                removeTodo={removeTodo}
                isLoading={isLoading}
            />
        </li>
    ))

    return (
        <div className="container">
            <h1>
                Todo List
            </h1>
            <ul className={style.list}>
                {todoElements}
            </ul>
            <button
                type="button"
                className={style['add-todo-btn']}
                title="Add Todo"
                onClick={addNewTodo}
                disabled={isLoading}
            >
                +
            </button>
        </div>
    )
}

export default TodoList

Expected Result
no eslint warnings, scince all variables are used at some point.

Actual Result
4:8 warning 'style' is defined but never used @typescript-eslint/no-unused-vars
17:5 warning 'saveTodo' is defined but never used @typescript-eslint/no-unused-vars
18:5 warning 'removeTodo' is defined but never used @typescript-eslint/no-unused-vars
19:5 warning 'isLoading' is defined but never used @typescript-eslint/no-unused-vars
30:11 warning 'addNewTodo' is assigned a value but never used @typescript-eslint/no-unused-vars
35:36 warning 'todo' is defined but never used @typescript-eslint/no-unused-vars

Additional Info
I just migrated from https://www.npmjs.com/package/eslint-plugin-typescript. While using that package, there was no warnings.

Versions

package version
@typescript-eslint/eslint-plugin 1.1.1
@typescript-eslint/parser 1.1.1
TypeScript 3.2.4
ESLint 5.12.1
node 10.14.1
npm 6.5.0

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workinglocked due to agePlease open a new issue if you'd like to say more. See https://typescript-eslint.io/contributing.package: eslint-pluginIssues related to @typescript-eslint/eslint-pluginpackage: parserIssues related to @typescript-eslint/parser

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions