12. TS(타입스크립트) 기본 문법 및 타입 정리

TS에서는 변수의 타입을 지정해줘야 한다!

JS에서는 아무렇게나 선언하고 초기화하고 바꿔도 상관없지만,
TS에서는 그러면 맴매 맞는다!

 

타입지정 : 기본 자료형들

String, Number, Boolean, Undefined, Null
-> 여기서 뒤에 []를 붙여 배열, [number, string] 등을 붙여 튜플 자료형을 지정할 수 있음.

 

타입 지정 : 객체

let product: {
  id: string;
  price: number;
  membersOnly?: boolean; // 필수가 아닌 프로퍼티
  sizes: string[];
} = {
  id: 'c001',
  price: 129000,
  sizes: ['M', 'L', 'XL'],
};

if (product.membersOnly) {
  console.log('회원 전용 상품');
} else {
  console.log('일반 상품');
}

좀 복잡하다. 이후에 인터페이스, 타입 등을 사용하지만 일단 기본형을 기억.

let 객체명: {키:타입} = {키:밸류}; 구조

 

타입 지정 : 함수

function 함수명(id: string, quanity: number): boolean {
    if (조건) {
     return false;
  }

  return true;
}

다음과 같이 함수를 선언함. function 함수명(파라미터: 자료형): 리턴자료형 { 함수 }

이 때 리턴 자료형은 생략해도 자동 추론 가능!

화살표 함수를 사용할 경우, let 변수 = (파라미터:자료형) => 리턴자료형; 과 같이 작성한다.

파라미터로 Rest 파라미터가 올 경우 자료형을 배열 타입으로 작성!

 

 

Enum

흔히 아는 enum과 동일합니다!!!!

enum Size {
  S,
  M,
  L,
  XL,
}
console.log(Size.S); // 0
console.log(Size.M); // 1

숫자 0은 헷갈리기 딱이기 때문에 그냥 값을 지정해주는게 제일 좋습니다.

enum Size {
  S = 'S',
  M = 'M',
  L = 'L',
  XL = 'XL',
}

요로코롬!

 

인터페이스

 

가장 많이 사용될 것 같은데, 객체 타입처럼 만들면 됨!

interface Product { // 프로덕트 인터페이스
  id: string;
  price: number;
  membersOnly?: boolean;
}

interface ClothingProduct extends Product { // 상속받아서 사이즈만 추가
  sizes: Size[];
}

const product2: Product = {
  id: 'd001',
  price: 25000,
};

const product1: ClothingProduct = {
  id: 'c001',
  price: 129000,
  membersOnly: true,
  sizes: [Size.M, Size.L],
};

상속은 interface 이름 뒤에 extends 쓰고 부모 인터페이스 명을 적어두면 됨! 알지??

 

타입 별칭

 

type 별칭은 타입에 이름을 붙이는 문법이다 -> 복잡한 타입을 재사용할 때 활용 가능

type Point = [number, number];
type SearchQuery = string | string[];
type Result = SuccessResult | FailedResult;
type Coupon = 
  | PromotionCoupon
  | EmployeeCoupon
  | WelcomCoupon
  | RewardCoupon
  ;

위 예시를 참고할 것!

 

keyof, typeof

 

interface Product {
  id: string;
  price: number;
  membersOnly?: boolean;
}

type ProductProperty = keyof Product; // 'id' | 'price' | 'membersOnly';

keyof : 객체 타입에서 프로퍼티 이름을 모아서 타입으로 만듦.

유사하게 typeof는 객체의 타입을 갖고있음.

 

제네릭

 

제네릭은 변할 수 있는 타입을 명시할 때 사용한다.

function sum<T>(x: T, y: T): T {
   return x + y;
}

sum<number>(1, 2); // 3
sum<string>('asd', 'ef'); // 'asdef'

제네릭은 <T>와 같은 방법으로 지정 -> T가 이제 변하는 것을 의미하는데, T,V와 같이 문자 하나로 쓰는것이 기본!

제네릭 타입의 함수를 호출 할 때 이제 타입을 지정해주면, T부분이 변하게 됨.

 

제네릭 : Map, Set

 

const productMap = new Map<string, Product>();
productMap.set(product1.id, product1);
productMap.set(product2.id, product2);

map은 키와 밸류를 갖는 자료구조임. 위와 같이 타입을 정의하고 사용함.

const productSet = new Set<Product>();
productSet.add(product1);
productSet.add(product2);

set은 배열이지만, 중복 불가능한 집합 같은 것.

 

객체에서 사용하는 타입들

 

const productMap: Record<string, Product> = {}
productMap['c001'] = product1;
productMap['c002'] = product2;

Record 타입은 객체를 일단 선언하는데, 키와 밸류 타입을 정해놓을 때 사용!

type ProductInfo = Pick<Product, 'name' | 'price'>;

Pick 타입은 기존 객체에서 뽑아서 새로운 타입을 만듦.

type ProductInfo = Omit<Product, 'id' | 'membersOnly'>;

Omit 타입은 기존 객체에서 뽑은 것을 뺀 나머지로 새로운 타입을 만듦.

 

함수에서 사용하는 타입들

 

type AddToCartParameters = Parameters<typeof addToCart>;
type AddToCartResult = ReturnType<typeof addToCart>;

 

Parameters를 통해 이미 선언된 함수 파라미터들의 타입을 가지고 새 함수 파라미터들의 타입을 정의할 수 있음.

ReturnType을 통해 리턴 타입을 가져옴!

 

또 막상 리액트에서 얼마나 쓰는진 아직 알 수 없지만,

이런식으로 가져옵니다. 일단 기억해가야 할 핵심은 인터페이스!