[typescript] styled components로 만든 Input 컴포넌트에 타입 적용하기

implicitly has an 'any' type.

갑자기 이런 에러가 엄청 떴다. 암묵적으로 any 타입으로 간주하고 있다고 에러를 발생시킨다. 나는 초심자니까.. false해줌
tsconfig.json 파일에 코드 추가

"noImplicitAny": false

TS2739: Type '{ id: string; value: any; onChange: any; type: string; placeholder: string; }' is missing the following properties

타입은 선언했는데 input에 설정하는것을 잊어서 생긴 에러.

export type InputProps = {
  name?: string;
  id: string;
  type: 'text' | 'email' | 'password';
  onChange: void;
  placeholder?: string;
  border?: string;
  value?: string;
}
const Input = ({ name, id, type, onChange, placeholder, border, value }: InputProps) => {}

설정해주니 onChange에 에러가 난다.

Type 'void' is not assignable to type 'ChangeEventHandler'.

 onChange={() => onChange} 

onChange부분을 () => onChange 이렇게 수정하니까 에러는 사라졌는데 입력이 안된다.ㅋ 그럴 것 같았다...

onChange: React.ChangeEventHandler;

이렇게 바꿔주니 잘 작동한다!
타입의 종류도 정말 많구나...

import * as InputStyle from './InputStyle';
export type InputProps = {
  name?: string;
  id: string;
  type: 'text' | 'email' | 'password';
  onChange: React.ChangeEventHandler;
  placeholder?: string;
  border?: string;
  value?: string;
}

const Input = ({ name, id, type, onChange, placeholder, border, value }: InputProps) => {
  const borderStyle = InputStyle.BORDER[border];
  return (
    <>
      <label htmlFor={id}></label>
      <InputStyle.InputStyle
      id={id} 
      name={name}
      type={type ? type : 'text'} 
      onChange={onChange} 
      placeholder={placeholder} 
      borderStyle={borderStyle}
      value={value}
      />
    </>
  )
}

export default Input;