🤷‍♀️ 타입스크립트란?

자바스크립트 + 타입 -> 자바스크립트의 확장판 이라고 생각하면 된다. But! 브라우저에서는 바로 읽을 수 없음… js로 컴파일 작업을 해야 브라우저가 읽을 수 있다. 그럼 컴파일은 어떻게 해야하나요? 그건 밑에서 차근차근 설명을 하겠다~ 나는 타입스크립트를 써보면서 타입이 따로 없는 자바스크립트 벽돌에 타입스크립트라는 시멘트를 바르는 느낌이 들었다.

장점

왜 다들 타입스립트를 쓰라며 노래를 부르는지 어떤 장점이 있는지 보자

  1. 타입 정의 먼저 자바스크립트의 자유분방한, 너무 자유롭다 못해 무질서하기까지 느껴지는 타입을 정의하여 빌드 전에 런타임 오류를 바로 잡을 수 있다. 타입? 그냥 "“ 붙이면 문자열이고 {} 감싸면 객체인거지 뭐… 라고 하기에 타입과 관련된 오류로 꽤 빈번히 골치를 썩은 적이 있다. 값이 “123" 가 들어와야 하는데, 실수로 123을 넣고 왜 안될까 😡 (심지어 에러도 뜨지 않는다) 고민에 빠진적이 있다. 타입스크립트를 사용했다면 이런 어처구니 없는 실수에 빠지지 않았을 것이다.

    js 이 자유로운 녀석

  2. VScode VSC에서 타입스크립트를 사용하면 기가막힌 콜라보를 볼 수 있다. 그만큼 다양한 기능과, 플러그인들이 존재하여 우리의 코딩 시간을 줄여줄 것이다.
  3. 객체 지향 타입스크립트를 활용하면 객체 지향 언어 스타일로 코드를 작성할 수 있다. 상속, 인터페이스등 멋진 객체 지향 프로그래밍 패턴을 가질수 있다. 그렇다고 무조건 객체 지향 언어처럼 사용해야 한다는 것은 아니다. 타입스크립트는 그저 자바스크립트를 견고하게 만들어줄 뿐이다.

단점

  1. 속도 아무래도 타입체크 후 빌드를 하기 때문에 속도가 느릴 수 밖에 없다. 파일이 세 개라면 체감하지 못하겠지만 보통 회사의 프로젝트는 파일 수가 어마무시하지 않은가? 그러면 빌드 시간이 길어질 수 밖에 없다.
  2. 적용 기존에 이미 짜여진 코드의 양이 방대하다면 중간에 세팅하기란 참 어렵다. 필자처럼 VSCode에, 크롬 console창에 경고를 보기 힘들어하는 타입이라면 예전 코드에 타입스크립트를 적용하느라 하루를 꼬박 날릴지도 모른다.
  3. 가독성 타입을 같이 쓰게 되면 자연스럽게 코드의 양이 늘게 되고 이는 가독성 저하로 이어질 수 있다.
  4. 오류 타입스크립트는 자바스크립트에 대한 타입 오류만 잡아줄 뿐, 자바스크립트의 오류를 잡아주지는 못한다.

🙋‍♀️ 단점이 저렇게 많은데 왜 타입스크립트를 써야하나요?

걱정하지 말자, 단점은 괜한 노파심이 될 것이다.

  1. 속도 타입스크립트는 속도 문제의 대안점으로 babel을 선택했다. babel은 타입스크립트의 문법을 싹 제거하고 자바스크립트로 만들어주는 역할을 한다. 바벨의 수고 덕분에 타입스크립트의 빌드 속도를 대폭 줄일 수 있게되었다. 👏 또한 여러 트렌스 컴파일러가 나오면서 더이상 속도는 문제가 되지 않게 된다.
  2. 적용 기존 코드에 대입을 하게 되면 많은 오류를 만나게 될 수 있다. 그렇지만 strict 모드와 eslint를 잠시만 느슨하게 하고 시작한다면 금세 자비스크립트 벽돌에 타입스크립트 시멘트가 잘 발린 코드를 볼 수 있게 될 것이다.
  3. 가독성 각 회사마다, 각 팀마다 코드 컨벤션이 존재한다. 타입스크립트를 도입함과 동시에 코드 컨벤션을 재정비하는 시간을 가지면 코드의 가독성을 향상시킬 수 있다.
  4. 오류 타입스크립트가 자바스크립트의 근본적인 오류는 해결해주지 못하지만, 자바스크립트의 타입을 제한해주기 때문에 적어도 한 가지, 타입에 대한 오류에 대해서는 자유로울 수 있다.

🏃‍♀️ 어떻게 시작해야하나요?

나는 회사에서 기존 vue-cli로 만들어진 Vue 3.0 코드에 적용을 하고 싶다. vue add typescript 설치

밑의 코드는 tsConfig 파일이다. 우선 빡센 검사는 잠시 넣어두고 시작하는 것이 좋다.

{
 "compilerOptions": {
  "allowJs": true // 자바스크립트 파일 타입
  "checkJs": false // 타입 체크 활성화
  "outDir": "./dist"
  "rootDir": "./src"
  "strict": false
 }
}

그리고 나서 기존 Vue 파일에 defineComponent을 추가하는 것이다.

import { defineComponent } from "vue";

export default defineComponent({
  name: "MyPage",
  //...
});

// and

<script setup lang="ts">
const props = defineProps<{
  foo: string
  bar?: number
}>()
</script>

우리 회사에 적용하기

우리 회사는 Quasar UI Framework를 사용한다. Webpack과 함께 사용하고 있는데 이는 퀘이사 공식문서에 아주 잘 나와있다.

⛔ 이건 피합시다

  1. any 타입은 쓰지 말 것! any 날리기~ 타입을 매워주는 언어인데 쓰기 어렵다며 any를 남발하면 쓰느니만 못한 가독성만 나쁜 코드가 된다. 나도 그랬었다… 만약 타입을 쓰기 어렵다면 static 모드를 해제하고 천천히 타입을 채워보자.

reference