[ 코드리뷰용 pr ] typescript로 마이그레이션 #20
Conversation
…ulling-client into 5wintaek/my-refactor
| settings: { | ||
| 'import/resolver': { | ||
| node: { | ||
| extensions: ['.js', '.jsx', '.ts', '.tsx'], | ||
| }, | ||
| }, | ||
| }; |
There was a problem hiding this comment.
이 설정은 ESLint가 import 문을 분석할 때 사용하는겁니당. .extension는 파일 확장자를 의미하는거고, 파일을 읽어들일떄 .jsx .js .ts .tsx 확장자를 가진 파일들을 해석하는는 뜻
There was a problem hiding this comment.
resolve: {
extensions: ['.ts', '.tsx'], // 여기서 .ts와 .tsx 확장자에 .을 추가합니다.
alias: [{ find: '@', replacement: resolve(__dirname, './src') }],
},vite에서 TS를 사용할 떄 기본적으로 extensions 쪽에 .ts ,.tsx 에 확장자를 추가하는것을 권장합니다.
eslint에서의 설정은 제가 타입오류지정을 해결하면서 eslint-plugin을 같이 깔면서 설정해둔것 같습니다. 굳이 없어도 되는 확장자 입니다
| export interface RetryButtonProps { | ||
| children: React.ReactNode; | ||
| onClick: () => void; | ||
| } |
There was a problem hiding this comment.
ChildrenProps가 많이 쓰이고 있는데 아래처럼 상속시켜주면 중복 코드를 줄일 수 있을 것 같아요 !
| export interface RetryButtonProps { | |
| children: React.ReactNode; | |
| onClick: () => void; | |
| } | |
| export interface RetryButtonProps extends ChildrenProps { | |
| onClick: () => void; | |
| } |
krampoline/src/Router.tsx
Outdated
| @@ -8,23 +8,37 @@ import ResultPage from './pages/ResultPage'; | |||
| import SelectPage from './pages/SelectPage'; | |||
| import OnboardingPage from './pages/WaitingPage'; | |||
|
|
|||
| const Router = () => { | |||
| const [homeComponent, setHomeComponent] = useState(<OnboardingPage />); | |||
| // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types | |||
There was a problem hiding this comment.
처음에 Router () 부분쪽에 빨간줄이 떠서 eslint 제한을 걸어놨는데, 타입지정을 해줘서 지금은 지워도 상관없네요 ! 수정해서 다시 올리겠습니다
| @@ -3,11 +3,12 @@ import { IcCloseGray, ImgHint } from '../../assets'; | |||
| // import { useEffect } from 'react'; | |||
| @@ -33,7 +33,7 @@ const SelectPage = () => { | |||
| sessionStorage.setItem('quizId', quizId); | |||
| } | |||
| if (content) { | |||
| sessionStorage.setItem('contents', content); | |||
| sessionStorage.setItem('contents', content.content); | |||
There was a problem hiding this comment.
content 정의를 아래처럼 해주면 content로만 사용할 수 있어요 !
| sessionStorage.setItem('contents', content.content); | |
| const { content } = await getQuizContent(quiz)' | |
| sessionStorage.setItem('contents', content); |
There was a problem hiding this comment.
넵 객체분할 대신 사용해주셔서 감사합니다 ! 수정해서 다시 올리겠습니다
| interface WaitingProps { | ||
| isLoadingPage: boolean; | ||
| } |
There was a problem hiding this comment.
타입파일 따로 빼줬으니까 얘도 분리하면 좋을 것 같아용 !!
There was a problem hiding this comment.
아 깜빡하고 분리를 하지 않았네요! 알겠습니다~~!
✅ 작업 내용
📌 이슈 사항
1️⃣ Common,Component용 Type을 Types라는 폴더에 지정
2️⃣ any 사용 금지
3️⃣ Early Return
✍ 궁금한 것
1️⃣ React.ReactElement vs JSX.Element
Router 파일을 마이그레이션 하다가 Router 쪽에 타입 지정을 하라는 오류가 발생하였고, React.ReactElement 와 JSX.Element 둘 다 사용했을떄 오류가 없길래 둘의 차이가 뭘지 궁금해서 찾아봤습니다. (가볍게 찾아본것)
JSX.Element와React.ReactElement는 비슷한 용도로 사용됩니다. 사실,JSX.Element는 TypeScript의JSX네임스페이스에 정의된 타입으로, 대부분의 경우React.ReactElement와 동일합니다.ReactElement는 더 일반적인 타입이며, React 요소를 보다 넓게 포함합니다.2️⃣ vite-env.d.ts
처음 마이그레이션 진행 후, 타입 지정하라는 오류가 뜨질 않아 고생을 엄청나게 했습니다. vite->TS마이그레이션 을 할 떄, 꼭 참고해주시길 바랍니다 !