타입스크립트 기본 문법

프로젝트 중에 타입스크립트를 공부한 이유

• 타입스크립트의 기본을 확실히 다지고 프로젝트에 임하면 공부 한 것과 안한것의 차이는 꽤 난다고 생각이 들었다.

• 기존에 부트캠프에서 들었던 내용은 턱없이 부족하여 프로젝트 구현 중에 타입스크립트에서 해맬 것 같다는 생각.

배열과 튜플

• 배열타입생성: 타입[]
  예시: cart.push('c001');

• 배열의배열생성: 타입[][] = [
  ['사과','바나나'],['포도']
  ];

• 튜플: 배열안에 2가지 이상의 타입 존재
  예시: let MyFruit: [number,number,string] = [30, 25, '애플'];

객체 타입

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

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

프로퍼티 개수 정하지않고 타입 정하기

let stock: {[id: string]:number} = {
c001: 3,
c002: 0,
c003: 2,
}

any 타입

any: 타입을 정하지 않고 자바스크립트상태로 되돌리는 것, 되도록이면 any는 사용하지 말고 어쩔수 없이
any를 사용해야할 경우 as 키워드를 사용하여 타입을 지정 하거나 콜론으로 타입을 지정해야한다.

const parsedProjuct = JSON.parse('{"name":"과일 세트","price":12000}') as {name: string; price: number};

const parsedProduct: {name:string, price:number} = JSON.parse('{"name":"과일세트", "price":12000}');

함수 타입

- 리턴타입을 지정하는 경우

function addToCart(id: string, quanity: number): boolean {
  if (true) {
    return false;
  }
  return true;
}

- 리턴 값으로 추론하도록 유도

function addToCart(id: string. quanity: number){
	if(어떤 조건) {
    return false;
    }
    return true;
}

함수를 값으로 사용하는 경우

(id: string, quanity: number) => boolean