자바스크립트 프로젝트를 타입스크립트로 전환하는 법
유효한 자바스크립트는 유효한 타입스크립트이며 타입스크립트는 모든 타입을 명시적으로 선언하지 않아도 최선을 다해 타입을 추론하려고 한다. 이러한 사실은 자바스크립트를 타입스크립트로 점진적, 단계적으로 전환할 수 있음을 의미한다.
1. 비주얼 스튜디오 코드(VSCode)로 자바스크립트 페어링
비주얼 스튜디오 코드에는 편집기 또는 특정 작업 영역(프로젝트)에 대해 자바스크립트에서 타입스크립트 검사를 활성화 할 수 있는 설정이 포함되어 있다.
..vscode/setting.json에 다음 코드를 추가할 수 있다.
{
"Javascript.implicitProjectConfig.checkJs":true
}
이제 타입이 안전하지 않은 줄에는 에디터에서 해당 코드를 에러로 표시한다.
이러한 에러 메세지는 에디터에만 표시되며 코드에는 영향을 주지 않는다.
@ts-ignore - 해당 줄
@ts-nocheck - 전체
해당 코드를 추가하여 타입 체크를 선택적으로 비활성화 할 수도 있다.
2. 자바스크립트용 타입스크립트 컴파일러 사용
타입스크립트 컴파일러를 설치하고 스크립트를 실행하거나 설정한다.
tsconfig.json 파일을 사용하여 컴파일러 설정을 세팅한다.
{
"compilerOptions":{
"allowJs": true
"checkJs": false
"outDir": "./dist"
"rootDir": "./src"
"strict": false
}
}
"allowJs": true //타입스크립트 컴파일러를 통해 실행할 자바스크립트 파일을 선택
"checkJs": false //자바스크립트 파일에 대한 타입 체크
타입스크립트 컴파일러를 실행하고 자바스크립트를 확인한다.
"checkJs": true 타입 체크를 활성화하고 타입 체크를 진행한다. (node.js 경우에는 @types/node를 설치한다.)
3. 자바스크립트 파일을 타입스크립트 파일로 변환
자바스크립트에서 타입이 안전한 파일인지 확인한 후 하나씩 타입스크립트 파일로 변환한다. (.js → .ts)
allowJs를 활성화 했으므로 한번에 모두 이동할 필요 없이 점진적으로 이동할 수 있다. 이미 자바스크립트 코드에 대한 타입 체크를 실행했으므로 업데이트가 너무 많지 않을 것이다.
4. 엄격한 타입 체크
타입 체크를 더 엄격하게 하는 몇 가지 옵션이 있다.
{
"compilerOptions": {
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictBindCallApply": true,
"strictPropertyInitialization": true,
"noImplicitThis": true,
"alwaysStrict": true
}
하나씩 활성화 해 문제를 해결한다.
'Language > TypeScript' 카테고리의 다른 글
[TypeScript] TypeScript 란? (0) | 2022.07.11 |
---|---|
[TypeScript] 타입스크립트 기본 문법 (0) | 2022.06.26 |
[TypeScript] 프론트엔드 프레임워크/라이브러리와 타입스크립트 (0) | 2022.06.26 |
[TypeScript] 타입스크립트의 특징 (0) | 2022.06.26 |
[TypeScript] 타입스크립트 컴파일러 (0) | 2022.06.26 |