타입스크립트 (1) - 시작하기

항상 React를 공부하며, 공고를 보면 타입스크립트가 따라다닌다. 타입스크립트를 사용하면 개발 환경에서 확실히 에러를 줄일 수 있다는 이야기를 많이 들었다. 그래서 이번 기회에 제대로 배워보도록 하자 ㅇㅅㅇ

타입스크립트 기본기

• 프로그램을 실행하는 도중에 발생하는 오류를 런타임 오류라고 한다.
• 그런데 자바스크립트를 하다보면 유독 런타임 오류가 많이 발생한다.
  -> 이건 언어의 특성상 코드가 실행되기 전에는 코드가 올바른지 검사하지 않기 때문이다.
• 즉, 코드를 미리 기계어로 바꿔놓고 실행하는 컴파일 언어가 아니라 코드를 한줄 한줄 읽어서 실행하는 인터프리터 언어이기 때문이다.
• 그리고 자바스크립트 변수에는 정해진 타입이라는 것이 없다.
• 자바스크립트는 동적 타이핑 언어이다. 변수의 자료형을 자유롭게 바꿔서 사용 가능한 것이다.
  • 동적 타이핑 언어는 개발자가 마음대로 편하게 변수를 쓸 수 있다는 장점이 있지만,
  • 실수하기 쉽고, 실수를 발견하기 어렵다는 단점이 있다.
  • 그래서 타입스크립트가 나왔다.
    
  • 왜 버그 발생 가능성이 높아???
    
  • 이렇게 변수를 유동적으로 사용가능 하기에 실행과정에서 오류가 발생할 가능성이 높아진다는 것!
  • 하지만 정적 타이핑 언어에서는 타입 관련 오류가 있으면 애초에 오류를 바로 알려주고 실행 되기전에 타입 검사까지 모두 마치고 실행되기 때문에 오류가 있다면 실행 자체가 불가능하다.
    
• 자바스크립트의 이런 단점을 보완하기 위해 기존 자바스크립트 문법에 정적 타이핑이라는 문법을 새로 추가했다.
  • 정적 타이핑은 동적 타이핑의 반대 개념인데, 변수나 함수에 타입을 지정해놓고 그 타입만 계속 사용하는 방식이다.
    (아래 사진 참고)
    
• 그래서 타입스크립트는 실제로 배포하기전에 타입 체크를 한다. 이때 코드 전체를 검사하면서 실수를 미리 발견할 수 있게 해준다.
  - 정리하자면, 타입스크립트는 실행전에 타입검사를 통해서 안정성을 확보하면서도, 일일히 모든 변수에 타입을 지정해주지 않아도 되는 유연함까지 확보한 언어이다.
  
• 자바스크립트 코드보다 명확하기 때문에 vscode 같은 에디터를 활용하기 좋다.
  • 자동완성이나 힌트를 보여주기에도 아주 좋다.
• 그래서 개발자의 생산성이 훨씬 좋아진다.
• 타입스크립트가 기존 자바스크립트의 문법을 포함한다고 했는데 이런걸 슈퍼셋(Superset)이라고 한다. 참고하세용
  

타입스크립트 설치하기

1. 폴더를 생성하고 터미널에서 npm init을 입력하면 package.json 파일이 생성된다.
2. 타입스크립트는 개발할때만 사용하기 때문에 devDependencies로 설치하는데, 이때 npm i --save-dev typescript 명령어를 입력한다.

   • --save-dev 옵션으로 꼭 설치해야한다.
     • 왜? 타입스크립트를 개발에만 필요한 의존성으로 설치하기 위함이라고 한다.
     • 타입스크립트는 주로 개발환경에서 사용되기에 실제 배포나 실행될때는 자바스크립트로 변환된 코드만 필요하다. 그래서 해당 옵션으로 설치해서 배포 시에는 패키지에 포함되지 않도록 한다.

3. 이렇게 하면 package.json 파일에 devDependencies에 타입스크립트 추가된다.
4. 타입스크립트 사용할때 필요한 설정 파일 만들기: npx tsc --init
   

   • npx는 노드 모듈을 실행한느 명령어이고,
     tsc는 타입스크립트에서 제공하는 타입스크립트 컴파일러라는 모듈이다.
   • 여기서 컴파일러는 타입스크립트 코드를 자바스크립트 코드로 바꿔주는 거라고 일단은 이해하자.
   • 그러면 tsconfig 파일이 생기는데, 여기있는 옵션들로 tsc라는 컴파일러가 타입스크립트 코드를 처리한다.

5. 패키지 제이슨 파일에서 스크립트부분에 "build" : "tsc" 를 추가한다.

   • 이거는 build라는 명령어로 tsc, 타입스크립트 컴파일러를 실행한다는 것

6. ts 파일을 만들고 npm run build라고 하면 같은 이름의 js 파일이 생긴다.
7. js 파일을 보면 use strict라고 해서 코드가 생기는데, 이 코드는 자바스크립트 코드를 strict 모드로 실행할때 사용한다.

   • 좀 더 엄격한 규칙으로 자바스크립트를 실행하고 싶을때 사용한다.
     (스트릭 모드 참고 - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Strict_mode)
   • 이 옵션이 tsconfig 파일에 켜져있어서 항상 켜지는 것이다.
   • 그리고 "start": "node main.js" 이거를 package.json 파일의 스크립트에 추가하면 npm start로 실행할 수 있다.

