TypeScript를 사용하는 이유

런타임 오류: 프로그램 실행 도중에 발생하는 오류

• 자바스크립트에서 많이 발생함
• 컴파일 언어가 아닌 인터프리터 언어이기 때문
  • 컴파일 언어: 소스 코드를 기계어로 바꿔 놓고 실행하는 언어
  • 인터프리터 언어: 소스 코드를 한 줄씩 읽어서 실행하는 언어
• 동적 타이핑 언어이기 때문
  • 변수의 자료형을 자유롭게 바꿔서 사용 가능
  • 개발자가 마음대로 편하게 변수를 쓸 수 있음
  • 실수하기 쉽고, 실수를 발견하기 어려움

TypeScript

• 기존 자바스크립트 코드에 문법을 추가해서 사용하는 언어(슈퍼셋)
• 정적 타이핑을 지원
• 실제로 배포하기 전에 타입 체크
• VS Code 값은 에디터를 활용하기 좋음

---

TypeScript 시작하기

TypeScript 프로젝트 만들기

1. 프로젝트 폴더 만들기
2. npm init
3. 계속 엔터 치기
4. npm install --save-dev typescript
   
   
5. npx tsc --init
   • npx: 노드 모듈 실행 명령어
   • tsc: 타입스크립트에서 제공하는 typescript compiler 라는 모듈
     타입스트립트 코드를 자바스크립트로 바꿔주는 역할을 함
   • init: 초기 설정 파일 생성
6. package.json 파일에서 build라는 명령어로 타입스크립트 컴파일러를 실행한다는 문장을 쓰기
   
7. npm run build를 통해 실행하면 js 파일에 "use strict"가 생김
   • 좀더 엄격한 규칙으로 자바스크립트를 사용하고 싶을 때 사용함
8. 자바스크립트 파일은 node js로 실행할 수 있음node main.js
   

TypeScript가 실행되는 과정

• TSC: 타입스크립트 컴파일러
  • 타입스크립트 코드를 자바스크립트 코드로 트랜스파일 해 주는 프로그램

타입을 정하는 법

• let size = 100;
• let size: number = 100;
• 타입은 타입을 검사하는 데만 쓰이고 실제 코드 실행에는 영향을 주지 않음

기본형

let itemName: string = '코드잇 블랙 후드';
let itemPrice: number = 129000;
let num = 2/0; // Infinity
let num2 = 0/0; //NaN
let membersOnly: boolean = true;
let owner: undefined= undefined;
let seller: null = null;

배열과 튜플

• 배열 타입을 만들려면 타입을 적고 []를 붙임
• 배열의 배열을 만들고 싶다면 배열 타입 뒤에 []를 붙이면 됨
• 튜플은 개수랑 순서가 정해져 있는 배열로 [] 안에 순서대로 타입을 쉼표로 구분해서 씀

// 배열
const cart: string[] = [];
cart.push('c001');
cart.push('c002');

// 배열의 배열
const carts: string[][] = [
  ['c001', 'c002'],
  ['c003'],
];

// 튜플
let mySize: [number, number, string] = [175, 30, 'L'];

객체 타입

• {} 안에다가 프로퍼티 이름을 쓰고 콜론 다음에 타입을 씀
• 각 프로퍼티는 세미콜론으로 구분함
• 옵셔널 프로퍼티: 필수가 아닌 프로퍼티는 프로퍼티 이름 뒤에 물음표를 붙임
• VS code의 ctrl+i 활용하기

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: 1,
}

any

• 자바스크립트에서 쓰는 것처럼 타입 오류에서 자유롭게 쓸 수 있음
• 타입을 알 수 없는 경우에 사용함
• 되도록이면 any 타입으로 지정하지 않는 것을 권장함
• 어쩔 수 없이 any 타입을 사용하는 경우 as 키워드를 써서 타입을 지정하거나, 콜론으로 타입을 지정할 수 있음

const product: any = {
  id: 'c001',
  name: '코드잇 블랙 후디',
  price: 129000,
  sizes: ['M', 'L', 'XL'],
};

const parsedProduct: {
  name: string;
  price: number;
} = JSON.parse(
  '{"name": "코드잇 토트백", "price: 12000 }'
  );

const parsedProduct = JSON.parse(
  '{"name": "코드잇 토트백", "price: 12000 }'
  ) as {
  name: string;
  price: number;
} ;

함수에 타입 정의하기

• 리턴 타입을 지정하는 경우에는 다음 코드처럼 작성하면 됨

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

  return true;
}

• 리턴 타입을 미리 주지 않고 리턴 값으로부터 추론하게 할 수도 있음

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

  return true;
}

• 함수를 값으로 사용하는 경우 화살표 함수처럼 작성함

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

• Rest 파라미터는 배열 타입으로 씀
• 값을 리턴하지 않는 경우 리턴 타입을 void로 할 수 있음

(...ids: string[]) => void;

const stock: { [id: string]: number } = {
  c001: 3,
  c002: 1,
};
const cart: string[] = [];

function addToCart(id:string, quantity: number = 1): boolean {
  if (stock[id] < quantity) {
    return false;
  }

  stock[id] -= quantity;
  for (let i = 0; i < quantity; i++) {
    cart.push(id);
  }

  return true;
}

console.log(stock, cart);
const result1 = addToCart('c001', 1);
console.log(`결과1: ${result1}`);
console.log(stock, cart);
const result2 = addToCart('c002', 2);
console.log(`결과2: ${result2}`);
console.log(stock, cart);

const codeitmall: {
  stock: { [id: string]: number };
  cart: string[];
  addToCart: (id: string, quantity?: number) => boolean;
  addManyToCart: (...ids: string[]) => void;
} = {
  stock: {
    c001: 3,
    c002: 1,
  },
  cart: [],
  addToCart,
  addManyToCart,
};

function addToCart(id:string, quantity?: number): boolean {
  if (!quantity) {
    quantity = 1;
  }
  
  if (codeitmall.stock[id] < quantity) {
    return false;
  }
  
  codeitmall.stock[id] -= quantity;
  for(let i = 0; i < quantity; i++) {
    codeitmall.cart.push(id);
  }

  return true;
}

function addManyToCart(...ids: string[]) {
  for (const id of ids) {
    addToCart(id);
  }
}