Typescript 적용 방법

📖 신규 React App에 typescript 적용

yarn create react-app client --template typescript

---

📖 기존 React App에 typescript 적용

1. Typescript 의존성 추가

yarn add typescript @types/node @types/react @types/react-dom @types/jest

• 필요한 라이브러리들을 package.json에 의존성을 추가함

2. Typescript 설정 (tsconfig.json)

tsc --init

// 실행이안된다면
npm install typescript -g

• tsc 명령어를 사용하여 tsconfig.json을 생성한다
• tsconfig.json에서 필요한 옵션의 주석을 해제 및 변경

---

📖 tsconfig.json 옵션

🔍 쓸만한 것들

0. baseUrl : 절대경로 설정관련, path들의 기준 디렉토리
1. target : 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분
   • ES5, ES6 등
2. module : 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 부분
   • commonjs는 require문법
   • es2015, exnext는 import 문법 사용
3. noImplicitAny : any라는 타입이 의도치않게 발생할 경우 에러를 띄워주는 설정
4. strictNullChecks : null, undefined 타입에 이상한 조작을 하면 에러를 띄우는 설정
5. allowJs : .js 파일들을 .ts에서 import해서 쓸 수 있는지 여부
6. checkJs : .js 파일에서도 에러체크 여부
7. jsx : tsx파일을 jsx로 어떻게 컴파일할 것인지 여부
8. declaration : 컴파일 시 .d.ts 파일도 자동으로 함께 생성
   • .d.ts : 현재 쓰는 모든 타입이 정의된 파일
   • 추가로 같이 쓸만할 옵션은 declarationDir(.d.ts파일 생성 디렉토리)
9. outFile : 모든 ts파일을 js파일 하나로 컴파일해줌 ("./")
   • module 옵션이 none, amd, system일 때만 가능
10. outDir : js파일 output 경로 바꾸기 ("./")
11. rootDir : 루트 경로 바꾸기 ("./")
    • js파일 output 경로에 영향을 줌
12. removeComments : 컴파일시 주석 제거
13. strict : strict관련된 모드 on/off
14. noImplicitAny : any타입 금지 여부
15. strictNullChecks : null, undefined 타입에 이상한 조작할 시 에러
16. strictFunctionTypes : 함수 파라미터 타입체크 강하게
17. strictPropertyInitialization : class constructor 작성 시 타입체크 강하게
18. noImplicitThis : this 키워드가 any 타입일 경우 에러내기
19. alwaysStrict : use strict 모드 on/off
20. noUnusedLocals : 쓰지 않는 지역변수 있으면 에러
21. noUnusedParameters : 쓰지 않는 파라미터 있으면 에러
22. noImplicitReturns : 함수에서 return이 없으면 에러
23. noFallthroughCasesInSwitch : switch문 이상하면 에러