TypeScript Union타입, Intersection(인터섹션) 타입

⭐ Union타입

• 여러 타입중 하나가 될 수 있는 값을 나타내는 방버
• 값에 허용된 타일울 두개 이상으로 지정
  
  

✅ OR 연산자 (A 또는 B...)

• | (vertical bar) 기호를 사용하여 표현
  
  

✅  유니언 타입의 사용

• 변수, 함수의 매개변수, 반환갑 등에서 모두 사용 가능
• 타입의 유연셩을 제공
• 무분별한 any 사용을 방지

 

✅  유니언 타입이 사용 

• type UnionType = Type1 | Type2 | Type3

type VariableType = string | number | boolean | string[]

let value:VariableType = '문자';
value = 123;
value = true;
value = ['안녕', '반가워'];

// value = [112, 333] -Error
// value = {}; - Error

variableType에서 유니언 타입이 정의된다.

4가지 타입으로 정의가되면서 4가지중 하나의 타입과 일치되면 된다.

 

✅ 타입 별칭의 예시

// 관리자 계정 Admin
type Admin = {
  id: string;
  password: string;
}

// 사용자 계정 User
type User = {
  id: string;
  name: string;
}

// 위의 두가지 계정을 가지는 사이트의 계정 타입 
type Person = Admin | User; -union type

type Person = {
id: string;
password?: number;
name?: number;
}

]let  jjm: Person = {
  id: '1234',
  password: 'wldlg'
}

let ljy: Person = {
  id: '1234',
  password: 'wldlg'
}

 

✅ 타입 별칭에서 union 타입 사용 시

• 정확한 타입 지정을 위해 타입 가드를 사용
• 타입 가드 - 조건문을 통해 타입을 좁혀나가는 방식

type Union = number | string;

function getAge(age: Union) {
 if(typeof age === 'number') {
    age = age.toFixed();
    return age;
  } else {
    age = age.toUpperCase();
    return age;
  }
}

console.log(getAge(12.345)); //12
console.log(getAge('12 years old')); // 12

✅ 나이가 입력될 경우 (예시자료에 한한 조건이다.)

• 숫자: 소수점 자리가 없도록 반올림하여 문자열로 반환 (toFixed())
• 문자열: 대문자로 변환하여 반환 (toUpperCase())

- Union 타입의 경우 타입 가드를 지정하지 않을 경우

지정된 모든 타입에 사용할 수 있는 메서드와 속성만 사용 가능

 

⭐ Intersection(인터섹션) 타입

• 여러 타입을 하나로 결합하여 모든 타입의 기능을 갖춘 안일 타입을 생성
• 여러 타입을 모두 만족하는 하나의 타입
• And 연산자 (A 그리고 B)
• & 기호를 사용하여 구현

 

⭐ 인터섹션 타입 사용 방법

• type 타입별칭 = Type1 & Type2 & ...;

type Employee = {
  name: string;
  startData: Date;
}

type Manager = Employee & { group: string};

let managerA: Manager = {
  name: '장지민',
  startData: new Date(),
  group: '개발부서' //추가된 부분
}

type Admin = {
  isAdmin: boolean;
}

type User = {
  id: string;
  password: string;
}

// 관리 사용자 
type AdminUser = Admin & User

function creatAdminUser(user:User): Admin {
  // 스프레드 연산자를 사용하는 새로운 객체 생성
  return {...user, isAdmin: true}
}

let newAdminUser:User = {
  id: 'quel12',
  password: 'dlglrl333!!'
}

let adminUser1 = creatAdminUser(newAdminUser);
console.log(adminUser1);
//{ id: 'quel12', password: 'dlglrl333!!', isAdmin: true }
export const tmp = '';

✅ 인터섹션 타입의 특징

• 타입 결합
• 여러 타입의 속성을 결합하여 새로운 타입을 생성
• 코드의 재사용성 + 복잡한 타입의 조합 가능