[Study] 이펙티브 타입스크립트 스터디

팀프로젝트에 들어가기 앞서서 타입스크립트 공부를 하기위해 이펙티브 타입스크립트 스터디에 참여하게 되었습니다. 스터디 진행방식은 아래와 같이 진행되었습니다.

진행 방식

1. 스터디원은 각자 정해진 시간동안 대략 5~9장의 분량을 학습합니다.
2. 스터디 시작전 Gitbuh issuess에  최소 1문제 이상의 문제를 올립니다. (객관식, 주관식, 단답형 모두 상관없습니다.)
3. 스터디 당일 issuess에 올려진 문제들을 보고 정답과 풀이를 작성합니다.
4. 어려운 문제나 학습하던 도중 이해가 안되는 내용에 대해 토론합니다.

벌칙 : 문제 미제출시 사건의 지평선 열창

스터디 분량 & 날짜

분량	날짜
아이템 1~5장	2023.8.22 6:00PM
아이템 6~15장	2023.8.25 3:00PM
아이템 16~26장	2023.8.29 5:30PM
아이템 27~36장	2023.9.1 5:30PM
아이템 37~52장	2023.9.5 5:30PM
아이템 53~62장	2023.9.8 5:30PM

짧은 시간안에 완독하는것이 목표였기때문에 깊이 있게 학습하지는 못했지만, 문제를 풀면서 타입스크립트의 새로운 개념에 대해 알아갈 수 있었습니다. 짧게 나마 배운것들을 정리해보도록 하겠습니다.

📝 아이템 1~5장

---

구조적 타이핑

자바스크립트는 덕 타이핑 기반입니다.

💡 덕 타이핑이란?

함수의 매개변수 값이 모두 제대로 주어진다면, 그값이 어떻게 만들어졌는지 신경쓰지 않고 사용합니다.

타입스크립트 또한 매개변수 값이 요구사항을 만족한다면 타입이 무엇인지 신경쓰지않습니다.

interface Vector2D {
  x: number;
  y: number;
}
function calculateLength(v: Vector2D){
 return Math.sqrt(v.x * v.x + v.y * v.y); 
}

interface NamedVector {
  name: string;
  x: number;
  y: number;
}
const v: NamedVector = { x: 3, y:4, name: 'zee'}
calculateLength(v); // 정상. 5

NamedVector의 구조가 Vector2D와 호환되기 때문에 calculateLength 호출이 가능합니다.
NamedVector > Vector2D

📝 아이템 6~15장

---

타입

유닛타입 (하나의 값만 포함하는 타입)

type A = 'A'

유니온 타입(합집합)

type AB = 'A' | 'B'

인터섹션(intersection , 교집합) 타입

type AB = 'A' & 'B'

keyof 연산자

keyof 연산자는 타입의 키 값들을 유니온 타입으로 반환해줍니다.

interface Rabbit {
    name: string;
    age: number;
    place: string;
    move: () => void;
  }

  type KeyofRabbit = keyof Rabbit; // name | age | place | move

  const rabbit1: KeyofRabbit = "age"; // ok
  const rabbit2: KeyofRabbit = "food"; // error!