titicacadev/triple-config-kit

[Rule] react/prop-types rule이 ts 에서도 필요할까?

Closed this issue · 14 comments

AS-IS: Rule of eslint-plugin-react

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

eslint-plugin-react 의 권장 Rule 로 'react/prop-types': 2 가 설정되어 있습니다.
(prop-types 설정 없으면 오류)

TO-BE

es6 프로젝트에서는 필요하지만, typescript 프로젝트에서는 무시해도 될것 같은데요..

 "overrides": [
        {
            "files": ["**/*.tsx"],
            "rules": {
                "react/prop-types": "off"
            }
        }
    ]

이런식으로 확장자 기반 오버라이딩을 하면 어떨까 합니다.
투표 부탁드려요!


댓글로 이모지 또는 새로운 의견을 남겨주세요~
ex) - 3️⃣ : 나는 요래조래

  • 1️⃣ : 기존안 유지 (ts에서도 필요하다!)
  • 2️⃣ : 제안대로 수정 (ts에서는 스킵)
  • 3️⃣ : 이 룰을 전부 off (js,ts 다 필요없다!)

3️⃣ 극단주의적입니다

원래 그러했으니 .. 3 번 ...

2️⃣컴파일 때 문제 없었으면 런타임 때도 문제 없을거라 믿습니다..!ㅋㅋㅋ

3️⃣

그런데, 지금까지 ts에서 이거 안걸렸었는데, 어제 처음 걸리는 케이스를 발견했어요..
룰에 따르면 지금껏 써왔던 코드들도 다 걸렸어야할텐데 ;

@boxersb
'compact' is missing in props validation react/prop-types
이런거 말씀하시는건가용?

네네 맞습니다. 근데 우회하는 방법도 있네요 ;;

const MyComponent = function({ ... }) { ... }

이렇게 선언하면 또 넘어가네요 ㅡㅡ;

const MH4 = ({ children, ...props }) => (
  <H4 margin={{ top: 20, left: 30, right: 30 }} {...props}>
    {children}
  </H4>
)

이렇게 children 을 타입을 선언을 안해주면 터지던데,, 지금 https://github.com/titicacadev/triple-frontend 여기에서 위 에러가 미친듯이 터지네요 ㅠ.ㅠ

3️⃣ 가겠습니다.

3️⃣ 으로 땅땅 하겠습니다.

@yceffort 곧 까나리 공유 드리겠습니다.
이번에도 잘 부탁드립니다~~ 🙇

ts 에서 어떻게 하면 터지고, 어떻게 하면 안터지는지 확인해봤습니다.

이렇게 하면 터지고요..

function ExpireDateHolder({ availability, children }) {

이렇게 하면 통과됩니다 ;

function ExpireDateHolder({ availability, children }: any) {

ts에서는 타입을 지정해주면 눈감아주는군요..
그래도 귀찮긴 하니 수정할께요!

@yceffort 카나리 릴리즈 나갔습니다. 0.0.0-32e20d3 확인 부탁드립니다~

넵 테스트 해보고 말씀드릴게요!

off 확인했습니다.

🙇