[TypeScript] 객체 타입 유니언(|)과 교차 타입(intersection type, &)

[TypeScript] 객체 타입 유니언(|)과 교차 타입(intersection type, &)

 

 

📌 객체 타입 유니언

객체 타입 유니언이란 타입스크립트에서 두 개 이상의 객체 타입을 결합하는 방법이다. 객체 타입 유니언은  |  연산자를 사용하여 표현한다.

✏️ 유추된 객체 타입 유니언

변수에 여러 객체 타입 중 하나가 될 수 있는 초깃값이 주어지는 경우.

const family = Math.random() > 0.3
    ? { name: "june", age: 25 }
    : { name: "me", hobby: "piano" };

family.name; // string
family.age; // number | undefined
family.hobby; // string | undefined

타입스크립트는 해당 타입을 객체 타입 유니언으로 유추한다.

family.age 를 호출한 경우 family 는 실제로 age 를 가지고 있을 수도 있고, 가지고 있지 않을 수도 있다. 따라서 family.age 의 타입은 number 이거나 undefined 일 것이다.

family.hobby 의 경우에도 마찬가지이다.

 

✏️ 명시된 객체 타입 유니언

아래와 같이 유니언 타입의 Family 를 요소 각각 타입을 별도로 지정해주면, 존재하지 않는 객체 멤버에 대한 접근을 제한할 수 있다. 즉, 값이 여러 타입 중 하나일 경우 모든 타입에 존재하지 않는 속성이 객체에 존재한다면 접근할 수 없다.

type Bro = {
    name: string; age: number;
}

type Me = {
    name: string, hobby: string;
}

type Family = Bro | Me;

const family: Family = Math.random() < 0.6
    ? { name: "june", age: 25 }
    : { name: "me", hobby: "piano" };

family.name;
// Ok
family.age; 
// Error : Property 'age' does not exist on type 'family'.
// Property 'age' does not exist on type 'Me'.
family.hobby;
// Error : Property 'hobby' does not exist on type 'family'.
// Property 'hobby' does not exist on type 'Bro'.

하지만 이런 식으로 잠재적으로 존재하지 않는 객체 멤버에 대한 접근 제한을 하면 타입 안정성이 더 좋다.

유니온 타입을 사용해 각 객체 형태를 명확하게 정의했기 때문이다. 또한 코드의 가독성과 유지보수성을 높일 수 있다.

 

✏️ 판별 속성을 사용해 타입 내로잉

판별 속성을 사용해 타입 내로잉을 수행한다.

타입 내로잉은 if 문을 사용하여 변수 타입을 추론하고 좁히는 프로세스를 의미한다.

판별 속성은 객체의 속성을 기반으로 해당 객체의 타입을 판별하는 데 사용된다.

type First = {
    hobby: "piano";
    color: string;
};

type Second = {
    hobby: "cook";
    age: number;
};

 

type Both = First | Second;

type both: Both = Math.random() < 0.5
    ? { hobby: "piano", color: purple }
    : { hobby: "cook", age: 23 }

// 내로잉
if(both.hobby === "piano") {
    console.log(both.hobby); // Ok
} else {
    console.log(both.age)
}

both.hobby; // 타입: "piano" | "cook"

both.color;
// Error: Property "color" does not exist on type both.
// Property "color" does not exist on the type "Second".

both.hobby 속성을 사용하여 hobby의 타입을 판별하고, 해당 hobby 에 맞는 속성에 접근할 수 있다.

 

이러한 타입 내로잉은 코드 안에서 타입 안전성을 높이고, 잠재적인 오류를 방지하는 데 도움을 준다.

 

📌 교차 타입

교차 타입( & , intersection type)은 여러 타입을 동시에 나타낸다. 일반적으로 여러 기존 객체 타입을 별칭 객체 타입으로 결합해 새로운 타입을 생성한다.

type Kind = {
    age: number;
    name: string;
};

type Good = {
    hobby: string;
    name: string;
};

type KindAndGood = Kind & Good;

// 다음과 같음:
// {
//    age: number;
//    name: string;
//    hobby: string;
// }

 

교차 타입은 유니언과 타입을 결합해서 사용할 수도 있다.

type EmployeePerson = { name: string } & (
    | { position: string; companyId: "ABC123"; }
    | { meter: number; companyId: "DEF456"; }
);

// Ok
const employeePerson: EmployeePerson = {
    name: "ramin",
    position: "front";
    companyId: "ABC123";
};

const oneArt: EmployeePerson = {
    // Error
    name: "ramin",
    companyId: "ABC123";
};

EmployeePerson 타입은 name 속성을 가져야하며, 교차 타입을 통해 position과 companyId 속성 또는 meter와 companyId 속성을 가질 수 있다.

이는 position과 companyId 속성을 가진 첫 번째 유니온 타입 또는 meter와 companyId 속성을 가진 두 번째 유니온 타입 중 하나를 선택할 수 있음을 의미한다.

 

📌 never 타입

never 타입은 타입스크립트에서 사용되는 특별한 타입 중 하나이다. never 타입은 절대로 발생하지 않는 값의 타입을 나타낸다. 즉, never 타입은 어떤 값도 가질 수 없고, 어떤 타입과도 호환되지 않는다.

대부분의 타입스크립트에서는 never 타입을 거의 사용하지 않는다.

 

원시 타입 값은 동시에 여러 타입이 될 수 없기 때문에 타입의 구성 요소로 함께 결합할 수 없다.

type family = string & number; // 타입: never​

 

 

---

참고 : 러닝 타입스크립트를 읽고, chat GPT 의 도움을 받아 학습한 내용을 간단하게 정리한 내용입니다.
잘못된 부분이나 문제되는 점이 있으면 댓글 부탁드립니다.