TypeScript 4일차_할 일 관리 애플리케이션 TS 변환

# TypeScript

## 할 일 관리 애플리케이션 TS 변환

• 학습 소스 코드 우클릭하여 터미널 진입 후 npm i 입력 하여 인스톨 진행.
• Ctrl + , 으로 VSCode 설정 실행 후 format on save 검색하여 해당 옵션 끄기(체크 해제).

index.ts

let todoItems;

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

// crud methods
function fetchTodos() {
  const todos = fetchTodoItems();
  return todos;
}

function addTodo(todo) {
  todoItems.push(todo);
}

function deleteTodo(index) {
  todoItems.splice(index, 1);
}

function completeTodo(index, todo) {
  todo.done = true;
  todoItems.splice(index, 1, todo);
}

// business logic
function logFirstTodo() {
  return todoItems[0];
}

function showCompleted() {
  return todoItems.filter(item => item.done);
}

// TODO: 아래 함수의 내용을 채워보세요. 아래 함수는 `addTodo()` 함수를 이용하여 2개의 새 할 일을 추가하는 함수입니다.
function addTwoTodoItems() {
  // addTodo() 함수를 두 번 호출하여 todoItems에 새 할 일이 2개 추가되어야 합니다.
}

// NOTE: 유틸 함수
function log() {
  console.log(todoItems);
}

todoItems = fetchTodoItems();
addTwoTodoItems();
log();

tsconfig.js : TS 설정파일.

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "noImplicitAny": true
  },
  "include": ["./src/**/*"]
}

package.json : npm 기본 설정 파일.

{
  "name": "1_todo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "@babel/preset-typescript": "^7.9.0",
    "@typescript-eslint/eslint-plugin": "^2.27.0",
    "@typescript-eslint/parser": "^2.27.0",
    "eslint": "^6.8.0",
    "eslint-plugin-prettier": "^3.1.2",
    "prettier": "^2.0.4",
    "typescript": "^3.8.3"
  }
}

타입 관련 추가 설명. (any, void 등)

• any : 모든 타입을 통칭.

let todoItems: any;

• void : 반환 타입이 없는 경우.

function addTodo(todo): void {
  todoItems.push(todo);
}

filter : 걸러주는 역할을 하는 함수.

let arr = [
    {gender: 'male', name: 'kim'},
    {gender: 'female', name: 'mim'},
    {gender: 'male', name: 'lim'},
]

let filltered = arr.filter(function(item){
    if (item.gender === 'female') {
        return item;
    }
});

console.log(filltered);

타입 별칭 정의_1.

type Todo = {
  id: number,
  title: string,
  done: boolean,
}

let todoItems: Todo[];

인터페이스 이용한 정의_2.

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

let todoItems: Todo[];

TS 변환.

// type Todo = {
//   id: number,
//   title: string,
//   done: boolean,
// }

// let todoItems: Todo[];

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

let todoItems: Todo[];

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

// crud methods
function fetchTodos(): Todo[] {
  const todos = fetchTodoItems();
  return todos;
}

function addTodo(todo: Todo): void {
  todoItems.push(todo);
}

function deleteTodo(index: number): void {
  todoItems.splice(index, 1);
}

function completeTodo(index: number, todo: Todo): void {
  todo.done = true;
  todoItems.splice(index, 1, todo);
}

// business logic
function logFirstTodo(): object {
  return todoItems[0];
}

function showCompleted(): object[] {
  return todoItems.filter(item => item.done); 
  // 위 코드와 동일.
  // return todoItems.filter(function(item) {
  //   if (item.done) {
  //     return item;
  //   }
  // })
}

// TODO: 아래 함수의 내용을 채워보세요. 아래 함수는 `addTodo()` 함수를 이용하여 2개의 새 할 일을 추가하는 함수입니다.
function addTwoTodoItems(): void {
  // addTodo() 함수를 두 번 호출하여 todoItems에 새 할 일이 2개 추가되어야 합니다.
  const item1 = {
    id: 4,
    title: '아이템4',
    done: false,
  }
  addTodo(item1);
  addTodo({
    id: 5,
    title: '아이템5',
    done: false,
  });
}

// NOTE: 유틸 함수
function log(): void {
  console.log(todoItems);
}

todoItems = fetchTodoItems();
addTwoTodoItems();
log();