如何修复 eslint 错误，即在实际使用 TypeScript props 接口时未使用它？

Question

I have this component using AvatarProps as type for the props :

Here's the interface declaration:

export interface AvatarProps {
  userName: string;
  userLastName: string;
  userImg?: string;
  onPress?: Function;
  backgroundColorAvatar?: string;
  editMode?: boolean;
  onPressEdit?: Function;
  editButtonIcon?: string;
  backgroundColorEditButton?: string;
  textStyle?: TextStyle;
}

When running eslint, this error pops up :

5:15  error    'AvatarProps' is defined but never used  

eslint is triggered on commit with lefthook from a lefthook.yml file like so :

 pre-commit:
  parallel: true
  commands:
    lint:
      files: git diff --name-only @{push}
      glob: "*.{js,ts,jsx,tsx}"
      run: npx eslint {files}
    types:
      files: git diff --name-only @{push}
      glob: "*.{js,ts, jsx, tsx}"
      run: npx tsc --noEmit
commit-msg:
  parallel: true
  commands:
    commitlint:
      run: npx commitlint --edit

What can I do to get rid of the error in a clean way?

Answer 1

Could you try to change your component to this:

import React from 'react'
import type { AvatarProps, DimensionsType } from '../shared/types';

const Avatar: React.FC<AvatarProps> = ({
        userName,
        userLastName,
        userImg,
        onPress,
        backgroundColorAvatar,
        editMode,
        onPressEdit,
        editButtonIcon,
        backgroundColorEditButton,
        textStyle,
    }) => {
        return <>
           {/* Here your component implementation */}
        </>;
    };

that's a way to describe the types of a functional component at least is more clean and descriptive. Please notice React.FC<YourType> allows you to extend all the common props a functional component has, plus all YourType fields. This allows you to render children's components like this:

import React from 'react';
import { Text } from 'react-native';

// Yous an example type
export interface AvatarProps {
    userName: string;
    userLastName: string;
}

/**
 * A children component that doesn't render nothing but you can implement
 * whatever you want here
 */
const MyChildrenComponent = () => {
    return <></>;
};

const Avatar: React.FC<AvatarProps> = ({ userName, userLastName, children }) => {
    return (
        <>
            {children}
            <Text>{userName + ' ' + userLastName}</Text>
            {/* Here the rest of your component implementation */}
        </>
    );
};

const SomeParentComponent = () => {
    return (
        <Avatar userName="Something" userLastName="">
            {/* Notice here I can insert my own component as a children of Avatar component */}
            <MyChildrenComponent />
        </Avatar>
    );
};

this approach has several cons (you can read more about it here ) because basically you are typing the function and not his arguments (props) and the children argument is always implied even if you use it or not.

UPDATE: As mentioned in the comments React.FC isn't needed actually you can implement your component without using it like this:

const Avatar: (props: AvatarProps) => JSX.Element = ({
    userName,
    userLastName,
    userImg,
    onPress,
    backgroundColorAvatar,
    editMode,
    onPressEdit,
    editButtonIcon,
    backgroundColorEditButton,
    textStyle,
}) => {
    return <>{/* Here your component implementation */}</>;
};

where JSX.Element is the return value of your component in this case (there are also different types you can use to type the return of a functional component, this is just an example)