2024.03.04 TIL - Typescript 강의 정리

Typescript 강의 정리

기본 타입 훑어보기

(3-2강)

1. boolean - 참, 거짓 (true, false)

• 조건문, 비교 연산 등에서 주로 사용
• 2가지의 상태를 표현하고 싶을 때 사용
  (3가지 이상의 상태는 enum, string을 사용)

2. number

• typescript에서는 정수, 실수, n진수 등 까지 전부를 number라고 통칭함

3. string

• 백틱(백쿼트 back quote)도 문자열에 포함됨
  (템플릿 리터럴)
• 텍스트를 조작하거나 출력할 때
  (텍스트와 텍스트를 합칠 때 등)

4. 배열

5. 튜플(tuple)

• 서로 다른 타입의 원소를 순서에 맞게 가질 수 있는 특수한 형태의 배열
• string[ ], number [ ] 처럼 같은 타입의 원소만 가질 수 있음

const person: [string, number, boolean] = ['Spartan', 25, false];

6. enum

• 열거형 데이터 타입
• 다양한 상수를 보다 더 이해하기 쉬운 문자열 이름으로 접근하고 사용할 수 있게 하는 타입
• 값이 설정되어 있지 않으면 0부터 시작
• number, string 값만 할당 가능

readonly

(3-4강)

• js X, ts에서 등장한 키워드
• 객체의 속성을 불변으로 만드는 데 사용됨!
• 일반 변수의 상수화는 const, 객체 속성의 상수화는 readonly

any, unknown, union

(3-5강)

• 어쩔 수 없이 가변적인 데이터를 저장해야할 때
  -> any보다 unknown 사용하기!
• 가변적 타입 일일이 정의할 수 있다면 union 타입!

1. any 타입

• 모든 타입의 슈퍼 타입!
• 어떤 타입의 값이든 저장할 수 있음
• 가급적 사용하지 말 것

2. unknown 타입

• any보다는 안전함
• unknown 타입의 변수를 다른 곳에서 사용하려면 타입 단언(Type Assertion)을 통해 타입 보장을 해서 사용할 수 있음

stringValue = unknownValue as string;

• 타입 단언 말고는 -> typeof로 타입체크 한 후 unknown 변수에 변수 할당
• 타입 재할당이 되지 않는 이상 타입 안전성이 보장되지 않음!

3. union 타입

• |를 사용하여 여러 타입을 결합하여 표현함

type StringOrNumber = string | number; //(여기에 | boolean 이런식으로 추가 가능)

enum, object literal

(4-1강)

1. enum

• 간단한 상수값에 적합 (간단한 상수 값을 그룹화해서 관리할 때)
• 열거형 데이터 타입
• 상수의 그룹화에 좋음

2. object literal

• 복잡한 구조, 다양한 데이터 타입이 필요한 경우 적합
• 멤버의 값이나 데이터 타입을 맘대로 변경할 수 있음!

유틸리티 타입

(4-2강)

1. Partial < T >

• 기존 타입의 일부 속성만 제공하는 객체 생성

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

const updatePerson = (person: Person, fields: Partial<Person>): Person => {
  return { ...person, ...fields };
};

const person: Person = { name: "Spartan", age: 30 };
const changedPerson = updatePerson(person, { age: 31 });

2. Required < T >

• 모든 속성의 타입이 필수!

3. Readonly < T >

• 객체를 상수화! 완전 불변 객체로 취급할 수 있음

<4-3강>
4. Pick < T, K >

• 타입 T에서 K 속성들만 선택해서 새로운 타입 만듦

5. Omit < T, K >

• Pick의 반대
• 타입 T에서 K 속성들만 빼고! 나머지를 가지고 새로운 타입 만듦

객체 지향 프로그래밍

(5-1강)

1. class

• 붕어빵 틀 : 클래스

• 각각 붕어빵 : 객체

• 클래스 : 객체 지향 프로그래밍의 핵심 요소 중 하나

• 객체를 만들기 위한 틀!(template)

• 같은 종류의 객체들이 공통으로 가지는 속성(attribute), 메서드(method)

• 속성 : 객체의 성질을 결정함 (팥, 슈크림, ...)

• 메서드 : 객체의 성질 변화, 객체에서 제공하는 기능들 사용

• 객체 : 클래스 기반으로 생성, 클래스의 인스턴스(instance)라고 하기도 함

2. class 정의하기

• constructor : 생성자 (클래스의 instance를 생성하고 초기화할때 최초로 불리는 메서드) - 객체를 만드는 그 시점에만 불리는 특별한 함수!

3. 클래스 접근 제한자

• public : 클래스 외부에서도 접근 가능한 접근 제한자(생략 가능)
• private : 클래스 내부에서만 접근 가능(보통 클래스의 속성을 private으로)
• protected : 클래스 내부, 클래스를 상속받은 자식 클래스에서만 접근 가능

4. 추상 클래스
   (5-4강)

• instance화 할 수 없는 클래스
• 상속을 통해 자식 클래스에서 메서드를 제각각 구현도록 강제하는 용도

객체지향 설계 원칙 - S.O.L.I.D

1. S(SRP. 단일 책임 원칙) ⭐️⭐️

• 클래스는 하나의 책임만!
• 가장 기본되는 원칙

2. O(OCP. 개방 폐쇄 원칙) - 인터페이스, 상속을 잘 쓰자

3. L(LSP. 리스코프 치환 원칙)

• 서브타입은 기반이 되는 슈퍼타입을 대체할 수 있어야 한다

4. I(ISP. 인터페이스 분리 원칙)

• 해당 클래스에게 무의미한 메소드 구현을 막자!
• 클래스는 자신이 사용하지 않는 인터페이스의 영향을 받지 않아야 함

5. D(DIP. 의존성 역전 원칙)

• 하위 수준 모듈(구현 클래스)보다 상위 수준 모듈(인터페이스)에 의존해야 함

---

3/4 베이직반 강의

RTK를 대신할 수 있는 전역상태관리 라이브러리!

(RTK, Jquery의 잔재를 뿌리칠순 없지만...!ㅋㅋ)
RTK > Zustand > Jotai (Recoil과 비등비등)
Recoil-토스에서 씀, 한글문서, 리액트 개발팀에서 만듦
Zustand가 확 치고 올라오고있는 추세-!!
(RTK이랑 Zustand만 알아도 반은 먹고 들어가겠군)

Zustand

• Redux처럼 flux아키텍쳐로 동작
  -> 쉬운 방식으로 간소화함

• Redux에서 사용하던 개발자도구(ex. devtools) zustand에서도 사용 가능

• Provider 없어도 됨

Recoil

• 한글문서 (공식문서 짧음)

• 마지막 업데이트가 6개월전..?

• useState와 유사

• Provider 있어야함 (RecoilRoot)