시작하기
- 설치
$ 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
$ 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문을 통해 걸러주는 식으로 해결했다.