모호하게 알고있던 타입스크립트 문법 짚고 넘어가기

1. 유니온, 교차 타입

- 실제 사용할 때는 안 햇갈리는데 개념이 가끔 햇갈릴 때가 있음

 

- Card | Account

- 유니온 : 교집합을 생각하면 됨! 두개 이상의 타입이 공통으로 가지고 있는 속성을 타입으로 정함

interface Card {
 name: string
 id: string
 pay(): void
}

interface Account {
 name: string
 id: string
 transfer(): void
}

// Card와 Account가 모두 가지고 있는 교집합 속성 name, id 속성이 있으면 파라미터 타입 허용한다.
// (두 타입을 모두 허용한다는 의미가 되어 합집합이 아닌가? 라는 생각이 들어 햇갈릴 수 있음)
const doSomething = (payment: Card | Account) => {
  console.log(payment)
  
  // payment는 Card 타입일 수도, Account 타입일 수도 있다.
  if(payment.pay !== undefined)
    payment.pay()
  else
    payment.transfer()
}

 

- Card & Account

-  교차타입 : 합집합을 생각하면 됨! 두개 이상의 타입이 가지고 있는 모든 속성을 타입으로 정함

const AccountCard: Card & Account = {
  name: "test",
  id: "123",
  pay: () => {},
  transfer: () => {},
}

 

 

3. 객체 지향에 사용하는 클래스 관련 문법들

- 객체 지향 언어에서 기본적으로 사용하는 형태들이지만, js를 쓰다가 넘어온 경우 잊고 사는 경우가 있음!

 

- 변수 접근 관련 

  - public : 자식 클래스에서 사용 가능, 인스턴스에서 직접 접근 가능

  - private : 자식 클래스에서 사용 불가능, 인스턴스에서 직접 접근 불가능, private 대신 '#' 으로도 표현 가능 

  - protected: 자식 클래스에서 사용 가능, 인스턴스에서 직접 접근 불가능

  - static : 인스턴스나 this가 아닌 class로 접근이 가능, 인스턴스를 생성하지 않아도 사용 가능

 

- abstract 클래스 : 객체를 생성하기 위한 목적이 아닌, 상속을 해서 사용할 베이스가 되는 껍데기, 틀을 정의한 클래스. 

  - * abstract클래스와 interface와의 차이 : interface는 메서드 정의 시 추상 메서드만 정의 가능하고(실제 로직은 구현 못하고 파라미터, 리턴 타입에 대한 정의만 가능), abstract 클래스에서는 메서드의 실제 구현도 가능하다.

 

 

4. 제네릭

- 자료형을 정하지 않고 여러 타입을 사용할 때 사용한다. 데이터의 타입을 generalize(일반화)되었다는 의미를 지니고 있다.

- 제네릭을 사용하게 되면, 따로 불필요한 타입변환이 발생하는 것을 방지해 프로그램 성능을 향상하는 장점이 있을 수 있다.

- * any를 쓰면 되지 않는가? : 자료의 타입을 아예 제한하지 않는 any와는 결이 다르다. 'any[]' 라고 사용할 수 없지만, 제네릭인 T는 세부 타입 지정이 가능하다. 예) '<T extends Lengthwise>', 'T[]'

 

const identify = <T>(arg: T):T => {
  console.log(arg)
  return arg
}

const identify = <T>(arg: T[]):T[] => {
  console.log(arg.length)
  return arg
}

const identify = <T>(arg: T extends Lengthwise):T[] => {
  console.log(arg.length)
  return arg
}

// T, U, V... 식으로 T이후 알파벳을 제네릭으로 사용할 수 있음
const useMultipleGeneric = <T, U>(v:T, u: U[]): [T,U] => {
  console.log(v)
  console.log(u.length)
  return [v, u]
}

// 3항 연산자 사용 예시
interface Board<T> {
  //Board의 타입이 Post를 상속받은 경우 getItem의 반환 타입은 Post, 아닌 경우 Comment
  getItem(): T extends Post ? Post : Comment
}

 

 

 

 

5.  enum

- 여러 값들을 열거형으로 미리 정의해두고 사용하는 타입

- 상수를 분야 별로 자료형을 통일하여 정의할 때 사용하면 좋다

- * object로 상수 정의해서 사용하는 것과 무슨 차이가 있을까? : object의 경우 각종 자료형을 모두 정의할 수 있지만, enum은 숫자는 숫자끼리, 문자는 문자 끼리만 속성을 가질 수 있다.

enum Auth {
  admin = 0, // 관리자
  user = 1,  // 회원
  guest = 2  // 게스트
}

// enum은 기본으로 0부터 1씩 증가하는 값을 갖는다.
enum Auth {
  admin, // 0 : 별도로 값을 지정해주지 않으면 0부터 시작한다
  user,  // 1 : 이전 값에 1씩 더해진다.
  guest  // 2 : 이전 값에 1씩 더해진다.
}

enum Language {
  koream = 'ko',
  english = 'en',
  japanese = 'jp'
  //chinese = 3 // 노노 enum에서는 사용 불가능
}

const Test = {
  id: 123,
  name: 'test'
}