(번역) 타입스크립트 네이티브 프리뷰 소개

원문 : https://devblogs.microsoft.com/typescript/announcing-typescript-native-previews/

지난 3월, 저희는 타입스크립트 컴파일러와 관련 도구를 네이티브 코드로 포팅하는 프로젝트를 공개했습니다. 포팅 작업은 네이티브 컴파일 언어(Go)를 사용할 뿐만 아니라, 공유 메모리 병렬 처리와 동시성을 사용하여 대부분의 프로젝트에서 10배의 속도 향상을 달성했습니다. 그 이후로 복잡한 대규모 실제 프로젝트에서 실행할 수 있도록 여러 진전을 이뤄냈습니다.

오늘, 타입스크립트 네이티브 프리뷰의 출시를 발표하게 되어 기쁩니다. 오늘부터, npm을 통해 네이티브 타입스크립트 컴파일러의 프리뷰를 사용하실 수 있습니다. 또한, Visual Studio 마켓플레이스를 통해 VS Code 용 편집기 기능의 프리뷰 버전을 사용하실 수 있습니다.

npm을 통해 컴파일러를 설치하려면, 프로젝트에서 다음의 명령어를 입력하면 됩니다.

npm install -D @typescript/native-preview

이 패키지는 tsgo라는 실행 파일을 제공합니다. 이는 typescript 패키지가 제공하는 기존 tsc와 유사하게 동작합니다.

npx tsgo --project ./src/tsconfig.json

최종적으로 tsgo는 tsc로 이름이 변경되어 typescript 패키지 내에 포함될 예정입니다. 현재로서는 쉽게 테스트할 수 있도록 분리해 놓았습니다. tsgo는 아직 개발 중이지만, 실제 프로젝트를 빌드하거나 타입 검사를 실시하는 데 문제가 없습니다.

하지만 명령줄 컴파일러는 그저 일부에 불과합니다. 많은 분들이 새로운 편집 환경을 궁금해하고 있다는 걸 알고 있습니다. 이제 VS Code에서 새로운 "타입스크립트 (네이티브 프리뷰)" 확장 기능을 사용할 수 있습니다. VS Code 확장 프로그램 마켓플레이스에서 쉽게 설치할 수 있습니다.

확장 프로그램은 아직 개발 초기 단계이기 때문에, VS Code에 내장된 타입스크립트 확장 기능에 우선 의존합니다. 따라서 설치 후에 별도로 활성화가 필요합니다. VS Code 명령어 팔레트를 열고 "TypeScript Native Preview: Enable (Experimental)" 를 입력하시면 활성화할 수 있습니다.

또는 설정 UI에서 “TypeScript > Experimental: Use Tsgo”를 통해 활성화할 수 있습니다.

또는 JSON 설정에 다음과 같이 추가하셔도 됩니다.

"typescript.experimental.useTsgo": true,

업데이트, 릴리즈 주기 및 로드맵

프리뷰는 최종적으로 타입스크립트 7이 될 예정이며, 포팅 작업의 최신 개발 사항을 쉽게 사용해 볼 수 있도록 매일 밤 수정 버전을 게시할 예정입니다. VS Code 확장 기능을 사용하는 경우, 기본적으로 자동 업데이트가 제공됩니다. 어떤 이유로든 문제가 발생하면 제보해 주시고 "TypeScript Native Preview: Disable" 명령으로 새 언어 서비스를 일시적으로 비활성화하시기를 바랍니다.

또는 위에서 언급한 방법 중 하나를 통해 비활성화하셔도 됩니다.

네이티브 프리뷰에는 현재 안정된 버전의 타입스크립트에 있는 많은 기능이 아직 구현되지 않았다는 점에 유의하세요. 여기엔 --build(개별 프로젝트는 여전히 tsgo로 빌드 가능)와 --declaration 내보내기 및 특정 저수준 내보내기 대상과 같은 명령줄 기능이 있습니다. 마찬가지로 자동 import, 전체 참조 찾기, 이름 변경과 같은 편집기 기능도 아직 구현이 보류 중입니다. 하지만 이러한 기능들에 대해 열심히 작업 중이므로 자주 확인하시길 권장합니다!

새로운 기능은 무엇인가요?

첫 번째 발표 이후로 타입 검사 지원, 테스트 가능성, 편집기 지원 그리고 API 측면에서 주목할 만한 진전을 이뤄냈습니다. 그간의 성과와 앞으로의 계획에 대해 간략히 알려드리고자 합니다.

네이티브 프리뷰는 최종적으로 타입스크립트 7이 될 예정이지만, 지금까지는 자연스럽게 "Project Corsa"로 지칭해 왔습니다. 그리고 타입스크립트 5.8을 구성하는 현재의 JS 기반 코드베이스는 "Strada"로 지칭했습니다. 따라서 업데이트에서는 네이티브와 안정적인 버전을 "Corsa"(TS7)와 "Strada"(TS5.8)로 구분할 예정입니다.

더욱 완전해진 타입 검사 지원

