오늘 배운 것

• TypeScript
• 은닉화의 한계
• 추상화 기능의 부재

TypeScript

개요

자바스크립트의 상위 호환 언어 (마이크로소프트에서 구현)
확장자로는 .ts를 사용하며(무조건은 아님), 컴파일의 결과물로 js코드를 출력한다.
최종적으로 런타임에서는 이렇게 출력된 js코드를 구동시키게 된다.

특징

정적 타입을 명시할 수 있다.
IDE나 컴파일러에게 개발자가 의도한 변수나 함수의 목적을 명시적으로 전달할 수 있기 때문에, 그 정보를 기반으로 코드 자동 완성을 지원하기도 하고, 잘못된 변수나 함수 사용에 대한 오류 보고가 가능하여 바닐라JS에 비해 굉장한 생산성 향상이 가능하다.

또한, api를 구현하고 사용함에 있어서 해당 api의 입/출력이 무엇인지 명시할 수 있기 때문에, api를 쓸 때 매뉴얼을 찾아보거나 코드를 뜯어봐야하는 js에 비해 효율적이다.

은닉화의 한계

타입스크립트에는 클래스 내부에서만 쓰이는 속성 및 메소드를 구분하기 위헤 private라는 키워드를 제공하지만, 이렇게 은닉화를 도와주는 기능이 자바스크립트에서는 쓰이지 않는다.

자바스크립트는 모든 클래스 내의 메소드가 전부 public이었는데, private(외부에서 접근할 수 없음)을 구분하는 키워드나 기능이 없어서 일부 개발자들이 언더바와 같은 prefix를 붙이는 수준으로 구분해 왔다.

하지만 프로토타입 체인에 모두 노출되기 때문에, 보안상으로나 기능상으로나 완전한 의미의 private라고 보기는 어려웠다.

이 때문에 최근에는 private method와 private property가 도입되는 중이고, mdn에서도 찾을 수 있지만, mdn의 브라우저 지원 현황에서 볼 수 있듯 많은 브라우저가 지원하지 않기 때문에 실제로 이 기능을 사용하기는 어렵다.

이러한 한계 때문에 symbol을 이용한 방법과 WeakMap을 이용한 방법으로 은닉화를 시도해 볼 수 있었고, 지금은 TypeScript의 등장으로 많은 자바스크립트 개발자들이 타입스크립트로 이동하여 private기능을 이용한다.

추상화 기능의 부재

객체 지향 프로그래밍의 주요 특징 중 하나인 추상화는 속성과 메소드의 이름만 노출시켜서 사용을 단순화한다는 의미를 갖고 있다.

하지만 자바스크립트에는 존재하지 않는 기능이다.
(타입스크립트는 주요 기능으로 구현해 놓았다. 이정도면 바닐라 자바스크립트는 똥같은 수준)

TypeScript 추상화 예제

interface ClockInterface {
  currentTime: Date;
  setTime(d: Date): void;
}
// TS에서는 interface 키위드가 추상화를 가능하게 한다.
class Clock implements ClockInterface {
  currentTime: Date = new Date();
  setTime(d: Date) {
    this.currentTime = d;
  }
  constructor(h: number, m: number) {}
}

인터페이스와 클래스가 따로 정의되어 있는 모습을 볼 수 있다.
타입스크립트에서는 인터페이스가 일종의 규약과 같이 간주되어, 인터페이스를 클래스로 구현하는 사람들이 이에 맞게 작성할 수 있게 돕는다. (인터페이스는 다양한 구현이 있을 수 있다)

이 때문에 클래스를 이용하는 입장에서, 노출된 인터페이스를 통해 클래스 -> 메소드 이름이 의도한 바 대로 작동한다는 것을 명시해준다.
또한, 실질적인 구현 코드를 공개하지 않고 사용법을 노출시키는 데에도 유리하다.