3-3. 실습

//tsconfig.json

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

저기서 noImplicitAny를 true로 바꾸면 ts파일에 타입이 정해지지 않을것들에 빨간줄이 생길거다!!!

 

noImplicitAny 의미는 any라고 붙여라. 이런의미이다.

---

실습하기전 상태

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();

---

1.return 없으니까 void

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

2. 맨밑의 코드에서 todoItems가 fetchTodoItems랬는데, todos가 배열안에 객체로 이루어져있다.

let todoItems: object[];

3. todoItems랑 fetchTodoItems 같으니까

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

4. todos랑 연결된다고생각하면 된다. 

function fetchTodos(): object[] {
  const todos = fetchTodoItems();
  return todos;
}

5.

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

6.

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

7.

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

8.

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

9.

function showCompleted(): object[] {
  return todoItems.filter(item => item.done);
  // return todoItems.filter(function(item){
  //   if(item.done){
  //     return item;
  //   }
  // })
}

10.

function log(): void {
  console.log(todoItems);
}

11.

// 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,
  })
}

 

오류잡을때 ts오류코드 이용하면 좋다!

 

 

12. todoItems를 구체화한다.

let todoItems: object[];

//이렇게 바꿔주자.

let todoItems: { id: number; title: string; done: boolean }[];

 

13. todo의 오류를 잡아주자.

todo를 구체화해야한다.

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

//이렇게 바꿔주자.

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

14. 오류를 잡아주자

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

//이렇게 바꾸자

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

 

15. todoItems의 오류를 잡아주려고 fetchTodoItems의 함수를 찾아가자.

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;
}

 

16. 중복코드제거

let todoItems: { id: number; title: string; done: boolean }[];

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

let todoItems: Todo[];