이번에 타입 검사기의 대부분이 포팅되었습니다. 따라서 일부 의도적인 변경(ex. 타입 순서 변경)과 lib.d.ts의 일부 오래된 정의에 영향을 받는 경우를 제외하고는 대부분의 프로젝트에서 이전과 동일한 오류가 표시되어야 합니다. 만약 일치하지 않거나 다른 점이 발견된다면 이슈를 제보해 주시기 바랍니다.

첫 번째 발표 이후 추가된 두 가지 주요 타입 검사 기능 지원인 JSX와 자바스크립트 + JSDoc에 대해 소개합니다.

JSX 검사 지원

개발자들이 타입스크립트 네이티브 포트를 처음 접했을 때, 우리는 기대치를 낮출 필요가 있었습니다. 타입 검사는 꽤 오랫동안 진행되어 왔지만, 일부 항목은 여전히 완전하게 검사되지 않았습니다. 가장 눈에 띄게 누락된 것은 JSX였습니다. Corsa는 JSX를 구문 분석할 수 있지만, 타입 검사 시에 대부분의 JSX를 그냥 넘겼고, JSX는 아직 지원되지 않는다는 점에 유의해야 했습니다.

이때 이후로 JSX를 위한 타입 검사 기능을 추가했고, 실제 JSX 프로젝트가 얼마나 빠르게 빌드될 수 있는지 깨닫게 되었습니다. 예시 코드베이스로서 Sentry를 살펴보았습니다. 리포지토리 루트에서 타입스크립트 5.8로 --extendedDiagnostics --noEmit를 실행해 보면 다음과 같은 결과가 나옵니다.

$ tsc -p . --noEmit --extendedDiagnostics
Files:                         9306
Lines of Library:             43159
Lines of Definitions:        352182
Lines of TypeScript:        1113969
Lines of JavaScript:           1106
Lines of JSON:                  304
Lines of Other:                   0
Identifiers:                1956007
Symbols:                    3563371
Types:                       999619
Instantiations:             3675199
Memory used:               3356832K
Assignability cache size:    944737
Identity cache size:          43226
Subtype cache size:          110171
Strict subtype cache size:   430338
I/O Read time:                1.40s
Parse time:                   3.48s
ResolveModule time:           1.88s
ResolveTypeReference time:    0.02s
ResolveLibrary time:          0.01s
Program time:                 7.78s
Bind time:                    1.77s
Check time:                  63.26s
printTime time:               0.00s
Emit time:                    0.00s
Total time:                  72.81s

전체 코드베이스를 타입 검사하기 위해 1분 이상이 소요됩니다! 몇 가지 최소한의 변경으로 네이티브 포트가 어떻게 동작하는지 확인해 보겠습니다.

$ tsgo -p . --noEmit --extendedDiagnostics
...
Files:              9292
Lines:           1508361
Identifiers:     1954236
Symbols:         5011565
Types:           1689528
Instantiations:  6524885
Memory used:    3892267K
Memory allocs:  61043466
Parse time:       0.712s
Bind time:        0.133s
Check time:       5.882s
Emit time:        0.012s
Total time:       6.761s

결과상 약간 다른 점이 있지만, 동일한 머신에서 Corsa는 빌드 시간을 1분에서 7초 미만으로 단축했습니다. 여러분의 결과는 다를 수 있지만, 일반적으로 10배 이상의 일관된 속도 향상을 확인하실 수 있습니다. 기존 JSX 코드에 오류를 추가하면 tsgo는 이를 잡아낼 수 있습니다.

자세한 내용은 JSX 타입 검사 포팅 PR에서 확인하실 수 있으며, tslib 및 JSX factory import에서 일부 후속 지원을 확인하실 수 있습니다.

자바스크립트 검사

타입스크립트는 자바스크립트 파일에 대한 구문 분석과 타입 검사를 지원합니다. 자바스크립트 및 ECMAScript는 어노테이션, interface 또는 type 선언과 같은 타입 관련 구문을 지원하지 않기 때문에, 타입스크립트는 타입 분석을 위해 JS 소스 코드의 JSDoc 주석을 참고합니다.

타입스크립트 네이티브 프리뷰는 JS 파일 타입 검사 또한 지원합니다. Corsa의 JS 타입 체크 기능을 개발하기 위해, 구현 초기에 내린 결정에 대해 다시 검토를 진행했습니다. 자바스크립트 지원은 매우 유기적으로 개발되었기 때문에 오늘날 더 이상 사용되지 않는 매우 세세한 패턴도 모두 분석하고 있었습니다. 새 코드베이스는 단순화를 위해 기존 코드를 포팅하지 않고 새롭게 작성되었습니다. 따라서 프로젝트의 일부 구문을 다시 작성하거나, 보다 관용적이고 현대적인 JS 스타일로 교체해야 할 수도 있습니다.

만약 프로젝트에 적용했을 때 문제가 되는 부분이 있다면 제보해 주시기 바랍니다.

편집기 지원 및 LSP 진행 상황

