typescript 다른 타입들

• enum 은 typescript에서만 사용하는 문법 
  => (열거형)값의 종류를 나열할 수 있는 경우에 사용할 수 있는 타입

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

console.log(Size.S)

 

값으로 사용할 때는 객체처럼 점 표기법 사용 / 되도록이면 값을 정해놓고 사용하는게 좋다. 

 

• interface
  => 똑같은 타입을 여러번 지정하고 싶지 않을 때 

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

const hat: Product = {
// interface product를 지정

  id: 'a2202',
  name: '알록달록 모자',
  price: 8500,
  membersOnly: true,
};

function printProduct(product : Product) { // 함수에도 지정 가능
  console.log(`${product.name}의 가격은 ${product.price}원입니다.`)
}

//interface 이름 product

 

interface 의 이름은 보통 대문자로 시작

변수 뒤에 콜론을 사용하고 interface를 적어주면 interface형태에 해당하는 객체 타입을 지정 

 

• interface의 상속기능

interface HatproducT extends Product {
  sizes: Size[]  
}

// Product를 상속받아서 HatproducT를 만들어줌
//sizes라는 속성을 추가해줌

const hat2: HatproducT = {
  id: 'a2202',
  name: '알록달록 모자',
  price: 8500,
  membersOnly: true,
  sizes: [Size.S, Size.M, Size.L, Size.XL]
};

//HatproducT를 사용하여 hat2를 만들어줌

interface ClothingProduct extends Product {
  sizes: ClothingSize[];
  color: string;
}

interface ShoeProduct extends Product {
  sizes: number[];
  handmade: boolean;
}

// 다른 interface도 추가해서 활용할 수 있음

 

 

• interface의 함수 적용

interface PrintProductFunction {
  (product: Product): void;
}
//파라미터의 타입과 함수의 리턴타입을 지정해줌

const printProduct: PrintProductFunction = (product) => {
  console.log(`${product.name}의 가격은 ${product.price}원입니다.`);
}

//PrintProductFunction을 사용하여 printProduct를 만들어줌

 

 

리터럴 타입

 

• 값을 타입으로 지정하는 것 
• 타입별칭
  - 타입도 변수처럼 이름을 붙여줄 수 있는 것 

const cart: string[] = [
  'c001',
  'c001',
  'c002',
];

interface User {
  username: string;
  email: string;
  cart: string[];
}

const user: User = {
  username: 'codeit',
  email: 'typescript@codeit.kr',
  cart,
}

 

 

똑같은 타입을 여러번, 따로따 적어주는 것이 번거로울 때 타입 별칭으로 타입의 이름을 붙여주면 관리하기 편하다. 

 

 

type Cart = string[];
// Cart라는 타입 별칭을 정의하고, 문자열 배열 타입을 할당
//interface 처럼 여러군데에서 사용 가능 

type CartResult = (result:boolean) => void;

//함수 타입을 할당할 수도 있음

type product = {
  id : string;
  name : string;
}

//객체 타입을 할당할 수도 있음
//근데 객체타입에는 인터페이스를 쓰는게 더 좋음

const cart1: Cart = [
  'c001',
  'c001',
  'c002',
];

interface User1 {
  username: string;
  email: string;
  cart1: Cart;
}

const user1: User1 = {
  username: 'codeit',
  email: 'typescript@codeit.kr',
  cart1,
}
// Cart 의 타입을 바꾸면 Cart를 사용하는 모든 곳에서 오류가 나서 수정하기 쉬움

 

 

유니온타입

 

• | 연산자를 이용하여 타입을 여러개 연걸하는 방식

interface ClothingProduct extends Product {
  sizes: ClothingSize[];
  color: string;
}

interface ShoeProduct extends Product {
  sizes: number[];
  handmade: boolean;
}

function printSizes(product: ClothingProduct | ShoeProduct) {
  const availableSizes = product.sizes.join(', ');
  console.log(`구매 가능한 사이즈는 다음과 같습니다: ${availableSizes}`);
}

//ClothingProduct 타입과 ShoeProduct을 모두 고려하기 때문에 공통된 프로퍼티만 참조할 수 있다.(size)

 

특정한 타입을 다루고 싶으면 if와 in을 사용 

function printSizes(product: ClothingProduct|ShoeProduct) {
  const availableSizes = product.sizes.join(', ');
  console.log(`구매 가능한 사이즈는 다음과 같습니다: ${availableSizes}`);

  if('color' in product) {
    console.log(${product.color}입니다.`);
  }
}

 

유니온 타입은 리터럴 타입이랑 같이 사용하면 유용하다. 

type ShoesSize = 250 | 260 | 270 | 280 | 290;
// 타입 별칭이랑 리터럴 타입/ 유니온 타입 지정

interface ShoeProduct extends Product {
  sizes: ShoesSize[]
  handmade: boolean;
}