1. 타입스크립트를 쓰는 이유?
⭐️ Typescript란?
자바스크립트 대용품 같은 언어로, 자바스크립트 문법을 그대로 이용하지만 타입을 업그레이드해서 쓸 수 있는 일종의 자바스크립트 업그레이드 버전이라 할 수 있다.
🤔 그래서 사용하는 이유는?
- 자바스크립트는 Dynamic Typing이 가능한 언어이기 때문에, 타입에 대한 제지 없이 자기가 알아서 타입을 바꿔준다. (1 - '5'일 경우 5를 number타입으로 바꿔서 -4가됨)타입스크립트는 이런걸 전부 런타임 전에 에러로 잡아주는데, 이거 하나 때문에 쓰는 언어가 바로 타입스크립트이다. (type관련 버그들을 발생시키지 않기 위함)
- 편리해보이지만, 프로젝트가 커질 경우 이런 자유도&유연성은 단점으로 작용한다.
- 에러메시지도 더 정확해진다.
엄격한 타입룰 덕분에 타입관련 에러나 오타까지도 친절하게 알려준다.
일종의 에디터 부가기능 느낌.
2. 타입스크립트 설치
npm install -g typescript
3. 타입스크립트 파일 생성
- 그냥 .ts 파일을 생성한다.
4. config파일 생성
- tsconfig.json 파일을 생성한다.
- js파일로 컴파일할 때의 옵션을 설정한다. (웹브라우저는 ts파일을 읽지 못하기 때문에 js파일로 변환작업을 해야함)
{
"compilerOptions": {
"target": "es5", // 어떤 버전의 자바스크립트로 변환할지 지정
"module": "commonjs", // 자바스크립트 파일간 import문법을 어떤 문법으로 사용할지 지정
}
}- 기타 추가할만한 옵션들
"compilerOptions": {
"target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능
"module": "commonjs", //'commonjs', 'amd', 'es2015', 'esnext'
"allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지
"checkJs": true, // 일반 js 파일에서도 에러체크 여부
"jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
"declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
"outFile": "./", //모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)
"outDir": "./", //js파일 아웃풋 경로바꾸기
"rootDir": "./", //루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
"removeComments": true, //컴파일시 주석제거
"strict": true, //strict 관련, noimplicit 어쩌구 관련 모드 전부 켜기
"noImplicitAny": true, //any타입 금지 여부
"strictNullChecks": true, //null, undefined 타입에 이상한 짓 할시 에러내기
"strictFunctionTypes": true, //함수파라미터 타입체크 강하게
"strictPropertyInitialization": true, //class constructor 작성시 타입체크 강하게
"noImplicitThis": true, //this 키워드가 any 타입일 경우 에러내기
"alwaysStrict": true, //자바스크립트 "use strict" 모드 켜기
"noUnusedLocals": true, //쓰지않는 지역변수 있으면 에러내기
"noUnusedParameters": true, //쓰지않는 파라미터 있으면 에러내기
"noImplicitReturns": true, //함수에서 return 빼먹으면 에러내기
"noFallthroughCasesInSwitch": true, //switch문 이상하면 에러내기
}📍 전체 옵션보기
5. js로 컨버팅하기
- 터미널에서 tsc -w 라고 입력하면 자동으로 ts파일 근처에 js파일로 변환해준다.
- html파일 등에서 ts파일을 사용할 때도 당연히 변환된 .js파일을 사용해야함
6. React프로젝트에서 Typescript사용하기
6-1. react프로젝트를 새로 생성할 경우
npx create-react-app my-app --template typescript
6-2. 이미 있는 프로젝트에 설치할 경우
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
