인터페이스와 타입 확장하기

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

코드를 중복해서 작성하는 대신, TypeScript는 상속을 통해 기존 타입을 기반으로 새로운 타입을 생성할 수 있는 강력한 메커니즘을 제공합니다.

인터페이스의 경우, extends 키워드를 사용하여 기본 인터페이스로부터 모든 속성을 상속받는 새로운 인터페이스를 생성할 수 있습니다:

interface Vehicle {
  brand: string;
  year: number;
}

interface Car extends Vehicle {
  doors: number;
}

// Car는 이제 brand, year, doors를 가집니다

타입 별칭의 경우, & 연산자를 사용한 교차 타입(intersection types)을 통해 동일한 결과를 얻을 수 있습니다:

type Vehicle = {
  brand: string;
  year: number;
};

type Car = Vehicle & {
  doors: number;
};

// Car는 인터페이스 예제와 동일한 속성을 가집니다

두 가지 접근 방식 모두 기본 타입의 모든 속성과 사용자가 정의한 추가 속성을 포함하는 새로운 타입을 생성합니다. 이는 코드 재사용성을 높이고 애플리케이션 내의 관련 타입들 간의 일관성을 유지하는 데 도움이 됩니다.

챌린지

쉬움

다음 속성을 가진 Employee라는 이름의 기본 인터페이스를 생성하세요:

number 타입의 id
string 타입의 name
string 타입의 department

Employee를 확장(extend)하고 다음 속성을 추가한 Manager라는 이름의 인터페이스를 생성하세요:

number 타입의 teamSize
number 타입의 budget

다음 속성을 가진 Contact라는 이름의 타입 별칭(type alias)을 생성하세요:

string 타입의 email
string 타입의 phone

교차 타입(intersection types)을 사용하여 Employee와 Contact를 결합하고, 다음 속성을 추가한 Developer라는 이름의 타입 별칭을 생성하세요:

string[] 타입의 programmingLanguages
number 타입의 yearsExperience

작성한 인터페이스와 타입을 사용하여 다음 변수들을 생성하세요:

id 101, name "Alice Johnson", department "Engineering", teamSize 8, budget 250000을 가진 Manager 타입의 teamLead 변수를 생성하세요.
id 102, name "Bob Smith", department "Engineering", email "bob.smith@company.com", phone "555-0123", programmingLanguages ["TypeScript", "Python", "Java"], yearsExperience 5를 가진 Developer 타입의 softwareDev 변수를 생성하세요.

Manager 타입의 매개변수를 받아 "[name] manages [teamSize] people with a budget of $[budget]" 형식의 string을 반환하는 getManagerSummary 함수를 생성하세요.

Developer 타입의 매개변수를 받아 "[name] knows [programmingLanguages joined with ', '] ([yearsExperience] years experience)" 형식의 string을 반환하는 getDeveloperSkills 함수를 생성하세요.

다음 출력값들을 각각 별도의 줄에 출력하세요:

teamLead를 인자로 하여 getManagerSummary를 호출하고 그 결과를 출력하세요.
softwareDev를 인자로 하여 getDeveloperSkills를 호출하고 그 결과를 출력하세요.
teamLead의 department를 출력하세요.
softwareDev의 email을 출력하세요.

직접 해보기

// TODO: 여기에 코드를 작성하세요

// Employee 인터페이스 생성

// Employee를 확장하는 Manager 인터페이스 생성

// Contact 타입 별칭 생성

// 교차 타입을 사용하여 Developer 타입 별칭 생성

// Manager 타입의 teamLead 변수 생성

// Developer 타입의 softwareDev 변수 생성

// getManagerSummary 함수 생성

// getDeveloperSkills 함수 생성

// 필요한 출력값 인쇄