171일차 - TypeScript (void, interface, type)

TypeScript 공부

개인프로젝트 TimeKeeper를 JS코드로 작성하고, TypeScript(이하 TS)로 리팩토링을 하려고 했다.
자연스럽게 TS공부보다 TimeKeeper 코드를 작성하는 시간이 늘어났다.

이력서를 작성하다보니 생각보다 TS를 요구하는 회사들이 많았고 거의 필수라는 생각이 들었다.
그래서 TimeKeeper는 비중을 줄이고 TS공부 비중을 늘리려고 하고 있다.
TimeKeeper도 JS코드로 작성한 후 TS코드로 바꾸기 보다는 애초에 TS코드로 작성하는 것이 더 효율적이라고 생각이 든다.

---

Void

TS에서는 함수가 반환하는 타입을 정할 수 있다.
지정을 하지 않으면 기본적으로 any가 지정되지만, 이러한 지정으로 인해 협업때 도움이 될 것이라는 생각이 들었다.

그런데 만약 함수가 반환값이 없으면 어떻게 지정해야할까?
number값을 반환하는 함수

const add = (a: number, b: number): number => {
  return a + b;
};

반환값이 없는 함수

const add = (a: number, b: number): void => {
  console.log(a + b);
};

위의 함수는 return값이 없어서 아무런 값을 반환하지 않는다.
그럴때 위와 같이 void로 지정해 줄 수있다.

interface

TS에서 interface는 객체의 타입을 선언할 때 사용한다.

users이라는 배열에 사용자를 추가하고 삭제, 업데이트하는 함수들을 작성 한다고 해보자.

const users: {
  name: string;
  age: number;
  isAdmin: boolean;
}[] = [];

const addUser = (person: {
  name: string;
  age: number;
  isAdmin: boolean;
}): void => {
  people.push(person);
};

const deleteUser = (person: {
  name: string;
  age: number;
  isAdmin: boolean;
}) => {
  // 유저를 삭제하는 코드
}

const updateUser = (person: {
  name: string;
  age: number;
  isAdmin: boolean;
}) => {
  // 유저 정보를 업데이트 하는 코드
}

pesron이라는 객체의 타입을 반복적으로 지정해서 비효율적으로 보인다. 이때 interface를 사용해서 가독성 있는 코드를 작성할 수 있다.

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

const users: Person[] = [];

const addUser = (person: Person): void => {
  people.push(person);
};

const deleteUser = (person: Person) => {
  // 유저를 삭제하는 코드
}

const updateUser = (person: Person) => {
  // 유저 정보를 업데이트 하는 코드
}

위 보다 훨씬 가독성이 좋다.

type

type은 객체 이외에도 다양한 타입들을 지정할 수 있다.

// object

type Person {
  name: string;
  age: number;
  isAdmin: boolean;
}

// string

type StringType = string;
let str: StringType = 'hello world';

// number

type NumberType = number;
let num: NumberType = 10;

Q: 그럼 다 Type으로 하면 안될까?

A: 가능하다 하지만 interface를 사용할 수 있으면 interface를 사용하는 것이 더 좋다.
interface는 type에 비해 확장이 용이하다.
프로그래밍을 한번 작성하고 끝나는 것이 아니라 추가적인 작업이 필요할 수도 있다.
확장이 필요할때 확장을 할 수 있도록, 가능성을 열어놔야 된다.

interface 확장 예시 (class 와 유사하다)

// interface 확장

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

interface Adult extends Kid {
  marriage: boolean;
}

Kid에서 확장을 해서 Adult라는 객체의 타입을 지정했다.
Adult를 아래와 같이 선언한 것과 동일한 결과를 가진다.

interface Adult {
  name: string;
  age: number;
  marriage: boolean;
}

참고자료

캡틴판교 - 타입스크립트