<aside> 💡 목차

</aside>

1. 유니온 타입

• 여러 타입 중 하나가 될 수 있는 값을 의미

function unionGeneric<T extends string | number>(value: T) {
  if (typeof value === 'string') {
    return value.toLowerCase();
  }
  return value; // string | number
}

const result1 = unionGeneric('STring');
const result2 = unionGeneric(1000);
console.log(result1, result2); // string 1000

2. 제네릭 유틸리티 타입

• 타입스크립트에 내장된 일련의 제네릭 타입
• 기존 타입을 변환하거나 조작하는데 사용

2-1) Partial: 모든 속성을 선택적으로 만들어줌

• 형태: Partial<T>

interface User {
  name: string;
  age: number;
}

• 사용자 데이터 예시 사용자의 초기 데이터 지정 | 사용자 데이터 입력(생성)

const users: { [key: number]: User } = {
  1: { name: '테드', age: 30 },
  2: { name: '챨리', age: 29 },
};

• 위의 사용자 데이터를 업데이트하는 함수 구현 사용자의 id(key)값을 사용하여 name 또는 age의 값을 업데이트(수정)

function updateUser(id: number, changes: Partial<User>) {
  const user = users[id]; // User 타입의 객체

  if (!user) {
    console.log(`User with id ${id} not found`);
  }
  //   변경 사항 적용
  //   : 스프레드 연산자를 사용하여 해당 유저의 전체 데이터를 불러와
  //   : changes 객체에 담긴 속성의 값을 새로고침(업데이트)
  //   - 객체의 경우 키의 값이 중복되는 경우 뒤의 속성값으로 업데이트
  users[id] = { ...user, ...changes };
}

updateUser(1, { name: 'TED' });
updateUser(2, { age: 34 });
updateUser(3, { name: 'Micheal', age: 55 }); // User with id 3 not found
console.log(users[1]); // { name: 'TED', age: 30 }
console.log(users[2]); // { name: '챨리', age: 34 }
console.log(users[3]); // { name: 'Micheal', age: 55 }
// 없던 인덱스에 정보를 넣어서 새로운 객체가 생성 되었음
users[4] = { name: '안녕', age: 5 };
console.log(users[4]);

2-2) Readonly: 모든 속성을 읽기 전용 속성을 변경

• 형태: Readonly<T>