인라인 객체 타입 어노테이션

Coddy JavaScript 여정의 TypeScript 소개 섹션에 포함된 레슨. 73개 중 37번째.

때때로 단일하고 구체적인 사용 사례를 위해 객체의 구조를 정의해야 할 때가 있습니다. 재사용 가능한 타입 별칭(type alias)이나 인터페이스(interface)를 만드는 대신, TypeScript에서는 변수를 선언하는 위치에서 직접 객체의 형태를 정의할 수 있습니다. 이것을 인라인 객체 타입 어노테이션(inline object type annotation)이라고 합니다.

이 구문은 중괄호를 사용하여 변수 선언에서 객체의 속성과 해당 타입을 직접 설명합니다:

let user: { name: string; id: number } = {
  name: "Alice",
  id: 123
};

이 방식은 코드의 다른 곳에서 재사용할 계획이 없는 일회성 객체 구조에 완벽합니다.

챌린지

쉬움

다음과 같은 구조를 정의하는 인라인 객체 타입 어노테이션을 사용하여 student라는 이름의 변수를 생성하세요:

string 타입의 name 속성
number 타입의 studentId 속성
boolean 타입의 isEnrolled 속성

변수에 다음 값들을 할당하세요:

name: "Sarah Johnson"
studentId: 12345
isEnrolled: true

다음과 같은 구조를 정의하는 인라인 객체 타입 어노테이션을 사용하여 course라는 이름의 또 다른 변수를 생성하세요:

string 타입의 title 속성
number 타입의 credits 속성
string 타입의 instructor 속성

변수에 다음 값들을 할당하세요:

title: "Introduction to TypeScript"
credits: 3
instructor: "Dr. Smith"

다음 정보를 각각 별도의 줄에 출력하세요:

학생의 이름 (name)
학생의 ID (studentId)
강좌 제목 (title)
학점 수 (credits)

직접 해보기

// TODO: 여기에 코드를 작성하세요
// 인라인 객체 타입 어노테이션을 사용하여 student 변수를 생성합니다
// 인라인 객체 타입 어노테이션을 사용하여 course 변수를 생성합니다
// 필요한 정보를 출력합니다

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

TypeScript 소개의 모든 레슨

1TS 시작하기

TypeScript란 무엇인가요?왜 TypeScript를 사용해야 할까요?첫 번째 TypeScript 코드 작성하기 컴파일 과정 및 에러 요약: TS 입문

4함수 활용하기

매개변수 및 반환값 타입 지정 화살표 함수 타입 지정 'void' 반환 타입 '?'를 사용한 선택적 매개변수 기본 매개변수 값 나머지 매개변수 타입 지정 함수 타입 정의하기 요약: 타입이 지정된 함수 작성하기

7프로젝트: 간단한 할 일 목록

프로젝트: Task 구조체 정의하기 할 일 추가 함수

10프로젝트: 재고 관리

프로젝트: 제네릭 재고 아이템 함수: 재고에 아이템 추가하기

ID로 아이템을 찾는 함수

특정 재고 유형 생성하기

아이템 상세 정보를 가져오는 함수

3자료구조: 배열과 튜플

타입이 지정된 배열 배열의 'readonly' 수식어 튜플이란 무엇인가?튜플 선언과 접근 튜플 구조 분해 읽기 전용 튜플 다차원 타입 배열 배열과 Spread Operator 요약: 배열과 튜플

6객체와 인터페이스 타입 정의

인라인 객체 타입 어노테이션객체를 위한 타입 별칭 인터페이스 소개 인터페이스 vs 타입 별칭 선택적 속성과 읽기 전용 속성 인터페이스와 타입 확장하기 인터페이스에 메서드 추가하기 요약: 객체 구조 정의하기

9제네릭: 살펴보기

제네릭이 해결하는 문제 제네릭 Identity 함수 만들기 제네릭 함수 사용하기 제네릭 배열 제네릭 인터페이스 요약: 제네릭 함수 연습

직접 연습해 보세요: 온라인 JavaScript 컴파일러