타입스크립트 스터디 정리글

좋은 기회로 인해 서울 우먼테크메이커스에서 주관하는 잇츠 스터디 크루 3기에 참여할 수 있게 되었다!!~ㅅ~

여러 학습활동 주제 중 나는 '타입스크립트 톺아보기'라는 주제의 스터디를 신청했다. 온라인으로 진행되는 스터디였고 따로 교재나 사전 준비없이 정해진 주제에 대해 공부하고 팀원들에게 공유하는 방식의 자유도가 높은 스터디였기 때문에 부담감도 적었다. 스터디 리더님이 원하는 조원들의 상도 공감이 됐고, 저런 팀원들과 함께하고 싶은 마음이 들기도 했다.

• 저는 같이 이야기하며 배운다고 생각해요. 그래서 대화에서 회피보다는 문제에 부딪히며 해결하시려고 노력하시는 분이면 좋겠습니다.
• 추가로 왜 이런 방식으로 돌아가는지에 대한 고민과 호기심이 있는 분이면 너무 좋아요.

스터디의 구체적인 진행방식은 이렇다!

1. 8주차까지 정해진 주제에 대한 발표자료 준비

2. 매주 목요일 20:00~22:00시 구글미트 참여

3. 스터디 당일 제비뽑기로 발표자 2명을 랜덤으로 선출 < 이 부분이 참 쫄깃하고 재밌다ㅋㅋ

4. 발표를 진행하거나 경청하며 질문과 의견 공유

 

스터디원으로 선정된 이후, 오리엔테이션을 통해 조원들과 간단한 소개자리를 가지며 친근감을 쌓고, 커피챗을 통해 서로의 성향을 파악하는 시간을 가질 수 있었다. 여성 개발자들로만 꾸려진 조여서 왠지 더 편안했고 각자 경쟁률을 뚫고 선정된 멤버들이라 스터디에 열의가 느껴졌다ㅋㅋ 지금은 진행된지 3주차가 흐른 시점이라 조원들끼리 더욱 돈독해졌으며 토론하면서도 웃음이 끊이질 않아 스터디 하는 날이 기다려지기도 한다.💘 

남은 기간동에도 많은 것을 배워갈 수 있기를 기대하며, 지금까지 정리한 자료를 기록하고자 글을 쓴다!

 

📖 1주차 주제 - 타입스크립트 집합론

타입스크립트의 타입 시스템은 집합 이론과 유사한 개념을 따른다. 타입을 특정 값들의 "집합"으로 이해할 수 있으며, 이를 통해 부분집합(Subset), 합집합(Union), 교집합(Intersection), 여집합(Exclusion) 등의 개념이 집합 연산과 비슷하게 작동한다.

 

부분집합(Subset)

type A = "🍎" | "🍌";
type B = "🍎" | "🍌" | "🫐";

let a:A = ‘🍎’
let b:B = ‘🫐’
let c:B = a ✅ → A는 B의 부분 집합이므로 A타입 변수는 B타입 변수에 할당 가능.

 

합집합(Union) - | 연산자

type Fruit = "🍎" | "🍌";
type Food = "🍕" | "🥘" | "🥟";

type FruitOrFood = Fruit | Food;

let item: FruitOrFood = ‘🥘’;

 

교집합(Intersection) - & 연산자

type Person = { name: string };
type PhoneNumber = { phoneNumber: string };
type PersonInfo = Person & PhoneNumber;

let myInfo: PersonInfo = {
	name: ‘송란이’,
	phoneNumber: ‘010-1234-5678’
}

 

여기서 수학에서 의미하는 교집합으로 접근하면, Person 과 PhoneNumber 타입은 교집합이 없기때문에 PersonInfo는 합집합을 뜻하는 것 아닌가? 라는 의문이 생길 수도 있다.

하지만 타입스크립트에서는 타입을 속성에 대한 집합 아닌 값들의 집합으로 추론하기 때문에 집합론적 의미와는 반대로 교집합의 범위가 넓어지고, 합집합의 의미는 좁아지는 것 처럼 보인다.

Union의 개념 또한 Fruit의 성질을 만족하거나 Food의 성질을 만족하는 값들의 모임을 의미하는 것이기 때문에 두 타입 중 하나라도 만족하는 값이 있다면 Union타입에 만족하는 것이다!

