[ 07.30 ] 타입스크립트 기초 - any / void / interface / type

이숙영·2021년 7월 30일

TypeScript

목록 보기

2/5

Achievement Goals

any, void
interface 중복되는 값 확장
interface 와 type 의 차이를 안다.

🦄 any

먼저, tsconfig.json 파일에서 만들어놓은 객체 중,
noImplicitAny 가 false 로 되있다면 true 로 바꾸어놓고 시작하도록 한다.
이 키,값의 의미는 eslint 로 검사할때 아무것도 타입을 작성하지 않으면 오류가 나도록 하는것이다.
이때, 이전 블로그에서 작성한 타입 (스트링 / 넘버 / 배열 / 객체 등..) 외에 이 모든타입을 아우르는 any 라는것이 있다.
any 라도 타입정의를 해라 , 라는 뜻이다.

하지만 타입스크립트를 쓰는 이유가 정확도, 명확성때문이니 왠만하면 any 보다 정확한 타입을 명시해주는것이 좋다.

fetchTodoItems 라는 함수 안에 있는 todos 는 배열,객체형태로 이루어져 있다.
물론 이렇게 any 라고 해도 오류가 나지 않지만,

앞서 말한것 처럼 더 명확하게 정의해주도록 한다.
fetchTodoItems 함수의 타입은 배열,객체이므로 키값의 타입까지 명시해준 후 []배열처리를 한다.
(interface로 간략하게 작성할 수 있다.)

🦄 void

리턴, 반환할 값이 없는 함수에 정의하는 타입이다.

맨 위의 fetchTodos() 함수와 비교를 해보겠다.
fetchTodos 에서 리턴해준 todos 는 fetchTodoItems 라는, 객체가 담긴 함수를 가져오고 그 함수를 리턴해 주었다. 결과적으로 보면 fetchTodos 함수도 객체로 이루어진 함수이기 때문에 객체 인터페이스가 담긴 Todo[] 타입을 작성해 주었다.

하지만 addTodo,deleteTodo, completeTodo 는 보다시피 전부 리턴해주는 값이 없기 때문에 타입을 :void 로 지정해 두었다.

🦄 interface

바로 전에 인터페이스를 언급했는데 그렇다면 인터페이스는 무엇일까?

fetchTodoItems 함수는 객체로 이루어지고, 키까지 정확한 타입을 명시해주어야 다른 함수에서 갖다쓸때 오류가 나지 않는다. 그렇기 때문에
한 함수에서 모든 키에 대해 타입을 정의하게 되면 위의 캡쳐본처럼 보기 조잡해진다.
이 조잡함을 없애기 위해 interface 를 사용한다.

형태는

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

마치 변수를 지정해줘서 다른곳에서 갖다쓰는것처럼 interface, interface에 쓸 사용자정의명을 써주고 객체형태로 쓰면 된다.

또한 인터페이스는 확장기능이 있다.
확장기능이란, 여러개의 인터페이스 중 중복되는 값을 여러번 적지 않고 extends 로 확장하여 한번만 쓸 수 있도록 하는것이다.

여기 Person 이라는 인터페이스와 Developer 라는 인터페이스 두개가 있다. 이 두개의 인터페이스는 name과 age 라는 타입이 서로 겹치고 있다.
이때 extends 상속명을 이용해서 불필요한 중복을 처리할 수 있다.

🦄 type 별칭

타입별칭이란 정해진 타입에 대해 나중에 쉽게 참고할 수 있게 이름을 부여하는것과 같다.
인터페이스와 거의 유사하다고 볼 수 있다.

인터페이스를 쓸때 마우스를 갖다대면 iterface Iam 으로 나온다.
(캡쳐할땐 커맨드키가 작동되는지 저렇게 나온다. . 원래는 interface Iam 만 나옴.)