interface와 구조적 타이핑

이번 단계에서 배울 내용

interface는 객체가 만족해야 할 구조를 선언합니다. TypeScript는 이름보다 실제 속성 구조를 비교하므로 필요한 속성을 가진 객체라면 같은 계약을 사용할 수 있습니다.

먼저 예시를 살펴보세요

아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다.

interface Named { name: string }
function greet(value: Named) { return value.name; }

해야 할 일

제목을 가진 항목의 interface를 만들고 강의 객체를 요약 함수에 전달하세요.

완성 조건

• NamedItem interface에 title: string이 있습니다.
• 함수는 NamedItem을 받고 id 같은 추가 속성이 있는 객체도 받을 수 있습니다.
• 추천: 반응형 레이아웃이 표시됩니다.

작업 방법

1. 에디터에서 src/lesson.ts을 엽니다.
2. TODO 주석 주변의 코드를 한 단계씩 수정합니다.
3. 미리보기에서 화면과 동작을 직접 확인합니다.
4. 완성 조건을 다시 읽고 제출합니다.

별도의 입력값은 없습니다.

에디터에 준비된 파일을 수정하고 브라우저 미리보기에서 결과를 확인하세요.

별도의 출력값은 없습니다.

페이지가 정상적으로 열리고 문제의 완성 조건과 동작을 모두 만족하면 됩니다.

도움말: 함수가 필요한 최소 속성만 interface에 선언하면 더 많은 객체를 안전하게 재사용할 수 있습니다.