→ 타입체크로 우리가 정의한 타입에 값을 할당 할 수 있냐/없냐를 판단 후 만족하면 통과인 셈.

결과적으로, 집합이란 주어진 성질을 만족시키는 대상들의 모임이기에 타입으로 표현하자면 정의한 타입에 맞는 값들의 모임으로 해석할 수 있다. 집합론은 각 타입을 이해하는데에 도움은 될 수 있지만 간단하게 | 연산자와 & 연산자로 접근해 본다면 ~~이거나 타입, ~~이면서 타입으로 이해하는게 쉬울 것 같다.

---

유틸리티 타입(Utility Types)

타입 스크립트는 타입 변환을 용이하게 하기 위해 몇 가지 유틸리티 타입을 제공한다. 유틸리티 타입은 기존 타입을 바탕으로 새로운 타입을 만들어내는 타입 연산자다. 이 중 집합론과 연관 지을 수 있는 유틸리티 타입 몇가지를 정리해보았다.

 

부분 집합 (Subset)

`Partial<T>` 타입 T의 모든 속성을 선택적(optional)으로 만드는 유틸리티 타입.

type User = {
  username: string;
  nickname: string;
  gender: string;
}

type PartialUser = Partial<User>;

let user1: PartialUser = {username: 'tester'};
let user2: PartialUser = {username: 'tester2', gender: 'F'}

 

updateUser: (params: Partial<User> | null) => void;

첫번째 예시 같은 경우에는 보통 옵셔널 프로퍼티 처리를 해주는게 나을 것 같고, 이미 지정된 타입을 함수의 파라미터로 활용할 때 사용하는게 더 범용적일 것 같다.

 

차집합 (Difference)

`Omit<T, K>` 타입 T에서 속성 K를 제거하는 유틸리티 타입.

type User = {
  username: string;
  nickname: string;
  gender: string;
}

type WithoutNickname = Omit<User, 'nickname'>;

let user1: WithoutNickname = { username: 'tester', gender: 'F' }

export interface AddProductParams extends Omit<EditProductParams, 'id'> {}

아래와 같이 EditForm 타입에서 id를 제거해 AddForm 타입으로 재사용하는 케이스에 유용해보인다.

 

`Exclude<T, U>` T에서 U에 포함된 요소를 제거하는 유틸리티 타입.

type FruitA = 'apple' | 'banana' | 'blueberry';
type FruitB = 'orange' | 'apple' | 'cherry';

type DifferenceFruit = Exclude<FruitA, FruitB>;

let fruit: DifferenceFruit = 'banana'; ✅
let fruit2: DifferenceFruit = 'apple'; ❌

Omit<T, K>은 기준이 되는 타입에서 특정 속성을 제외한 타입을 만들 때 사용하고, Exclude<T, U> 는 기준이 되는 타입에서 다른 타입을 제거한 타입을 만들 때 사용한다는 차이점이 있다.

교집합 (Intersection)

`Pick<T, K>` 타입 T에서 속성 K만 선택해 새로운 타입을 만드는 유틸리티 타입.

type User = {
  username: string;
  nickname: string;
  gender: string;
}

type NameOnly = Pick<User, 'nickname' | 'username'>;

let user1: NameOnly = { username: 'tester', nickname: 'tteesstt' }

 

`Extract<T, U>` T와 U에서 공통된 요소만 남기는 유틸리티 타입.

type FruitA = 'apple' | 'banana' | 'blueberry';
type FruitB = 'orange' | 'apple' | 'cherry';

type IntersectionFruit = Extract<FruitA, FruitB>;

let fruit: IntersectionFruit = 'apple'; ✅
let fruit2: IntersectionFruit = 'orange'; ❌

Pick<T, K> 은 기준이 되는 타입에서 특정 속성만 선택해 새로운 타입을 만들때 유용하게 쓸 수 있고, Extract<T, U> 는 두 타입 사이의 공통된 타입을 생성할 때 사용된다.

 

유틸리티 타입도 집합이론의 개념과 매우 밀접한 관계가 있으며, 잘 활용하면 타입을 보다 정교하고 직관적으로 제어할 수 있는 장점이 있다.

 

 

더 하면 너무 길어질 것 같으니 2~3주차 주제는 링크로 대체하겠다!!!

🔗 https://www.notion.so/1a0e87d2b42580c08efbcbc15a8890fe