Announcing Typescript 3.8 RC

Typescript 개발블로그에 3.8 버전 출시가 임박하는 글을 올렸습니다.
Typescript 3.8 RC(Release Candidate) 버전은 특별한 이슈가 없으면 Final 버전으로 몇주 이내에 배포 될 예정입니다. 배포시 기능이 빠지거나 변경 될 가능성이 있습니다.

그렇다면 Typescript 3.8 RC 버전에서는 어떠한 기능들이 추가되는지 확인해보겠습니다.

• Type-Only Imports and Export

• ECMAScript Private Fields

• export * as ns Syntax

• Top-Level await

• JSDoc Property Modifiers

• Better Directory Watching and watchOptions

• ‘Fast and Loose’ Incremental Checking

다음 추가 기능들 중 제 기준에서 체감 될 만한 기능들을 간단하게 알아보겠습니다!

Type-Only Imports and Export

제목 그대로 type을 import 혹은 export 하기 위한 새로운 문법입니다. 바로 예를 들어 보겠습니다.

import type { Something } from './some-module.ts';
export type { Something } from './some-module.ts';

이 새로운 문법은 오직 type 만을 위한 import, export 문법입니다. 그렇다면 이러한 문법을 왜 사용하는 걸까요?

이 문법을 왜 사용하는지 알아보기에 앞서 타입스크립트에서 자바스크립트로 변환 될 때 코드에 어떠한 변화가 있는지 알아보아야 합니다.

// ./foo.ts
interface Options {
  // ...
}

export function doThing(options: Options) {
  // ...
}

// ./bar.ts
import { doThing, Options } from "./foo.ts";

function doThingBetter(options: Options) {
  // do something twice as good
  doThing(options);
  doThing(options);
}

위와 같은 타입스크립트로 쓰여진 코드가 있습니다. 이 샘플코드를 자바스크립트로 변환한다면

// ./foo.js
export function doThing(options: Options) {
  // ...
}

// ./bar.js
import { doThing } from "./foo.js";

function doThingBetter(options: Options) {
  // do something twice as good
  doThing(options);
  doThing(options);
}

대부분의 경우에는 일반적인 import로 value 혹은 type을 가져오는데 큰 문제가 없었습니다. 단지 type 으로 선언된 부분은 자바스크립트로 변환 될 때 코드에서 지워지는 것을 확인 할 수 있습니다.

그렇다면 다음 샘플도 확인해 봅시다.

import { Something } from './some-module.ts';
export { Something } from './some-module.ts';

위 샘플 코드에서 Something은 value 일까요 type 일까요? 위에서 확인한 것 처럼 type은 자바스크립트로 변환되었을 때 코드에서 제외됩니다. 그렇다면 만약 위 샘플코드가 자바스크립트 파일로 변환 할 때는 Babel 혹은 타입스크립트 transpileModule API는 어떻게 판단할까요?
아마도 이 코드는 문제가 될 것이라고 경고할 겁니다.

이렇게 일반 import 로는 충분하지 않을때를 위해 Type-Only Imports and Export 문법이 추가됩니다. 이 문법을 사용할때 주의해야 하는 부분이 몇가지 있습니다.

1. import type 은 오직 Type Annotation 혹은 타입선언에만 사용해야 합니다.
   그 이유는 자바스크립트로 변환 될 때 import type 을 이용한 코드는 통째로 지워지게 됩니다.
2. class 의 extends 로 사용될 때는 사용하지 않습니다.

import type { Component } from 'react';

interface ButtonProps {
  // ...
}

class Button extends Component<ButtonProps> {
  //                 ~~~~~~~~~
  // error! 'Component' only refers to a type, but is being used as a value here.

  // ...
}

3. 기본 불러오기와 혼합하여 사용하지 않는다.

// Is only 'Foo' a type? Or every declaration in the import?
// We just give an error because it's not clear.

import type Foo, { Bar, Baz } from 'some-module';
//     ~~~~~~~~~~~~~~~~~~~~~~
// error! A type-only import can specify a default import or named bindings, but not both.

