JavaScript 프로젝트에서 TypeScript 활용

JavaScript 코드베이스에도 TypeScript의 타입 시스템을 조금씩 적용할 수 있는 방법들이 있어요. 코드베이스의 규모와 요구에 따라 엄격함의 수준을 골라 쓰면 되는데, 이 문서에서 그 단계들을 자연스러운 순서대로 소개할게요.

출처: TypeScript 핸드북

JavaScript 코드를 다룰 때 TypeScript의 타입 시스템은 엄격함(strictness)에 따라 서로 다른 수준으로 동작해요:

JavaScript 코드에 대한 추론(inference)만을 기반으로 하는 타입 시스템
JavaScript에서 JSDoc을 통한 점진적인 타이핑
JavaScript 파일에서 // @ts-check 사용하기
TypeScript 코드
strict가 켜진 TypeScript

각 단계는 더 안전한 타입 시스템으로 한 걸음 나아가는 것이지만, 모든 프로젝트가 그 수준의 검증을 필요로 하지는 않아요. 필요한 수준을 고르면 됩니다.

TypeScript + JavaScript

이 경우는 TypeScript를 사용하는 에디터에서 자동완성, 심볼 이동, rename 같은 리팩터링 도구를 제공받는 상황이에요. TypeScript 플러그인이 있는 에디터 목록은 홈페이지에서 확인할 수 있습니다.

JSDoc으로 JavaScript에 타입 힌트 제공하기

.js 파일에서는 대개 타입을 추론할 수 있어요. 추론이 불가능한 경우에는 JSDoc 문법으로 타입을 지정할 수 있습니다.

선언 앞에 붙는 JSDoc 주석은 그 선언의 타입을 정하는 데 사용돼요. 예를 들어:

/** @type {number} */
var x;

x = 0; // OK
x = false; // OK?!

지원되는 JSDoc 패턴의 전체 목록은 JSDoc 지원 타입에서 확인할 수 있어요.

`@ts-check`

위 코드 샘플의 마지막 줄은 TypeScript라면 에러를 만들지만, JS 프로젝트에서는 기본적으로 에러가 나지 않아요. JavaScript 파일에서 에러를 켜려면 .js 파일 첫 줄에 // @ts-check를 추가하면 TypeScript가 이를 에러로 처리합니다.

// @ts-check
// @errors: 2322
/** @type {number} */
var x;

x = 0; // OK
x = false; // Not OK

에러를 추가하고 싶은 JavaScript 파일이 많다면, jsconfig.json으로 전환하는 방법도 있어요. 일부 파일의 검사를 건너뛰고 싶다면 해당 파일에 // @ts-nocheck 주석을 달면 됩니다.

TypeScript가 제시하는 에러가 동의하기 어려울 때도 있어요. 그럴 때는 특정 줄에서 에러를 무시하고 싶은데, 바로 앞 줄에 // @ts-ignore나 // @ts-expect-error를 추가하면 됩니다.

// @ts-check
/** @type {number} */
var x;

x = 0; // OK
// @ts-expect-error
x = false; // Not OK

TypeScript가 JavaScript를 어떻게 해석하는지 더 자세히 알고 싶다면 How TS Type Checks JS를 읽어보세요.

JavaScript 프로젝트에서 TypeScript 활용