타입스크립트 기본 문법 정리

기본형

---

🏷️종류와 타입

종류	타입
문자열	string
숫자형	number
불린형	boolean
undefined	undefined
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"];

객체 타입

---

🏷️{} 내부에 프로퍼티 네임 작성 후 콜론, 타입 작성
🏷️각 프로퍼티는 세미콜론으로 구분
🏷️필수가 아닌 프로퍼티는 옵셔널 네이밍 사용

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 타입

---

🏷️JS와 유사하게 자유로이 쓸 수 있는 타입(쓰지 않는 것을 권장), 사용할 경우 as나 콜론으로 타입 지정

// as 키워드
const parsedProduct = 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 (어떤 조건) {
     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;

Enum 타입 정리

---

🏷️흔히 말하는 열거형으로, 객체와 비슷하게 값을 지정하여 사용한다.

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

console.log(Size.S); // 0
console.log(Size.M); // 1
console.log(Size.L); // 2

❗되도록이면 값을 지정해서 사용!

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

interface 문법 정리

---

🏷️타입 지정을 조금 더 간편하게 하기 위해 사용하는 템플릿과 같은 개념의 문법, 상속이 가능하다.

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

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

🔖상속하고 싶은 경우 extends를 붙힌다.

interface ClothingProduct extends Product {
  sizes: Size[];
}

const product1: ClothingProduct = {
  id: "c001",
  name: "코드잇 블랙 후드 집업",
  price: 129000,
  membersOnly: true,
  sizes: [Size.M, Size.L],
};

const product2: Product = {
  id: "d001",
  name: "코드잇 텀블러",
  price: 25000,
};