애매하게 보일 수 있는 기본 불러오기와 혼합하여 import type 하는것은 허용하지 않습니다.

이 외에 추가적인 정보는 Github pull request나 베타버전 배포 이후 변경사항에서 확인할 수 있습니다.

export * as ns Syntax

일반적으로 다른 모듈의 모든 구성요소를 하나로 export 하기 위해서는 다음과 같이 처리합니다.

import * as two from './one';
export { two };

그리고 ECMAScript2020 에 추가된 일반적인 방법으로는 다음과 같이 처리할 수 있습니다.

export * as two from './one';

이 문법이 타입스크립트 3.8 버전에 추가됩니다.
추가적인 정보는 Github pull request에서 확인할 수 있습니다.

Top-Level await

자바스크립트에서 HTTP요청과 같은 대부분의 Input과 Output은 비동기적이고, 많은 API가 Promise를 반환합니다.

fetch('...')
  .then(response => response.text())
  .then(greeting => { console.log(greeting) });

자바스크립트 사용자들은 .then으로 처리하는 것 대신에 async function과 await을 도입하였습니다.

async function main() {
  const response = await fetch('...');
  const greeting = await response.text();
  console.log(greeting);
}

main()
  .catch(e => console.error(e))

이제는 async function 를 사용하는 것 대신에 ECMAScript의 ‘Top-Level awiat’ 라고 부르는 기능을 도입하였습니다.
이 전의 자바스크립트는 async function 안쪽에서 await 키워드를 사용할 수 있었습니다. 하지만 ‘Top-Level await’는 모듈의 Top-Level에서 async 없이 사용 할 수 있습니다.

const response = await fetch('...');
const greeting = await response.text();
console.log(greeting);

// Make sure we're a module
export {};

이 기능은 모듈의 Top-Level 에서만 사용 할 수 있고, 타입스크립트에서는 import, export 할 때만 모듈로 간주됩니다. 상황에 따라서 위 샘플코드 처럼 export {}; 같은 코드를 사용해야 할 때도 있습니다.

‘Top-Level await’는 아직 모든 환경에서 사용 할 수 없으며, 타겟 컴파일러가 ES2017 이상이고, 모듈이 esnext 이거나 system 일때 사용 가능하다고 합니다. 또한 여러 환경 및 번들러 내에서의 지원은 제한적이거나 실험 지원을 가능하게 해야 할 수 있습니다.

사실 ‘Top-Level await’ 기능은 당장 체감될 정도의 추가기능은 아니지만 타입스크립트가 ECMAScript2020의 ‘Optional chaning’, ‘Nullish coalescing’ 등 비교적 최신 문법을 빠르게 포함하는 방향성에 의의를 두었습니다.

Better Directory Watching and watchOptions

더 나은 Directory Watching이 제공됩니다. 이전 버전의 타입스크립트는 패키지를 설치할 때 가끔 에디터 세션의 크롤링이 느려지는 경우가 있었습니다. 이러한 현상을 막기 위해 타입스크립트 3.8 버전에서는 패키지가 설치된 이후 안정화 될 시간을 약간 두고 해당 디렉토리의 Watcher를 설치합니다.

각 프로젝트마다 Directory Watching의 최적의 방법이 다르므로 이를 tsconfig 옵션으로 제공합니다

{
    // Some typical compiler options
    "compilerOptions": {
        "target": "es2020",
        "moduleResolution": "node",
        // ...
    },

    // NEW: Options for file/directory watching
    "watchOptions": {
        // Use native file system events for files and directories
        "watchFile": "useFsEvents",
        "watchDirectory": "useFsEvents",

        // Poll files for updates more frequently
        // when they're updated a lot.
        "fallbackPolling": "dynamicPriority"
    }
}

옵션은 총 4가지가 있고 해당 옵션은 이 곳에서 확인 가능합니다.

그 외 변경사항

이 외의 변경사항을 자세하게 확인하고 싶으시면 Announcing Typescript 3.8 RC에서 확인 할 수 있습니다.

Reference

• Announcing Typescript 3.8 RC