Refactoring unused props in Typescript

In the code below

<FormSelectBox environment setAvgOrderCountEnum={setAvgOrderCountEnum} inputSelectOff={inputSelectOff} avgOrderCountEnum={avgOrderCountEnum} />  

I get the following typescript error

I resolved the error by creating a variable that stores all my unused props

  // FormSelectBox unused props    const nullProps = {      foreignDeliveryEnum: null,      setForeignDeliveryEnum: null,      foreignPackageWeightEnum: null,      setForeignPackageWeightEnum: null    }  

and used the spread operator to include nullProps in my component instance

<FormSelectBox environment setAvgOrderCountEnum={setAvgOrderCountEnum} inputSelectOff={inputSelectOff} avgOrderCountEnum={avgOrderCountEnum}  {...nullProps} />  

Is there a better typescript way to refactor my code and handle this issue?

The code for my FormSelectBox is below

import React from 'react'  import PropTypes from 'prop-types'  import { avgOrderCountEnumList, foreignDeliveryEnumList, foreignPackageWeightEnumList } from '../utils/common'    const FormSelectBox = ({ setAvgOrderCountEnum, setForeignDeliveryEnum, setForeignPackageWeightEnum, inputSelectOff, avgOrderCountEnum, foreignDeliveryEnum, foreignPackageWeightEnum, environment }) => {    const cases: any = setAvgOrderCountEnum ? avgOrderCountEnumList() : setForeignDeliveryEnum ? foreignDeliveryEnumList() : setForeignPackageWeightEnum ? foreignPackageWeightEnumList() : null      const liList = cases.map((cases, index) => {      return (        <li key={index} onClick={() => {          setAvgOrderCountEnum ? setAvgOrderCountEnum(cases) : setForeignDeliveryEnum ? setForeignDeliveryEnum(cases) : setForeignPackageWeightEnum ? setForeignPackageWeightEnum(cases) : null        }}>          {            environment ? (              <span className="select-option environment">                {cases.name}              </span>            ) : (              <span className="select-option">                {cases.name}                {cases.country}                {cases.weight}              </span>            )          }        </li>      )    })      const optionList = cases.map((cases, index) => {      return (        <option key={index} value={setAvgOrderCountEnum ? cases.id : setForeignDeliveryEnum ? cases.id : setForeignPackageWeightEnum ? cases.id : ''}>          {cases.name}          {cases.country}          {cases.weight}        </option>      )    })      return (      <>        <div className="form-select-box-dim" onClick={() => {          inputSelectOff()        }}></div>        <div className={`form-select-box ${setForeignDeliveryEnum ? "FD" : setForeignPackageWeightEnum ? "FPW" : ""}`}>          <ul>            {liList}          </ul>        </div>        <select onChange={(e) => {          if (setAvgOrderCountEnum) {            const selectCase = cases.find(c => c.id === e.target.value)            setAvgOrderCountEnum(selectCase)          }          if (setForeignDeliveryEnum) {            const selectFD = cases.find(c => c.id === e.target.value)            setForeignDeliveryEnum(selectFD)          }          if (setForeignPackageWeightEnum) {            const selectFPW = cases.find(c => c.id === e.target.value)            setForeignPackageWeightEnum(selectFPW)          }        }} value={avgOrderCountEnum ? avgOrderCountEnum.id : foreignDeliveryEnum ? foreignDeliveryEnum.id : foreignPackageWeightEnum ? foreignPackageWeightEnum.id : ''}>          {setAvgOrderCountEnum && <option value=''>월 평균 출고량을 선택해주세요.</option>}          {setForeignDeliveryEnum && <option value=''>주요 배송국가를선택해주세요.</option>}          {setForeignPackageWeightEnum && <option value=''>주요 배송 상품의 무게를선택해주세요.</option>}          {optionList}        </select>      </>    )  }    export default FormSelectBox    FormSelectBox.propTypes = {    setAvgOrderCountEnum: PropTypes.func,    setForeignDeliveryEnum: PropTypes.func,    setForeignPackageWeightEnum: PropTypes.func,    inputSelectOff: PropTypes.func,    avgOrderCountEnum: PropTypes.object,    environment: PropTypes.bool  }  

https://stackoverflow.com/questions/67309818/refactoring-unused-props-in-typescript April 29, 2021 at 09:17AM