📃 타입스크립트 입문 05 : 중복되는 코드 인터페이스로 리팩토링 + TODOLIST 코드리뷰

👩🏻 타입별칭과 인터페이스를 통해 함수에 타입들을 작성하지 않고도 따로 정의하여 중복 코드들을 리팩토링 할 수 있다는점. 코드 리팩토링 굉장히 중요ㅠ.ㅠ 나중에는 천천히 코드 디자인패턴에 대해서 연구해보자...

 

🎈 타입별칭

type MyName = string;
const name: MyName = 'capt';

타입 별칭은 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미한다. 예를 들면 위에 처럼 타입별칭은 새로운 타입 값을 하나 생성하는 것이 아니라 정의한 타입에 대해 나중에 쉽게 참고할 수 있게 이름을 부여하는 것과 같다. 타입별칭 쓰는 법은 type으로 시작해서 위 코드처럼 속성들의 타입들을 담아주면 된다. 

 

🎈 인터페이스

interface User {
  age: number;
  name: string;
  }

var seho: User = {
  age: 33,
  name: '세호'
}

function getUser(user : ✔️User) {
console.log(user);
}

인터페이스는 타입스크립트에서 하이라이트라고 할 수 있다. 그만큼 중요하다. 인터페이스를 이용한 위의 코드를 보면 User라는 interface 만들어 속성들을 넣어주고, 변수에 인터페이스를 활용한 다음 새로운 함수를 만들 때 User를 넣어주면 긴 코드의 명시적 타입들을 안넣어도 된다.

🎈 타입별칭과 인터페이스 차이점

타입 별칭과 인터페이스의 가장 큰 차이점은 타입의 확장 가능, 불가능 여부이다. 인터페이스는 확장이 가능한데 반해 타입 별칭은 확장이 불가능하다. 따라서, 가능한한 type보다는 interface로 선언해서 사용하는 것을 추천한다.

 

 

---

 

 

🎈함수의 스펙(구조)에 인터페이스 활용

interface SumFunction {
  (a: number, b: number) : number;
}

let sum : SumFunction;
sum = function(a: number, b: number) : number {
  return a+b;
}

sum 이라는 함수의 규칙을 정의함

 

🎈인덱싱

interface StringArray {
  [index: number] : string;
  //index는 숫자를 받고, 반환되는 값은 문자열로
}

var arr : StringArray = ['a','b','c','d'];

index는 숫자를 받기 때문에 number로 지정하고, 반환되는 값은 문자열(string)로. 그리고 arr라는 변수를 만들 때 이미 만들어진 StringArray 인터페이스 속성 규칙대로 배열 값들은 문자열로 입력해준다.

 

 

🎈 인터페이스 딕셔너리 패턴

interface StringRegexDictionary {
  [key:string] : RegExp;
}

var obj : StringRegexDictionary = {
  cssFile : /\.css$/,
  jsFile : /\.js$/
}

Object.keys(obj).forEach(function(value) {})

StringRegexDictionary 인터페이스에 왼쪽에 있는 key값은 string으로 오른쪽은 RegExp라는 정규표현식으로 지정했다. obj라는 변수에 StringRegexDictionary를 불러왔으니 새로운 변수를 만들 때 상호관계 일치하게 왼쪽에는 string 방식으로 오른쪽에는 정규표현식을 사용해줘야한다. 그리고 마지막에 Object로 시작하는 문장의 코드는 keys에 obj라는 key들만 배열로 만든 다음에 반복문 forEach 돌려준다는 것이고 function 함수 파라미터 안에 들어있는 value는 string를 의미한다.

 

🎈 인터페이스의 확장

interface Person {
  name: string;
  age: number;
}

interface Developer extends Person {
  language: string;
}

Person이라는 인터페이스 안에 속성들을 정의해두고 이걸 확장해서 코드 수를 줄이는 방법이다. 먼저 Person 인터페이스를 정의 했으니 Developer라는 인터페이스에 extends를 사용해서 Person을 확장 시켜줬기 때문에, name과 age란 속성은 알아서 암묵적으로 가지고 가게 된다. 그리고 Developer라는 인터페이스에는 필요로 하는 속성들은 그때 그때마다 새롭게 추가시켜서 선언해주면 된다. (위 코드 보면 language만 추가시켜주었다)

 

 

🎈 TODO-LIST 프로젝트 코드리뷰

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

let todoItems: Todo[];


🎈api
function fetchTodoItems():Todo[] {
  //{ id: number; title: string; done: boolean; }
  const todos = [
    { id: 1, title: '안녕', done: false }, //이것들이 다 object다
    { id: 2, title: '타입', done: false },
    { id: 3, title: '스크립트', done: false },
  ];
  return todos;
}

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

=> 리턴했을 때  object[] 를 반환한다.

🎈할 일 추가하기
function addTodo(todo: Todo): void {
  todoItems.push(todo);
}

=> 함수의 반환값(return)이 없을 때 void를 해줘야한다.

🎈 할 일 지우기
function deleteTodo(index : number):void {
  todoItems.splice(index, 1);
}

=> index는 배열의 index이기 때문에 타입은 number로 지정해주는 것이 좋다.

🎈 할 일 완료하기
function completeTodo(
  index:number,
  todo: Todo
):void {
  todo.done = true;
  todoItems.splice(index, 1, todo);
}

=> void로 값 반환

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

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

function addTwoTodoItems() : void {
  const item1 = {
    id: 4,
    title: '아이템 4',
    done: false,
  }

  addTodo(item1);
  addTodo({
    id: 5,
    title: '아이템 5',
    done: false,
  });
} 

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

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

앞서 📃 타입스크립트 입문 03 : 자주 쓰는 기본 타입 정의, 문자열 선언 방식 에서 알아본 타입정의들을 투두리스트 프로젝트에 다 녹여내었다. 타입스크립트의 가장 핵심인 인터페이스를 사용해 Todo의 타입들을 선언해주었고, 할 일 목록은 여러개이니 배열로 반환해주었다. ex) Todo[].

그리고 인터페이스를 사용하지 않았더라면

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

위처럼 엄청나게 긴 코드를 선보였을텐데 인터페이스를 사용해서 한번에 Todo[ ] 이런식으로 나타내어 코드를 최소화 시켰다. 그리고 할 일 추가 할 때는 push를 사용하였고, 반환값은 할 일을 그때그때마다 추가하는거라 없으니 void를 해주었다. 그리고 할 일 지울 때도 마찬가지. 대신 할 일 지울 때는 splice 를 사용하였다. splice 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다는 뜻이다. 할 일이 완료되면 체크란에 체크가 토글방식으로 on/off기능을 true, false로 나타내주었다. 그리고 특정 함수만 걸러내는 것을 filter라고 한다. filter를 사용할 때는 오브젝트들이 배열로 되어있어 그 중에서 걸러주는 것이니 [ ] 배열 표시를 해줘야한다.