최근 한달간 Typescript 공부에 주력했다. 프로그래머스 스터디를 참여하기도 했고, 개인적으로도 공식 문서나 책 등을 읽어보면서 공부했다.

일단 재밌다. 나는 Javascript로 개발을 시작했고, Java나, C++ 처럼 타입을 선언하는 정적 타입 언어 경험이 전무하다. 그래서 정적 타입 언어를 경험하고픈 욕구가 있었다. 다행히도 기본적인 Javascript 문법은 ES10까지 알고 있었고, 아예 다른 언어를 배우는 것보단 러닝 커브가 낮다고 판단했다. 마침 프론트엔드 개발자로 이직을 했으니 앞으로 꼭 필요한 기술이라고 생각했다.

아직 Typescript에 대해 모든걸 아는건 절대 아니지만 내가 느낀 타입스크립트의 좋은 점, 아쉬운 점 등을 공유해보고자 한다.

좋은 점

에러를 줄여줄 수 있고 코드 의도가 분명해진다.

interface IBook {
    title: string;
    description: string;
    author: string;
}

function editBook(bookId: number, bookFormData: IBook): IBook  {
    return bookFormData
}

const book = editBook(1, { title: '사피엔스', description: '인류의 역사', author: '유발 하라리' })

위 코드에서 editBook이라는 함수는 number 타입인 bookIdIBook 타입인 bookFormData를 파라미터로 받는다. 그리고 IBook타입의 객체를 리턴한다.

파라미터와 함수의 리턴 타입만 설정했을 뿐인데 함수의 사용법을 쉽게 알 수 있다.

이는 곧 일일이 코드를 뒤져가면서 읽는 시간을 좀 더 절약할 수 있다는 뜻이다.

팀 단위 협업을 하거나 나중에 프로젝트가 복잡해진다면 때 큰 이점이 될 수 있을 것이다.

만약 이 함수를 사용할 때 다른 타입을 아규먼트로 넘긴다면 컴파일 과정에서 오류가 발생한다.

예시는 작은 코드이지만 프로젝트가 복잡해지면서 개발자가 충분히 실수할 수 있는 부분이라고 생각한다.

타입스크립트를 도입한다면 이런 에러를 런타임이 아닌 컴파일 단계에서 하나라도 더 잡을 수 있다.

물론 전제조건이 있다. 무조건 타입을 잘 명시해야 한다. any 타입을 오남용하면 타입스크립트를 쓰는 의미가 없다.

훌륭한 코드 자동 완성

first_time_with_ts1.png

vscode 기준으로 IBook 타입을 지정한 객체는 뛰어난 자동완성 기능을 지원한다.

클래스로 생성된 인스턴스에서도 사용할 수 있는 멤버를 자동완성 해준다.

더욱 확장된 기능 지원

private, protected 등의 접근 제한자, 반드시 상속하고 구현해서 사용해야하는 추상 클래스, 인터페이스, 제네릭, 데코레이터 등 기존 자바스크립트에는 없는 기능을 지원한다.

이는 구조 설계, 모듈화, 객체 지향적인 측면 등에서 기존 자바스크립트보다 활용성이 훨씬 높다고 생각한다.

데코레이터

클래스(class), 프로퍼티(property), 메소드(method), 파라미터(parameter), 접근자(accessor) 데코레이터가 있다.

데코레이터는 런타임에 실행되는데, 이름처럼 프로퍼티를 수정하는 등 꾸며주는 기능을 한다.

직접 데코레이터를 작성하는건 쉽지 않지만, 오픈소스 커뮤니티에 이미 잘 개발된 데코레이터도 충분히 많다.

이를 잘 활용한다면 코드에 마법같은 일을 부여할 수 있을 것이다.

참고로 데코레이터는 현재 TC39 proposals 2단계에 있다.

아쉬운 점

타입 선언의 초기 비용

장점을 잘 활용하려면 타입 선언을 철저히 해야한다.

오픈소스를 사용한다면 그에 맞는 타입도 적용해야한다.

예를 들면 react-router를 사용한다면 RouteComponentProps 타입을 사용해야한다.

타입 선언을 하면 전술한 장점이 있지만, 초기 비용은 감수해야 할 것 같다.

어렵다 → 익숙하지 않다

이건 사람마다 다를텐데, Java 경험을 가진 개발자는 Typescript는 쉽게 배울거라고 생각한다.

나는 제네릭, 추상 클래스, 접근 제한자 등의 개념이 익숙하지 않았다.

익숙하지 않았지 기본 문법을 배우는데 크게 어렵지는 않았다고 생각한다.

정말 어려운 건 설계, 패턴, 최적화 등이 아닐까 싶다.

정형화된 코드

타입스크립트를 쓰다보면 결국 의존성 주입(Dependency injection) 등 정형화된 패턴을 따르는 느낌이 든다.

이는 협업할 때 장점이기도 하다.

하지만 뭔가 자바스크립트만으로 창조적인 코드 작성을 선호하는 개발자에겐 별로라는 느낌이 들지 않을까란 생각도 든다.

생각해볼 것

타입스크립트가 만능은 아니다.

모든 오타를 다 잡을 수 있는 건 아니다.

그래서 타입스크립트를 도입하더라도 런타임 테스트는 충분히 해야한다.

그리고 단순히 도입에 멈추지 않고 잘 쓰는 방법을 생각해봐야겠다.

이런 고민을 하지 않으면 any를 남발하게 되지 않을까?