화살표 함수와 문맥적 타이핑
화살표 함수를 능숙하게 사용하고, 사용 방식에 따라 문맥적 타이핑이 매개변수와 반환 타입을 추론하는 과정을 살펴봅니다.
화살표 함수와 문맥적 타이핑은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 3개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 3개의 강의가 포함되어 있습니다.
화살표 함수와 컨텍스트를 사용하는 이유
화살표 함수는 간결한 문법과 어휘적 this를 제공합니다. 문맥적 타이핑을 사용하면 TypeScript가 사용 방식(예: 배열 메서드)에서 매개변수와 반환 타입을 추론하므로, 안전성을 유지하면서 반복적인 코드를 줄일 수 있습니다.
화살표 함수 기초
명확성을 높일 수 있다면 매개변수와 반환값에 주석을 작성하십시오. 화살표 함수는 간결하고 주변의 this를 유지합니다(함수 선언과는 다릅니다).
// Arrow syntax: parameters => expression/body
const greet = (name: string): string => {
return `Hello, ${name}`;
};
console.log(greet("Ada"));map을 통한 컨텍스트
문맥적 타이핑: map은 요소 타입을 알고 있으므로 화살표 함수의 매개변수는 number로, 결과는 number[]로 추론됩니다.
// Context supplies types: numbers.map expects (n:number)=>number
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // n inferred as number
console.log(doubled);추론되는 반환값
타입이 지정된 API(Promise, 배열 메서드)는 매개변수와 반환값의 추론을 돕기 때문에 명시적인 주석이 필요하지 않은 경우가 많습니다.
// Promise.then infers the callback parameter and return type
const toLength = (s: string) => s.length;
Promise.resolve("TS")
.then(s => toLength(s)) // s inferred as string
.then(len => console.log(len));선택적 매개변수와 기본값
화살표 함수는 기본 매개변수와 선택적 매개변수를 지원합니다. 선택적 값을 사용하기 전에 범위를 좁히거나 대체값(예: ??)을 제공하십시오.
// Optional + default with arrows
const padLeft = (text: string, width = 2, ch?: string): string => {
const fill = (ch ?? " ").repeat(Math.max(0, width));
return fill + text;
};
console.log(padLeft("X")); // default width 2, default char " "
console.log(padLeft("X", 4, "."));주의할 점
주의할 점:
- 주석을 지나치게 많이 작성하면 추론이 방해되므로 최소한으로 시작하십시오.
- API에 타입이 없거나(any) 의도가 불분명할 때는 명시적으로 작성하십시오.
- 화살표 함수는 this를 어휘적으로 캡처한다는 점을 기억하십시오. 콜백에는 유용하지만, 동적인 this가 필요할 때는 피하십시오.
문맥적 타이핑 확인
빠른 확인: 화살표 함수에서 “문맥적 타이핑”은 무엇을 의미하나요?
복습 및 다음 내용
복습: 화살표 함수는 간결한 문법과 어휘적 this를 제공합니다. 문맥적 타이핑을 사용하면 사용 방식에 따라 타입이 추론되므로 콜백을 짧고 타입 안전하게 유지할 수 있습니다.
자주 묻는 질문
“화살표 함수와 문맥적 타이핑” 강의는 무료인가요?
네 — “화살표 함수와 문맥적 타이핑” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 3개의 강의가 포함되어 있습니다.
“화살표 함수와 문맥적 타이핑”에서 뭘 배우나요?
화살표 함수를 능숙하게 사용하고, 사용 방식에 따라 문맥적 타이핑이 매개변수와 반환 타입을 추론하는 과정을 살펴봅니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 3번째 강의입니다.
“화살표 함수와 문맥적 타이핑” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.