Ts 기본 셋팅을 진행 후 component를 만들면서 interface 와 type 를 지정하고 tsx에 변수 및 함수를 사용하면

제목과 같은 오류가 발생한다. 

이유는 생각보다 간단하다.

ESlint의 유효성 검사에서 타입에 대한 내용리 누락 되어서 라고 생각이 된다.

typescrip-eslint : github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md    

 

위의 페이지에서 보면 기본 Js 에서 사용하는 방법과 Ts에서 사용해야하는 방법 그리고 진행 흐름에 대한 예시를 볼 수 있다.

 

그리고 가장 마지막에 .eslintrc.js 파일에 적용하는 옵션값이 나온다. 여러 블로그를 확인했을 때,(위 github 페이지에서도 역시..)

1. 가능하다면 모든 prop의 타입을 적어주는게 좋다.

 하지만, interface/type 를 바로 가져와서 사용 할 때는 타입을 적을 수 없어서 lint 유효성 검사에 걸리는 듯 하다.

2. lint 옵션에 유효성 검사의 레벨을 설정해 주면 된다.

 대부분 이 방법을 가장 좋은 추천방법으로 이야기 했다. 물론 코딩의 흐름상 타입을 잘 못 설정하는 경우도 있지만, 타입을 잘 못 설정하거나 누락 했을 경우 Ts 자체적인 오류 값이 나오기 때문에 lint의 유효성 검사를 끄는것이 아닌가 생각이 든다.

 

설정 방법에 대해서 다음과 같이 나와 있다.

처음에 저 내용을 어디에 적용시켜야 할지 매우 난감했다.. 내가 아직 감이 없는 것 일 수도 있고...

여기저기 손대다가 결국 .eslintrc.js 파일에서 rules 를 추가해주고 레벨을 설정해 주면 되는 문제 였다.

위의 방법 처럼 각 항목에 맞는 설정값을 넣어주면 간단하게 해결 된다. 

 

항상 느끼는 것이지만.. 답은 공식문서에 있다.. 찾기 어렵거나.. 눈에 나뛰거나... 이해하기 힘들어서 그럴 뿐....

블로그 이미지

코코리니

댓글을 달아 주세요