인터섹션 타입 ('&')

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

유니언 타입을 사용하면 여러 타입 중 하나가 될 수 있는 변수를 만들 수 있지만, 교차 타입은 반대 방향으로 작동합니다. 교차 타입은 여러 타입을 하나의 타입으로 결합하며, 결합된 타입의 모든 속성을 갖습니다.

교차 타입은 앰퍼샌드(&) 연산자를 사용하여 여러 타입을 하나로 결합합니다. 두 객체 타입을 교차하면 결과에는 두 타입의 모든 속성이 포함됩니다:

type HasName = { name: string };
type HasAge = { age: number };

type Person = HasName & HasAge;

// Person은 이제 name과 age 속성을 모두 가집니다
let user: Person = {
  name: "Alice",
  age: 30
};

이는 더 작고 재사용 가능한 구성 요소로 복잡한 타입을 만들고 싶을 때 특히 유용합니다. 하나의 큰 객체 타입을 정의하는 대신, 특정 관심사를 위한 집중된 타입을 만든 다음 필요에 따라 이를 결합할 수 있습니다.

intersection 타입은 결과 type이 교집합에 포함된 모든 type의 모든 요구 사항을 충족하도록 보장합니다. variable에는 intersection의 각 type에 속한 모든 properties가 있어야 하며, 유니온처럼 원하는 것만 골라 선택할 수는 없습니다.

챌린지

쉬움

HasName이라는 두 번째 타입 별칭을 만드세요. 이는 string 타입의 name 속성을 가진 객체를 나타냅니다. 또한 number 타입의 age 속성을 가진 객체를 나타내는 HasAge 타입 별칭을 만드세요.

& 연산자를 사용하여 HasName과 HasAge의 교집합으로 Person이라는 세 번째 타입 별칭을 만드세요.

string 타입의 email 속성을 가진 객체를 나타내는 HasEmail이라는 또 다른 타입 별칭을 만드세요.

HasName, HasAge, HasEmail 세 타입 모두의 교집합으로 Employee라는 네 번째 타입 별칭을 만드세요.

이제 다음 변수를 만드세요.

이름이 user인 Person 타입의 변수를 만들고, 이름은 "Alice", 나이는 25로 설정하세요.
이름이 worker인 Employee 타입의 변수를 만들고, 이름은 "Bob", 나이는 30, 이메일은 "bob@company.com"으로 설정하세요.

Person 타입의 매개변수를 받고 "Name: [name], Age: [age]" 형식의 문자열을 반환하는 displayPerson 함수를 만드세요.

Employee 타입의 매개변수를 받고 "Name: [name], Age: [age], Email: [email]" 형식의 문자열을 반환하는 또 다른 함수 displayEmployee를 만드세요.

적절한 변수와 함께 두 함수를 호출하고 결과를 별도의 줄에 출력하세요.

직접 해보기

// TODO: 여기에 코드를 작성하세요
// HasName, HasAge, HasEmail에 대한 타입 별칭 생성
// 교집합을 사용하여 Person 및 Employee 타입 생성
// user 및 worker 변수 생성
// displayPerson 및 displayEmployee 함수 생성
// 함수를 호출하고 결과 출력