[TypeScript] create-react-app 으로 만든 리액트 앱 TS로 변환 세팅

우선 기존에 create-react-app 으로 만든 폴더를 TS를 적용하여 마이그레이션한다고 했을 때,

노드 패키지 매니저(npm or yarn)으로 typescript를 설치해줍니다. 

typescript만 추가하는게 아니라 아래와 같이 여러 개의 패키지를 추가로 설치해줍니다. 

npm i typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom

 

js확장자를 ts로 변경하고 jsx 를 tsx로 변경해줍니다. 

👾컴포넌트를 .ts 확장자로 변환하면 jsx를 제대로 인식하지 못하고 에러를 토해내는 에러를 만났습니다. jsx를 반환하고 있는 컴포넌트는 tsx로 변환해주면 되고 jsx를 반환하지 않는 js파일은 ts로 변환해주면 됩니다.

 

새 TS 프로젝트를 생성할 경우 

npm i create-react-app 
npm create-react-app [프로젝트 폴더명] --template typescript #index.tsx, App.tsx를 비롯한 필요한 파일들 생성된다.
#필요한 모듈 설치 시, 이름 앞에 @types/ 를 붙여서 타입스크립트 버전으로 설치
npm i --save-dev @types/styled0components

기존 JS -> TS 

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

기존에 설치되어 있는 모듈들을 TS버전으로 업데이트

npm i --save-dev @types/react-router-dom
npm i --save-dev @types/styled-components

이후 TS로 변경할 JS파일들의 확장자를 .tsx로 변경(처음부터 다 바꿀 필요x, 서버를 실행하면 무수한 에러폭주, 번거로우면 그냥 새롭게 TS프로젝트를 생성하길)

---

 

optional chaning사용시, 할당 연산자 = 의 왼쪽에서는 사용할 수 없음 -> 해결방법 type assertion(타입 단언)사용
type assertion은 확실한 상황에서 타입을 강요하는 것. 특정 타입을 단언해서 관련 속성에 접근하거나, 관련 메서드를 사용할 수 있도록 할 때 사용한다. 주의) 디버깅에 어려움을 줄 수 있기 때문에 확실한 상황이 아니라면 사용 지양

type assertion(타입 단언)

문법: (단언할 부분 as 단언할 타입) 혹은 null이 아니라는 것만 체크해주면 되기 때문에 non-null assertion (.!)으로 표현

text.current[Number(entry.target.id)]!.style.opacity ="1";

array 타입을 정확히 지정하지 않고 빈 배열을 할당해버리면 자동으로 never[]가 된다. 

useRef에 들어올 요소에 맞춰 타입을 지정해주면 해결되는데 useState, useRef 등 hooks는 일반 변수처럼 useRef: 타입 형태가 아니라 useRef<타입> 형태로 명시해야 한다. 

const engRef = useRef<HTMLInputElement>(null);

No overload matches this call 

TS + styled-components 를 사용하면서 발생하는 문제 -> 스타일드 컴포넌트에 임의로 만든 props 를 전달하려고 하니 발생

👾overload란 
함수와 관련된 개념, 정확히는 function overloading 
동일한 이름의 함수에서 들어오는 매개변수의 type에 따라 다른 프로세스를 실행하는 것을 말한다. 다른 언어에서는 함수명만 같으면 되지만 TS에서는 각 함수의 매개변수의 개수도 같아야 한다. 

-> 즉, overloaded function에서 지정한 매개변수들의 타입 혀식과 실제 전달한 인자의 타입형식이 일치하지 않으면 뜨는 에러이다. 

해결방법: interface 생성 후, 스타일드 컴포넌트를 선언하는 부분에서 styled.태그이름 뒤에 만든 interface의 명으로 <> 제네릭타입을 지정해주면 된다. 

🥳관습적으로 interface명은 사용할 이름 앞에 I(대문자 i)를 붙여주는 경우가 많다. e.g.) IProps, IDay

interface ITestProps {
 something: number [];
 reverse: boolean;
 reverseFloat: boolean;
}

const TestProps = styled.img<ITestProps>`
// CSS, SCSS 
`

interface IProps {
  word: IWord;
}

// export를 통해 인터페이스 내보내주기(다른 곳에서도 사용)
export interface IWord {
  id: number;
  day: number;
  eng: string;
  kor: string;
  isDone: boolean;
}

export interface IDay {
  day: number;
  id: number;
}

export default function DayList() {
  const days: IDay[] = useFetch("http://localhost:3001/days");
// 컴포넌트 코드 중략

<T> 제네릭, 어떤 타입을 사용할 지 파라미터를 받아서 사용할 수 있다.

//params는 항상 string임 해당 훅의 타입을 지정해준다. 

const { day } = useParams<{ day: string }>();