TypeScript: 타입스크립트란 Ep.1 (설치 및 Type Annotation)

TypeScript란 무엇인가

---

Typed JavaScript at any Scale!
우리가 사용하는 자바스크립트에 타입이라는 개념을 적용시킨 것이다.
타입을 추가하여 자바스크립트를 확장시킨다.
자바스크립트를 이해함으로, 코드를 실행시키기 전에 에러 수정을 하는 시간을 절약시켜준다.
어떤 브라우저건 OS, 자바스크립트 실행 환경이던 사용 가능한 오픈소스이다.

타입스크립트는 프로그래밍 언어이며 컴파일 언어이다. (자바스크립트는 인터프리터 언어)
단, 전통적인 컴파일 언어와는 다른점이 많은 편이다. 그래서 트랜스파일(Transpile)이라는 용어를 사용하기도 한다.

타입스크립트는 Editor를 사용하여 작성한다.
작성된 코드는 우리가 사용하고 있는 Node나 브라우저 환경에서 바로 읽어서 사용할 수 없다. 따라서 바로 사용할 수 있는 플레인 자바스크립트로 변경해서 사용해 주어야 하는데, 이때 타입스크립트 컴파일러(프로그램)로 변경을 시켜준다.

TypeScript 설치 및 사용

---

• node.js 설치

  nvm 설치

• browser 설치

  그냥 크롬으로…

• TypeScript 컴파일러 설치

  • global로 컴파일러 설치

    -g는 global의 약자이다.
    global 설치로 앞으로 어디든 타입스크립트 컴파일러 사용 가능

    npm i typescript -g 
    

    • 컴파일러 사용 명령어, tsc

        tsc test.ts
      

      test.ts 파일은 타입스크립트 언어로 작성된 내용이 있다. 해당 타입스크립트로 써있는 파일을 tsc가 자바스크립트 파일로 변경해준다.
      해당 명령어를 사용한 후 확인을 해보면 test.js, 자바스크립트 파일이 하나 생긴 것을 확인할 수 있다.

    • project의 설정

      모든 ts파일을 js로 컴파일을 하고 싶다면 global로 설치했기 때문에 아래의 명령어 실행시 모든게 실행이 되어야 한다.

        tsc
        # js 파일이 생성되지 않는다.
      

      그러나 프로젝트 특성상 어떤 파일을 컴파일 할 것인지 설정파일을 넣어줘야 한다.
      따라서, 자동으로 설정파일을 넣어줄 수 있는 명령어를 실행한다.

      tsc --init
      # 명령어 입력후 자동으로 tscconfig.json 설정 파일이 생성된다.
      

      해당 명령어 실행후 다시 tsc 명령어를 실행하면 해당 파일에 존재하는 ts파일과 동일한 js 파일이 생성되게 된다.
      즉, 프로젝트에서 tsc 명령어를 실행하고 싶다면 tsc —init명령어를 사용해서 tsconfig.json 파일 생성후에 사용이 가능하다.

    • tsc 명령어 사용 없이 자동으로 컴파일하기

      -w는 watc의 약자이다.

      tsc -w
      

      해당 옵션을 달고 실행하면 파일이 수정될때마다 자동으로 새로 컴파일이 된다.
      (실행되는 상태에서 새로운 터미널창을 열어서 (Cmd + N) 파일 내용 변경후 js 파일 내용을 확인해보면 자동으로 변경된 것을 확인할 수 있다.

  • 프로젝트에 컴파일러 설치

    • global 설치 삭제하기

      npm uninstall typescript -g
      

    • npm 프로젝트 만들기 (dependency 형태 만들기)

      npm 라이브러리에 dependency가 전부 등록될 수 있는 형태로 만들어준다.

      npm init -y
      # -y는 모든 설정을 그냥 yes로 넘김
      

      해당 명령어를 실행하면 package.json 파일 생성된다.

    • npm 라이브러리 (ts)설치

      npm install typescript
      

      dependencies 항목에 typescript와 버전이 등록된다.

    • tsc 사용하기
      • node_modules/.bin/tsc 방법으로 실행
      • node_modules/typescript/bin/tsc 방법으로 실행
      • 근데 두가지 모두 작성해야 할 명령어가 너무 길다. 그래서 npm이 업데이트 되면서 추가된 것!
      • npx tsc 로도 실행이 가능하다.
      • npx tsc 사용하기

          # tsconfig.json 파일 생성
          npx tsc --init
                    
          # tsc 사용이 가능하게 된다
          npx tsc
                    
          # 자동으로 js 파일 업데이트
          npx tsc -w
        

        • script 등록

          보통은 npx tsc를 바로 실행하지 않고 어떤 스크립트가 돌아갈 수 있는 지를 등록한다.
          등록은 package.json에 한다.

          // package.json
                      
          "scripts": {
              "build": "tsc"
            }
          

          npm run build 명령어를 사용하게 되면 tsc를 자동으로 실행할 수 있게 된다.

First Type Annotation

---

Type Annotation은 타입스크립트가 가진 고유의 기능이다. 타입이라는 요소가 코드상에 들어나는 방식이다.

• typescript와 let
  • let에 값 할당

    // test.ts
    let a = 'Mark'
          
    a = 39 // Type 'number' is not assignable to type 'string'
    

    39라는 값은 (넘버형 값) a에 넣을 수가 없다. a라는 곳에는 현재 무조건 string 값만 넣을 수 있기 때문이다. (a = mark로 인해)

    ts에서의 let은 사용하면 a라는 변수에 특정한 값을 할당한다. a값에 할당한 데이터 타입이 지정되면서 해당 변수에는 지정된 데이터 타입만이 사용이 가능하게 된다.

  • let 선언

    let a;
    

    a 변수에는 any라는 타입이 지정된다.

    let a: string;
          
    a = "Mark";
    

    a의 타입으로 string을 지정했기 때문에 a 값에 Mark가 들어갈 수 있다. number은 불가.

    let a: number;
          
    a = 39;
    

    a의 타입으로 numer 지정했기 때문에 39가 들어갈 수 있으며, Mark는 들어갈 수 없다.

  • 함수의 인자로 타입 설정

    function hello(b: number)
          
    hello('Mark')
    

    타입을 number로 설정했기 때문에 문자열인 Mark는 들어갈 수 없다.