해당 방법은 tsc를 사용한 컴파일 방법이다. 이 방법외에도 tsx를 사용한 실행방법이 있다. npm i -g tsx를 설치해서 tsx 명령어로 실행시킨다. 프로젝트 규모가 작거나 테스트용 코드라면 tsx를 사용하면 빠르게 작업할 수 있다.

타입스크립트가 실행되는 과정

• 대다수의 프로그래밍 언어는 다음과 같은 과정을 통해 동작한다.
  
• 타입스크립트는 기존 자바스크립트에 문법을 추가해서 사용하는 언어잖아?
• 그런데 웹 브라우저나 node.js는 타입스크립트 코드를 그대로 실행하지 못하고 자바스크립트로 변환된 코드를 실행해야 한다.
• 그래서 이런 변환을 해주는게 tsc, 즉 타입스크립트 컴파일러이다.
• 컴파일러는 컴파일을 하는 프로그램이다. 컴파일은 한 프로그래밍 언어에서 다른 프로그래밍 언어로 번역하는 것을 말한다.
• 즉, 소스 코드를 컴퓨터가 실행할 수 있는 코드나 기계어 형태로 바꾸는 것을 뜻한다.
• 웹개발에서는 트랜스파일(Transpile)이라는 용어를 사용한다. 이것도 프로그래밍 언어를 번역하는 것이지만, 주로 소스 코드를 브라우저나 node.js가 실행할 수 있는 형태로 바꾸는 것을 말한다.
• 즉 TSC는 타입스크립트 코드를 자바스크르립트 코드로 트랜스파일 해주는 프로그램이다.
• 근데 이 뿐만 아니라 트랜스파일 하기전에 타입스크립트 코드를 검사하는데, 이를 타입 검사(Type Check)라고 한다.
• 이 단계에서 잘못된 타입을 사용하거나 오타가 있다면 에러메세지를 띄운다.
• 타입 검사를 통과하면 트랜스파일 차례인데, tsconfig 파일에서 자바스크립트 버전을 설정할 수 있다.
• 이후에 자바스크립트가 만들어졌다면 웹브라우저와 node.js에서 이를 실행한다.
  
• 이 둘에는 자바스크립트 엔진이 있는데. 이걸 통해서 js 코드를 실행한다.
• 추가적으로, 타입 오류가 없는 코드는 컴파일 시 타입검사를 통과해서 타입 관련 문법들은 삭제된 자바스크립트 코드로 변경된다.
  

  참고
  최근에는 Deno를 만들었다. node.js랑 비슷하지만 기본적으로 타입스크립트를 사용하는데, 자체적으로 타입검사랑 트랜스파일링을 해주기 때문에 타입스크립트를 쓰기 위해서 따로 프로젝트 세팅 등이 필요없다.
  링크 참고: https://deno.kr/

타입을 정하는 방법

• 기본적으로 타입을 추측할 수 있는 경우엔 따로 타입을 적어 주지 않아도 타입이 추론된다.
• 변수에 값을 입력하면 변수에 마우스 올렸을때 타입이 적혀있다.
  
• 타입스크립트는 정적 타이핑 언어이다. 변수의 타입이 정해지면 반드시 그 타입을 지켜야한다는 것이다.
• 그래서 처음에 숫자형을 주고 다시 문자형을 주면 에러가 발생한다.
• 그렇다면 타입을 직접주는 방법은?
  • 변수 이름 뒤에 :을 쓰고 타입 이름을 쓰면 된다.
  • 곧바로 값을 할당하지 않을때는 타입만 적어줘도 된다.
    
• 실행하게되면 자바스크립트 코드에서는 타입을 정의하는 부분은 사라지고, 나머지 js 코드들만 남는다.
• 타입은 타입 검사하는데만 쓰이고 실제 코드 실행에는 영향을 주지않는다.

타입 오류 이해하기

• 에러 메세지가 밖에서 안으로 범위를 한단계씩 좁혀가면서 보여준다.
• 길긴 한데, 하나씩 읽어보면 어렵지 않다.
• 처음엔 product랑 newProduct랑 타입이 안맞다는 것이고,
• 두번째 줄은 객체 안에서도 sizes 라는 프로퍼티가 안맞다고 알려주는 것이고,
• 세번째 줄은 구체적으로 어떤 타입이 안맞는지 알려주는것이다.
  • 숫자형을 문자열에 할당할 수 없다는 것이다.
• 마지막은 한 요소를 놓고 비교하도록 더 자세히 들어간 것이다.

  참고
  ts 파일에서 오류가 있다고 하더라도 js파일이 생성될 수 있다! 다만, tsconfig.json 파일에서 설정을 변경해줄 수 있다.
  {
     "compilerOptions" :  {
           "noEmitOnError": true
       }
  }
  위 설정을 사용하시면 에러가 있을때 js 파일을 만들지 않게 된다.

이미지 출처: <한 입 크기로 잘라먹는 타입스크립트>
https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8?inst=68d752f7&utm_source=instructor&utm_medium=referral&utm_campaign=inflearn_%ED%8A%B8%EB%9E%98%ED%94%BD_promotion-link