함수 타입 지정예제

• 변경 전 코드

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

• 변경 후 코드

  • string[] → string데이터 형인 []/object[] → object []

  • object key 데이터 형 지정

  • 데이터 형 일일히 지정하지 않고 타입 지정해서 사용하는 방법도 있음

    ```tsx
    type Todo= {
    id: number;
    title:string;
    done:boolean;
    };타입 정해서 사용하는 
    ```

    let todoItems:{id:number,title:string,done:boolean}[];
    
    // api
    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;
    }
    
    // crud methods
    function fetchTodos() {
      const todos = fetchTodoItems();
      return todos;
    }
    
    function addTodo(todo:{id:number,title:string,done:boolean}) {
      todoItems.push(todo);
    }
    
    function deleteTodo(index:number) {
      todoItems.splice(index, 1);
    }
    
    function completeTodo(index:number, todo:{id:number,title:string,done:boolean}) {
      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. object 는 any 타입으로 추천해준다. (별도로 지정하지 않을경우)
2. object 로 타입 지정해도 되지만, object안의 데이터(키)를 인식못하므로 각각의 키, 데이터 형을 지정해준다

→2번을 매번하면 번거로우니 타입선언해서 해당타입으로 지정해도 된다.

→인터페이스로 하는게 베스트임