TypeScript Academy · 강의

TypeScript 5.3-5.4: 새로운 형식 좁히기와 NoInfer

NoInfer 유틸리티와 새로운 switch/case 형식 좁히기를 적용합니다.

레슨 3/413개 단계

TypeScript 5.3-5.4: 새로운 형식 좁히기와 NoInfer은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

TypeScript 5.3 개요

TypeScript 5.3(2023년 11월 출시)에는 switch/case 문에서의 타입 좁히기 개선, JSDoc import type 지원, import type의 해석 모드가 도입되었습니다.

// npm install typescript@5.3

Switch/Case 타입 좁히기 개선

TS 5.3은 switch 문 내부의 타입 좁히기를 개선했으며, 특히 여러 case를 포함하는 판별 유니언에서 효과가 큽니다.

type Result = { status: "ok"; data: string } | { status: "err"; code: number };

function handle(r: Result) {
  switch (r.status) {
    case "ok":
      console.log(r.data);   // r: { status: "ok"; data: string } — narrowed
      break;
    case "err":
      console.log(r.code);   // r: { status: "err"; code: number } — narrowed
      break;
  }
}

JSDoc import type

TS 5.3은 JavaScript 파일에서 타입 전용 가져오기에 @import JSDoc 태그를 사용할 수 있도록 지원을 추가했습니다.

/** @import { User } from "./types.js" */

/** @param {User} user */
function greet(user) {
  console.log(user.name);
}

import type의 해석 모드

TS 5.3에서는 import type에 resolution-mode를 지정하여 가져오기를 CommonJS로 해석할지 ESM으로 해석할지 제어할 수 있습니다.

import type { User } from "some-library" with { "resolution-mode": "require" };

TypeScript 5.4 개요

TypeScript 5.4(2024년 3월 출시)에는 NoInfer 유틸리티 타입, 클로저에서 보존되는 타입 좁히기, Object.groupBy 및 Map.groupBy 타입이 도입되었습니다.

// npm install typescript@5.4

NoInfer<T> 유틸리티 타입

NoInfer는 TypeScript가 제네릭 인수를 추론 위치로 사용하는 것을 막아, 다른 인수만으로 타입을 추론하도록 합니다.

function createStore<T>(initial: T, onChange: (val: NoInfer<T>) => void) {
  // T inferred from initial, not from onChange callback
}

createStore({ count: 0 }, (val) => {
  // val: { count: number } — inferred from initial only
});

NoInfer가 중요한 이유

NoInfer가 없으면 TypeScript는 두 인수에서 모두 T를 추론하려고 하므로 타입이 예상치 못하게 확장될 수 있습니다.

// Before NoInfer: T may be widened by the callback
function createStore<T>(initial: T, onChange: (val: T) => void) {}
createStore({ count: 0 }, (val: { count: number; extra: string }) => {});
// T widened to include extra — not what we want

클로저 이후에도 보존되는 타입 좁히기

TS 5.4는 타입을 좁힌 변수가 클로저 이후에 할당되지 않는 경우 클로저 내부의 타입 좁히기를 보존합니다.

function process(val: string | null) {
  if (!val) return;
  // val: string
  setTimeout(() => {
    console.log(val.toUpperCase()); // TS 5.4: still string — not widened
  }, 100);
}

Object.groupBy 타입 지정

TS 5.4에는 ES2024의 Object.groupBy 및 Map.groupBy 정적 메서드에 대한 타입이 추가되었습니다.

const users = [
  { name: "Alice", role: "admin" },
  { name: "Bob", role: "user" },
];
const grouped = Object.groupBy(users, (u) => u.role);
// grouped: { [role: string]: { name: string; role: string }[] }

선언 생성 개선

TS 5.4는 매핑된 타입과 조건부 타입이 관련된 복잡한 경우의 선언 파일 생성을 개선하여, 생성된 .d.ts 파일에서 잘못 감지되는 오류를 줄였습니다.

// Fewer "Type ... is not assignable to type ..." errors
// in generated declaration files from TS 5.4 onward

복습: TS 5.3~5.4

TS 5.3: switch/case 타입 좁히기 개선, JSDoc @import 지원. TS 5.4: 원치 않는 타입 추론 위치를 차단하는 NoInfer, 클로저 타입 좁히기 보존, Object.groupBy 타입.

빠른 확인

NoInfer는 무엇을 방지합니까?

배운 내용

TypeScript 5.3에서는 switch/case 타입 좁히기가 개선되고 JSDoc import type이 추가되었습니다. TS 5.4에서는 추론 위치를 제어하는 NoInfer가 도입되고, 클로저를 가로지르는 타입 좁히기가 보존되며, ES2024를 위한 Object.groupBy 타입이 추가되었습니다.

무료로 시작

AI 튜터와 함께 TypeScript을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스
101
레슨
352

자주 묻는 질문

“TypeScript 5.3-5.4: 새로운 형식 좁히기와 NoInfer” 강의는 무료인가요?

네 — “TypeScript 5.3-5.4: 새로운 형식 좁히기와 NoInfer” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“TypeScript 5.3-5.4: 새로운 형식 좁히기와 NoInfer”에서 뭘 배우나요?

NoInfer 유틸리티와 새로운 switch/case 형식 좁히기를 적용합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“TypeScript 5.3-5.4: 새로운 형식 좁히기와 NoInfer” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. TypeScript 5.0: 데코레이터 표준 및 const 형식 매개변수
  2. TypeScript 5.1-5.2: 향상된 추론
  3. TypeScript 5.3-5.4: 새로운 형식 좁히기와 NoInfer
  4. TypeScript 5.5+: 격리된 선언과 그 이후
← TypeScript Academy(으)로 돌아가기