TypeScript

• About TypeScript

1. 왜 타입스크랩트를 써야하나.
2. TypeScipt 기초
3. 함수 타입을 정의하자
4. interface를 활용하자
5. 타입 별칭이란?
6. 연산자를 이용한 타입 정의 - 유니온 타입
7. enum
8. class
9. generic
10. promise Types
11. todolist 만들어보기
12. 디버깅

목차

배열 내부 오브젝트 속성 정의하는 방법

let todoItems: { id: number; title: string; done: boolean }[] = [
  { id: 1, title: "안녕", done: false },
  { id: 2, title: "타입", done: false },
  { id: 3, title: "스크립트", done: false },
];

오브젝트를 포함한 배열을 내보내는 함수 타입 정의

function fetchTodoItems(): { id: number; title: string; done: boolean }[] {
  const todos = [
    { id: 1, title: "안녕", done: false },
    { id: 2, title: "타입", done: false },
    { id: 3, title: "스크립트", done: false },
  ];
  return todos;
}

배열안에 객체만 불러올 경우

function addTodo(todo: { id: number; title: string; done: boolean }): void {
  todoItems.push(todo);
}

interface 사용하기

• 전체코드

interface Todo {
  id: number;
  title: string;
  done: boolean;
}

• 클래스 처럼 interface 정의
• 객체안에 정의해주고싶은 Type 추상화

적용

function fetchTodoItems(): Todo[] {
  const todos = [
    { id: 1, title: "안녕", done: false },
    { id: 2, title: "타입", done: false },
    { id: 3, title: "스크립트", done: false },
  ];
  return todos;
}

• 추상화 하여 정의하고 싶은 곳에 재활용

Interface 활용하기

// 함수에 인터페이스 적용하기
interface Fruits {
  name: string;
  price: number;
}

function getFruits(fruits: Fruits) {
  console.log(fruits);
}

const apple = {
  name: "사과",
  price: 1250,
};

getFruits(apple);

• 인터페이스는 Fruits