1. Bable, ESLint, Prettier.
@babel?
-
자바스크립트 컴파일러. 브라우저에서 실행이 가능한 형태로 변환해준다.
-> 최신 JS 문법의 겨우 각 브러우저마자 호환성이 다를 수가 있다.
-> 바벨은 이를 위해 변환 과정을 대신해준다. -
최신 브라우저는 대부분 최신 JS 문법을 호환해주려고 한다.
-> IE 같은 경우에는 이미 폐지되었지만 살아생전에는 JS 최신 버전과 호환이 안되는 경우가 왕왕있었다."@babel/core": "^7.12.7", "@babel/preset-env": "^7.12.7", "@babel/preset-typescript": "^7.12.7", -
바벨의 프리셋 : 플러그인과 옵션의 집합체.
더 자세한 내용은 웹팩 강의에서...
ESLint
-
자바스크립트 코드의 문제를 찾아 해결해준다.
-> 작성한 코드에서 에러가 발생할 여지를 '코드 레벨'에서 줄여주는 도구.
-> 이외에도 코드 자동완성, 포맷 정렬 등의 기능도 제공해준다.
-> 설명 파일에서 문법 검증의 범위를 지정할 수도 있다.
(가령 ;의 사용 여부를 두고 미사용시 경고, 에러, 검사 안함 옵션을 설정할 수 있다.) -
설정 파일의 경우 확장자는 .js .yml .json으로 지정할 수 있다.
-
ESLint의 규칙은 세부사항까지 조절이 가능하다. 원하는 범위대로 설정하여 사용할 수 있는 것.
-
TSLint?
-> 타입스크립트 버전 ESLint.
-> 성능 문제로 ESLint로 편입되었다.
Prettier
- 코드 포맷터, 규칙을 가지고 코드를 정리해주는 역할.
-> 프로젝트가 거대해 질수록 코드 가독성을 지켜주는데 큰 공헌을 한다.
2. 자바스크립트 프로젝트를 타입스크립트로 리팩토링 하려면..
-
자바스크립트 파일에 JSDoc으로 타입 시스템 입히기
(프로젝트가 규모가 거대할 수록, TS로 변환하는데 소모될 시간과 노력이 너무 커진다.)
(그렇다면 현실적으로 빠르게 차라리 타입 시스템을 체험해본다는 생각으로 JSDoc를 사용해보는 것도 좋다.)
(또 모든 파일을 ts로 전환하지 않아도 된다. 필요한 부분만 하는 것도 하나의 방법.) -
타입스크립트의 기본 환경 구성
- NPM 초기화, npm init
- 타입스크립트 라이브러리 설치, npm i typescript
- 타입스크립트 설정 파일 생성 및 기본 값 추가, tsconfig.json 작성 및 설정 작성.
- 자바스크립트 파일을 타입스크립트 파일로 변환, 확장자를 js에서 ts로.
-
tsc명령어로 타입스크립트 컴파일 하기, tsc 파일이름
-> 다만 타입이 제대로 적용되지 않고 있어 tsc에서 에러가 발생한다.
(js 파일에 스크립트로 걸어둔 axios가 인식되지 않는다던지..)
(또한 모든 에러가 실행과 관련된 에러는 아니다. 타입 관련 에러인 경우에는 기능 동작과는 별개.)
-> js 문법을 ts로 바꿔주어야 변환이 가능해진다.
(타입스크립트는 표준에러코드를 제공한다. 구글링이 용이하다는 뜻.)프론트 빌드 시스템이 적용되어 있는 상태에서 ts로 변환하는건 상당히 복잡해진다.
이 경우에는 코드를 복사하여 새로운 프로젝트에서 진행하는게 더 좋은 방법. -
명시적인
any선언하기- 일단 에러가 발생하지 않도록 any 타입이라도 적용해둔다.
tsconfig.json파일에noImplicitAny값을true로 추가- DOM의 경우 any가 아니라 문자열 묶음으로 string으로 타입을 정의해도 된다.
- 가능한 구체적인 타입으로 타입 정의.
-
프로젝트 환경 구성
- babel, eslint, prettier 등의 환경 설정.
-
외부 라이브러리 모듈화
-
cnd 방식의 경우에는 js에서 인식하도록 모듈화 작업을 거쳐야한다.
-
ts에서 모듈을 불러오는 방식은 import-export 문법.
-
라이브러리 로딩
-
import 변수명 from '라이브러리 이름';
-
변수, 함수 임포트 문법
-
import {} from '파일 상대 경로';
-
타입스크립트의 경우, 상당히 잘 만든 라이브러리가 아니라면 단순히 설치하고 불러오기만 한다고 타입 에러가 방지되는 않는다. axios 같은 것은 내부적으로 타입 정리가 잘 되어있는 라이브러리이기에 따로 문제가 생기진 않는다.
-
그렇지 않은 예시 중의 하나가 바로 chart.js. 차트를 그려주는 오픈소스 라이브러리이다.
-
axios와 달리 타입스크립트 사용을 염두하지 않아 내부적으로 타입들이 정의되지 않기에 타입스크립트에서 사용이 불가능하기 때문.
-
이를 해결하는 방법은, 라이브러리 개발진에서 타입스크립트 호환성을 위한 내용을 업데이트 해주어서 추가적인 모듈 설치로 해결하는 것. chart.js의 경우 타입스크립트 호환을 위한 추가적인 라이브러리를 제공해주고 있다.
-
axios는 내부적으로 타입스크립트 호환성을 보장해주지만, 다른 많은 라이브러리들은 보통 @types 접두사에 타입스크립트 호환 모듈을 제공해주곤 한다. @types/chart.js 처럼.
-
타입스크립트 공식 홈페이지에서는 TS 호환성을 보유한 npm 패키지들을 검색해볼 수 있다.
-
Definitely Typed
-
JS 라이브러리를 TS로 변환할 때, 개발자가 내부 타입을 일일이 정의해주면 중구난방식이고 비용도 많이 발생한다. 이를 위해 타입 정의를 미리 만들어두어 사용할 수 있도록 제공한다.
-
@ 글자를 사용한다. @types 등등
-
@types가 제공되지 않는 라이브러리라면?
-
반드시 사용해야하는 라이브러리라면 타입 정의를 본인이 직접 해야한다.
-
tsconfig에 typeRoots 속성을 정의한다.
-
-
'Strict' 옵션을 추가하고 타입 정의
- tsconfig.json에서 strict 옵션을 추가.
- strict? ts 파일에서 타입 설정이 제대로 되었는지 진짜 '엄격하게' 규칙을 적용하여 검증하는 것.
- strict 옵션을 사용할 경우 noImplicitAny을 포함한 여러 옵션들이 자동적으로 true 처리 된다. 자세한 설명은 ts 공식 문서의 strict check를 참조.
-
앞으로는 어떻게..
- 타입스크립트 공식문서를 중심으로 더 많은 지식들을 배울 수 있다.
- 타입스크립트 딥 다이브도 마찬가지. 여기에 실무에서 TS를 경험해보면 더 능력이 증진된다.
3. tsconfig의 더 자세한 사용법.
{
"compilerOptions": {
// 자바스크립트 파일을 타입스크립트에서도 인식하여 사용.
"allowJs": true,
// tsc 명령어를 사용할 때, JS의 호환성을 어느 버전까지 설정할 것인지.
"target": "ES5",
// ts의 결과물이 어디에 생성되는가.
"outDir": "./dist",
// Promise 베이스 코드를 인식할 때 필요.
"moduleResolution": "Node",
// js -> ts 변환시 에러가 발생했을 때 에러 메시지를 읽다보면 config 파일 문제인 경우가 있다.
// 이럴때는 구글링 등으로 해결법을 찾으면 된다.
// ts2705 에러.
// async 등의 es6+ 문법 사용시에는 config에 lib 속성을 사용하고, "ES2015"를 적용해주어야 한다.
// DOM도 출력될 테니 DOM도 같이 넣어준다.
"lib": ["ES2015", "DOM", "DOM.Iterable"],
// 타입을 설정하지 않으면, 자동으로 any 타입을 설정하지 않도록 설정.
"noImplicitAny": true,
"esModuleInterop": true,
// @types 폴더 내부의 index.d.ts 파일을 모두 읽어들인다. -> 기본 설정.
// types 폴더 내부의 index.d.ts 파일들도 알아서 해석하도록 설정한다.
"typeRoots": ["./node_modules/@types", "./types"],
// strict 옵션
// strict와 관련있는 속성들이 모두 true가 된다.
"strict": true,
// 함수에서 인자로 넘길때 타입이 일치하는지 엄격하게 확인하는 옵션.
// 기본적으로 strict 모드에서는 자동으로 true 처리된다.
"strictFunctionTypes": true,
},
// 어떤 폴더 까지가 타입스크립트 컴파일의 대상인지 설정.
// src 폴더 내부의 모든 파일을 대상으로 설정한다.
"include": ["./src/**/*"]
}