본문 바로가기
Web Develop/TypeScript

[TypeScript] 타입스크립트 시작해보기

h_j 2023. 7. 19. 19:29

타입스크립트란 무엇일까?

자바스크립트의 확장된 언어로, 자바스크립트 + 타입을 부여한 언어이다.

자바스크립트 코드와 타입스크립트 코드를 비교해보자.

 

 
  // js
  const name = 'hj';
 

 

 
  // ts
  const name: string = 'hj';
 

 

변수에 :를 쓰고 타입을 붙여주는 것이다.

그런데 굳이 타입을 하나하나 붙여주는 이유는 무엇일까? 어떤 장점이 있길래 대부분 자바스크립트 대신 타입스크립트를 사용하는걸까?

 

타입스크립트를 쓰는 이유?

크게 2가지 이유가 있다.

  1. 에러의 사전 방지
  2. 코드 가이드 및 자동 완성

1. 에러의 사전 방지

먼저 첫 번째 이유인 에러를 어떻게 사전에 방지할 수 있는지 알아보자.

코드를 짜다보면 타입을 잘못 사용하여 예상치 못한 에러들을 마주하게 되는 경우가 있다. 예를 들면 다음과 같은 에러이다.

 

 
  function sum(a, b) {
    return a + b;
  }

  sum(10, '20'); // 결과: 1020 (숫자 + 문자열 = 문자열이 되므로)
 

 

원래 의도는 sum이라는 함수를 사용하여 10과 20을 더하려고 하였으나 인수 하나의 타입을 잘못 적어 의도하지 않은 결과가 나오게 되었다. 이는 에러를 발생시키지 않고 예상한 것과 다른 결과가 나오게 된 예시이고, 다른 상황에서도 브라우저를 통해서만 에러를 확인할 수 있는 경우도 있다.

이를 해결하기 위한 방법이 타입스크립트를 사용하는 것이다.

 

 
  function sum(a: number, b: number): number {
    return a + b;
  }

  sum(10, '20'); // 에러 발생
 

 

 

이와 같이 ‘20’에 빨간 밑줄이 그어지면서 string 타입은 number 타입의 파라미터에 할당될 수 없다고 에러가 뜬다.

브라우저에서 실행시켜보지 않아도 코드를 작성하면서 타입 에러가 발생했다는 것을 알 수 있기 때문에 사전에 에러를 방지할 수 있다는 것이다.

2. 코드 가이드 및 자동 완성

두 번째 장점은 타입스크립트 코드를 작성할 때 개발 툴의 기능을 최대로 활용할 수 있다는 점이다. 특히 Visual Studio Code는 툴의 내부가 타입스크립트로 작성되어있기 때문에 타입스크립트 개발에 최적화되어있다고 한다.

 

VSCode 툴에서는 자동완성 기능이 있어 간편하고 오타를 방지할 수 있는데, 변수에 대한 타입이 지정되어 있으면 api를 자동완성 기능을 사용할 수 있다.

 

 

자바스크립트로 작성하면 변수의 타입을 알 수 없기 때문에 api를 미리 보기로 띄워줄 수 없어서 일일이 다 쳐야하지만, 타입스크립트로 작성하면 변수의 타입을 지정해주기 때문에 해당 타입에 대한 api를 미리보기로 띄워준다. 예를 들어 toLocaleString()과 같은 메소드는 number 타입과 관련된 api이기 때문에 변수의 타입이 number일 경우에만 위와 같이 api를 미리보기로 띄워준다.

⁉️ 자바스크립트에도 타입을 지정할 수 있다?

그런데 사실 자바스크립트로도 타입스크립트처럼 미리 타입을 지정할 수 있다.

위에서 든 예시를 다시 보자.

 

 
  function sum(a, b) {
    return a + b;
  }
 

 

이 코드에 아래와 같은 코드를 작성하면 타입스크립트로 작성하는 것과 같게 된다.

 

 
  // @ts-check
  /**
   * @param {number} a
   * @param {number} b
   * @returns
   */
 

 

Jsdoc을 사용하여 각 파라미터의 타입을 지정할 수 있고, //@ts-check를 통해 타입스크립트 기능을 주면 된다.

https://devdocs.io/jsdoc/

 

하지만 해당 예시는 정말 간단한 예시이고 실제 프로젝트를 할 때는 굉장히 복잡해지게 되고 위와 같이 Jsdoc을 사용해서 작성하게 되면 코드도 길어지게 되어 비효율적이다. 그래서 이렇게 하는 대신에 타입스크립트를 사용한다.

 

 

 

컴파일(Compile)이란?

타입스크립트 파일을 자바스크립트 파일로 변환하는 작업이다. 브라우저는 타입스크립트 파일을 인식할 수 없기 때문에 자바스크립트 파일로 변환할 필요가 있다.

컴파일하는 법

  1. ts 파일이 들어있는 폴더(프로젝트)의 터미널을 연다.
  2. node -v 를 입력하여 node가 설치되어 있는지 확인한다.
  3. npm i typescript -g을 입력하여 typescript라는 라이브러리를 로컬에 설치한다.
  4. tsc index.ts tsc를 통해 해당 ts파일을 js파일로 변환(컴파일)할 수 있다. -> js 파일이 자동 생성된다.

타입스크립트 설정 파일

타입스크립트 설정 파일은 tsconfig.json 파일을 말하는 것인데, 이는 컴파일할 때 부가적인 옵션을 줄 수 있는 파일이다.

해당 프로젝트(폴더)에 tsconfig.json 파일을 생성하고 key-value 형태로 부가적인 정의하면 정의하면 된다.

 

 
  {
    "compilerOptions": {
        "allowJs": true, // 이 프로젝트에 js를 허용하겠다.
        "checkJs": true, // allowJs와 같이 씀 @ts-check와 같은 기능
        "noImplicitAny": true // 모든 타입에 대해서 any라는 타입이라도 넣어야된다.
    }
  }

웹팩(Webpack)

웹팩이란 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러이다. 매번 tsc라는 명령어를 통해 컴파일해주는 작업을 자동화해주기 위해 사용한다.

💡 모듈 번들러
  : 웹 애플리케이션을 구성하는 자원(HTML, CSS, JavaScript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구

 

 

 

 

참고

타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의

Why TypeScript? | 타입스크립트 핸드북

웹팩 핸드북

 

티스토리툴바