개발/프론트엔드

🟦 TypeScript 7.1 베타 · es2026 타깃과 달라진 점

개발만빼고다잘함 2026. 10. 27. 16:21
반응형

2026-10-20 TypeScript 공식 블로그에 7.1 베타 발표 글이 올라왔다. Go 네이티브 포트인 7.0(2026-07-08) 다음 마이너다. 7.0에서 올리면 무엇이 깨질까. es2026 타깃을 켜면 무엇을 쓸 수 있을까.

설치와 일정

베타는 npm의 beta 태그로 받는다. 레지스트리에 찍힌 버전은 7.1.0-beta다. 실행 명령은 그대로 tsc다.

# 프로젝트 개발 의존성으로 베타 설치
npm install -D typescript@beta
# 설치한 컴파일러로 타입 검사·빌드
npx tsc

일정은 공식 글 문구가 전부다. RC는 "about a month from now"라고 적었다. 정식은 그 뒤 "shortly thereafter"라고만 했다. 구체적인 날짜는 확인되지 않았다.

먼저 볼 동작 변경 두 가지

새 기능보다 이쪽을 먼저 봐야 한다. 공식 글이 "Notable Behavioral Changes"로 따로 묶은 항목이다.

  • lib.d.ts : DOM용으로 생성되는 타입이 갱신됐다. 타입 검사에 영향이 있을 수 있다. 세부는 공식 글이 링크한 이슈에 있다
  • 분배 타입 파라미터 : 조건부 타입에서 분배된 타입 파라미터를 제약으로 쓸 때 검사가 더 엄격해졌다

두 번째는 공식 글 예시를 보면 감이 온다.

type Show<A extends number, B extends A> = `${B} extends ${A}`;

// A가 분배된 뒤에는 B가 각 A의 하위 타입이라는 보장이 없다
type Issue<A extends number, B extends A> =
    A extends B ? never : Show<A, B>;
//                        ~~~~~~~~~~ 7.1에서 오류

type UhOh = Issue<0 | 1, 0>;

오류 문구 뒷부분은 "'B' is only assignable to the non-distributed 'A', but 'A' has been distributed here."이다. 제네릭 오류 문구는 처음 보면 한참 들여다보게 된다. 공식 글의 비유가 딱 맞다. 고양이는 동물의 하위 타입이지만 모든 종류의 동물의 하위 타입은 아니다. 대응은 둘이다. 필요 없는 제약이면 지운다. 아니면 조건부 타입 검사를 하나 더 건다.

es2026과 esnext 구분

7.1부터 es2026이 안정된 --target·--lib 값이 됐다. 공식 글은 새 메서드를 두 묶음으로 나눠 적었다.

설정들어오는 것
설정 들어오는 것
es2026 Math.sumPrecise(), Iterator.concat(), JSON.rawJSON(), Error.isError(), Map·WeakMap의 getOrInsert()·getOrInsertComputed(), Uint8Array base64·hex 메서드, Array.fromAsync()
esnext Promise.allKeyed·Promise.allSettledKeyed, Iterator.zip·Iterator.zipKeyed, Iterator.prototype.chunks·join·includes

esnext 쪽은 공식 글이 "proposed library methods"라고 부른다. source import를 쓸 게 아니면 es2026까지만 켜는 편이 안전하다. tsconfig에서는 이렇게 적는다.

{
  "compilerOptions": {
    // 7.1부터 안정 값으로 쓸 수 있다
    "target": "es2026",
    "lib": ["es2026", "dom"]
  }
}

CSS·wasm import 타입

앰비언트 모듈 선언에 import attributes를 붙일 수 있게 됐다. 필요한 attribute 없이 import하면 오류가 난다. attribute가 맞으면 그에 맞는 타입이 붙는다.

// 선언 쪽: type이 css인 import만 CSSStyleSheet로 본다
declare module "*" with { type: "css" } {
    const content: CSSStyleSheet;
    export default content;
}

// 사용하는 쪽
import sheet from "./styles.css" with { type: "css" };

import source 문법(source phase imports)도 들어왔다. 실행 전 모듈 표현을 받아 WebAssembly.instantiate에 넘기는 용도다. 쓰려면 --module이 esnext·nodenext·preserve 중 하나여야 한다. --lib이나 --target에도 esnext가 필요하다.

// wasm 모듈을 실행 전 단계로 가져온다
import source FastThing from "./fast-thing.wasm";
const instance = await WebAssembly.instantiate(FastThing, {
    wasi_snapshot_preview1: wasi.wasiImport
});

새 API 진입점

7.0 발표 때 공식 블로그는 새 API가 7.1에 실릴 것으로 예상한다고 적었다. 이번에 typescript/sync·typescript/async 같은 진입점으로 나왔다. Vue·Svelte 같은 프레임워크 파일을 잇는 Content Mappers도 같이 들어왔다.

성능 수치

공식 표로 보면 7.0 대비 속도는 1.2x~1.9x다. 메모리는 15.8%~49.6% 줄었다. 1.9x와 49.6%는 둘 다 mui-docs 한 프로젝트의 값이다. 내 프로젝트도 그만큼 빨라진다는 보장은 아니다.

런타임 쪽 버전 일정은 Node.js 26 LTS 글에 따로 적어 뒀다.

참고

반응형