Corsa 코드베이스를 출시했을 당시에 매우 기초적인 LSP 기반 언어 서버가 포함되어 있었습니다. 대부분의 가시적인 개발은 컴파일러 자체에서 이뤄졌지만, 새로운 시스템에서 편집기 기능을 포팅하기 위해 여러 방면에서 반복 작업을 거쳤습니다. Strada 코드베이스는 LSP 이전의 TSServer 형식을 통해 편집기와 통신하기 때문에, 코드베이스 간 완벽한 1:1 포팅을 목표로 하지는 않습니다. 즉, 코드를 포팅할 때 수동으로 포팅해야 하는 경우가 좀 더 많고, LSP를 준수하는 타입 정의를 어떻게 생성하는지에 대해 미리 생각해 둘 필요가 있습니다. 오류 및 진단 수집, 정의로 이동, 호버 등은 매우 초기 단계에서 이뤄집니다.

가장 최근 들어 새로운 마일스톤을 달성했습니다. 바로 자동 완성 기능을 활성화한 것입니다! 자동 import와 기타 부수적인 기능이 아직 완전히 포팅되지는 않았지만, 대규모 코드베이스를 사용하는 많은 팀들은 지금 기능으로도 충분할 수 있습니다. 앞으로는 기존 언어 서버 테스트를 포팅하고, 모든 참조 찾기, 이름 변경 그리고 도움말 기능을 활성화하는 데 우선순위를 두고 있습니다.

API 진행 상황

이 부분을 포팅하는 데 가장 큰 과제는 타입스크립트 API 사용자와의 연속성입니다. 표준 I/O를 통해 활용할 수 있는 API 계층의 초기 기반이 마련되어 있습니다. 이는 API 사용자들이 언어에 관계없이 IPC를 통해 타입스크립트 프로세스와 통신할 수 있다는 것을 의미합니다. 많은 API 사용자들이 타입스크립트와 자바스크립트 코드를 작성한다는 것을 알고 있기 때문에, API와 상호작용할 수 있는 자바스크립트 기반의 클라이언트 또한 마련되어 있습니다.

오늘날 많은 타입스크립트 API가 동기적으로 동작하고 있기 때문에, 프로세스와의 통신도 동기적인 방식으로 구현하고 싶었습니다. 안타깝게 Node.js는 자식 프로세스와 동기적으로 통신할 수 있는 쉬운 방법을 제공하지 않기 때문에, 많은 사람들이 만족할 만한 Rust를 기반으로 libsyncrpc라는 네이티브 Node.js 모듈을 개발했습니다.

아직 API 설계 초기 단계이지만 이에 대한 의견과 피드백은 언제나 환영합니다. 현재의 API 서버에 대한 자세한 내용은 여기에서 확인하실 수 있습니다.

알려진 차이점 및 주목할 만한 차이점

앞서 언급했듯이 Corsa 컴파일러 언어 서비스와 Strada는 약간 차이가 있을 수 있습니다. tsgo와 네이티브 프리뷰 VS Code 확장 기능을 사용하면서 초반에 겪을 수 있는 몇 가지 차이점에 대해 말씀드리겠습니다.

일부 차이점은 향후 타입스크립트 6.0에서의 지원 중단 사항 때문입니다. 예를 들어, node나 node10 모듈 해석 방식은 더 이상 사용되지 않고, 대신 node16, nodenext, bundler 방식으로 전환될 예정입니다. 만약 --moduleResolution node 또는 --module commonjs와 같은 옵션을 사용 중이라면 다음과 같은 오류를 마주할 수 있습니다.

Cannot find module 'blah' or its corresponding type declarations.
Module '"module"' has no exported member 'Thing'.

다음과 같이 tsconfig.json 설정을 변경한다면 지속적인 오류가 발생할 수 있습니다.

{
    "compilerOptions": {
        // ...
        "module": "preserve",
        "moduleResolution": "bundler",
    }
}

{
    "compilerOptions": {
        // ...
        "module": "nodenext"
    }
}

프로젝트 구성에 따라 수동으로 수정할 수 있지만, import를 제거하고 자동 import를 활용하여 "올바른 작업"을 수행할 수도 있습니다.

지원 중단 외에도, 오래된 대상에 대한 저수준 내보내기는 제한되며, JSX 내보내기는 작성한 내용을 보존하는 선에서만 동작합니다. 선언 내보내기 역시 현재는 지원되지 않습니다. --build 모드와 프로젝트 참조에 대한 언어 서비스 기능은 아직 사용할 수 없지만, 프로젝트 종속성은 tsc를 통해 빌드할 수 있으며, 네이티브 프리뷰 언어 서비스는 생성된 .d.ts 파일을 활용할 수 있습니다.

다음 단계는 무엇인가요?

올해 말까지, --build와 같은 주요 기능과 편집기를 위한 대부분의 언어 서비스 기능을 포함하여 완전한 버전의 컴파일러 출시를 목표로 하고 있습니다.

그러나 그때까지 기다릴 필요는 없습니다! 타입스크립트 네이티브 프리뷰는 매일 밤 게시되고 있기 때문에, 주요 개발 사항을 주기적으로 업데이트할 예정입니다. 그러니 네이티브 프리뷰를 한번 사용해 보는 건 어떨까요?

해피 해킹!

• Daniel Rosenwasser 그리고 타입스크립트 팀