[TypeScript] React 프로젝트에 TypeScript 적용하기

wonyu·2022년 5월 29일
0

시작하기

  1. 설치
    $ npm i typescript @types/node @types/react @types/react-dom @types/jest
  • react-router-dom을 사용하는 경우 @types/react-router-dom도 함께 설치한다.
  • npm i -g typescript 명령어를 통해 typescript를 전역으로 설치하면 tsc command를 사용할 수 있다.
    ex) $ tsc --init
  1. $ tsc --init 명령어를 통해 tsconfig.json 파일 생성
  • 구글링을 해보니 사람들마다 해당 파일에 작성한 내용이 달랐다.
    옵션이 많은데 그 중 뭐가 필요한 건지 모르겠어서 typescript 공식 문서를 찾아봤더니 recommend base가 있길래 이것을 사용했다.
  • 위 base를 참고해서 내가 작성한 내용은 아래와 같다.
{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "react-jsx",
  },
  "include": ["src/**/*"],
}

사용하기

interface 정의하기

  • 프로퍼티는 , 가 아니라 ; 로 구분
  • optional하게 만들어 주려면 ? 를 붙임
interface IWord {
  id: number;
  day: number;
  eng?: string;
  kor?: string;
  isDone: boolean;
}

트러블 슈팅

  • js 확장자 파일에 태그마다 빨간 줄이 뜰 때 tsconfig.json를 아래와 같이 수정한다.
{
  "compilerOptions": {
    ...
    "jsx": "react-jsx",
  },
  ...
}
  • ts(2339): never 형식에 id 속성이 없습니다
    - map 함수로 돌린 요소에 타입이 지정되지 않아서 발생한 에러였다.
    다른 곳에 작성해놓은 인터페이스를 import 해서 타입을 지정하여 해결했다.
  • ts2531 object is possibly 'null'
    - 여러 해결 방법이 있는 듯하나, 나는 해당 코드를 사용할 때 null이 아닐 수 있도록 상단에서 if문을 통해 걸러주는 식으로 해결했다.

0개의 댓글