TypeScript 5.3-5.4: 새로운 형식 좁히기와 NoInfer
NoInfer 유틸리티와 새로운 switch/case 형식 좁히기를 적용합니다.
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.3Switch/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.4NoInfer<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 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- TypeScript 5.0: 데코레이터 표준 및 const 형식 매개변수
- TypeScript 5.1-5.2: 향상된 추론
- TypeScript 5.3-5.4: 새로운 형식 좁히기와 NoInfer
- TypeScript 5.5+: 격리된 선언과 그 이후