# Javascript에 Typescript 적용하기
- NPM 초기화
- 타입스크립트 라이브러리 설치
- 타입스크립트 설정 파일 생성 및 기본 값 추가
- 자바스크립트 파일을 타입스크립트 파일로 변환
- 'tsc 명령어로 타입스크립트 컴파일
# 자바스크립트 프로젝트에 타입스크립트를 적용할 때 주의할 점
- 기능적인 변경은 가급적 하지 않는 것이 좋다.
- 테스트 커버리지가 낮을 때는 타입스크립트르 적용하지 않는 것이 좋을 수 있다. 실제 서비스가 되고 있는 상태에서 적용하여 오류가 나게 되면 서비스 차원에서 마이너스가 되기 때문에 테스트 코드가 있는 상태에서 타입스크립트를 변환하는 것이 좋다. 하지만 테스트 코드가 없는 경우에도 타입스크립트를 점진적으로 적용시킬 수도 있다.
- 처음부터 엄격한 타입의 적용보다 점진적으로 strict 레벨을 증가시키는 것이 좋다.
# 자바스크립트 프로젝트를 타입스크립트로 프로젝트로 변환
자바스크립트 프로젝트를 타입스크립트 프로젝트로 변환할 때는 아래와 같은 절차를 활용한다.
- 타입스크립트 환경 설정 및 ts파일로 변환
- any 타입 선언
- any 타입을 더 적절한 타입으로 변경
# 1. 타입스크립트 프로젝트 환경 구성
1. NPM 초기화
vscode 내장터미널 연 뒤 프로젝트 경로 확인 후 npm init -y로 npm초기화 및 package.json 생성한다.
2. 타입스크립트 라이브러리 설치
npm i typescript —save-dev 혹은 npm i typescript —D로 타입스크립트를 설치한다.
3. 타입스크립트 설정 파일 생성 및 기본 값 추가
타입스크립트 설정파일 tsconfig.json 생성한다.
아래는 tsconfig.json 기본 값이다.
{
"compilerOptions": {
"allowJs": true,
"target": "ES5",
"outDir": "./dist",
"moduleResolution": "Node",
"lib": ["ES2015", "DOM", "DOM.Iterable"]
},
"include": ["./src/**/*"]
"exclude": ["node_modules", "dist"]
}- "allowJs" : js파일도 컴파일 대상이라는 의미, 점진적으로 타입스크립트를 변환하기 위해 사용한다. 프로젝트가 큰 경우 js확장자를 가진 파일이 매우 많을 수 있는데 이 때 타입스크립트로 변환하기 위해 모든 파일의 확장자를 ts혹은 tsx로 바꾸지 않아도 js 또한 tsc로 컴파일 되도록 허용해놓았기 때문에 문제 없이 컴파일 된다. 그렇기 때문에 원하는 부분만 점진적으로 타입스크립트로 전환해갈 수 있는 것이다.
- "target" : tsc 로 컴파일 시 변환되는 ES버전
- "outDir" : 타입스크립트의 결과물이 들어가는 경로 설정
- "moduleResolution" : Promise base 코드 작성 시 Promise를 인식시켜주기 위해 설정
- "lib" : 컴파일 과정에 사용될 라이브러리 파일 설정, es2015는 프로미스 객체를 타입스크립트에서 인식할 수 있게 필요한 속성이고, dom 관련 속성은 DOM API를 사용하는 경우 필요하다.
- "include" : 프로젝트를 기준으로 어떤 폴더를 대상으로 타입스크립트를 컴파일 시킬 것이냐를 결정, 예를 들어 프로젝트 전체를 컴파일 할 것이냐 특정 폴더만 할 것이냐를 결정한다. include와 exclude는 디폴트 값이 있으므로 확인해야 함. 또한 아스타 2개와 1개를 사용하는 경우는 src 하위 파일을 모두 포함한다는 의미
include 디폴트 값 :
[“**/*”] - "exclude" : 컴파일 대상을 제외하는 옵션
exclude 디폴트 값 :
[“node_modules”, “bower_components”, “jspm_packages”]
4. 자바스크립트 파일을 타입스크립트 파일로 변환하기
app.js를 app.ts로 변경한다.
5. 'tsc' 명령어로 타입스크립트 컴파일 하기
tsc를 터미널에 입력하여 컴파일할 수 있는데 이 때 에러가 발생할 수 있다. 이 에러는 런타임 에러와 무관한 타입 에러일 수도 있다. 즉 런타임 에러와 타입 에러는 무조건 동반되는 에러가 아니라 독립적이라는 점이다.
자바스크립트 파일에 타입 시스템 입히기
몇 만줄의 큰 자바스크립트 프로젝트의 경우 타입스크립트를 바로 적용시키기 어려운데 이런 경우 @ts-check를 주석으로 추가하여 TypeScript처럼 타입 및 에러 체크를 할 수 있다. @ts-check를 주석으로 추가 후 JSDoc을 사용한다.
# 2. 엄격하지 않은 타입 환경(loose type)에서 프로젝트 돌려보기
- 프로젝트에 테스트 코드가 있다면 테스트 코드가 통과하는지 먼저 확인한다. 기능의 변화가 생기면 안되므로 타입스크립트로 변환 후 확인해보는 것이다.
- 프로젝트의 js 파일을 모두 ts 파일로 변경한다. 점진적으로 적용시킬 때에는 서비스에 중요한 부분을 차지하는 js 파일을 먼저 변경한 후 나머지 파일은 점진적으로 변경하도록 한다.
- 타입스크립트 컴파일 에러가 나는 것 위주로만 먼저 에러가 나지 않게 수정한다. (여기서, 기능을 사소하게라도 변경하지 않도록 주의)
# 3. 명시적인 any 선언하기
- 프로젝트 테스트 코드가 통과하는지 확인한다. 타입을 선언하기 전 프로젝트가 잘 동작하는지 확인하는 단계이다.
- 타입스크립트 설정 파일 중 compilerOptions 내부에 noImplicitAny: true를 추가한다.
이 속성을 추가하기 전에는 컴파일 시 타입이 없는 경우 any로 간주하여 컴파일되지만 이 속성 추가 시 타입을 최소한 any라도 넣어야 한다.
- 가능한 타입을 적용할 수 있는 모든 곳에 타입을 적용한다.
라이브러리를 쓰는 경우 DefinitelyTyped에서 @types 관련 라이브러리를 찾아 설치한다. 만약, 타입을 정하기 어려운 곳이 있으면 명시적으로라도 any를 선언한다.
- 테스트 코드가 통과하는지 확인한다. 타입 선언 뒤 기능이 잘 동작하는지 확인하는 단계이다.
# 4. strict 모드 설정하기
any로 되어 있는 타입을 최대한 더 적절한 타입으로 변환한다.
as와 같은 키워드를 최대한 사용하지 않도록 고민해서 변경해야한다.
{
"strict": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictBindCallApply": true,
"strictPropertyInitialization": true,
"noImplicitThis": true,
"alwaysStrict": true,
}참고자료
