TypeScript 기본 지식 및 세팅 방법 (Feat. VSCode)

본 글은 제로초님의 강의 [리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편 을 듣고 스스로 정리한 내용임을 밝힙니다.

들어가며

이번 포스팅에서는 타입스크립트의 기본 문법을 배우기에 앞서, 타입스크립트의 기본 지식 및 VSCode에서의 세팅 방법에 대해 다루어보도록 하겠다.

타입스크립트 기본 지식

타입스크립트란

타입스크립트란 간단히 말하면 자바스크립트의 변수, 함수의 반환형/매개변수에 타입을 입힌 언어이다.

타입스크립트를 써야 하는 이유

타입스크립트는 버그를 사전에 예방할 수 있다.

아래 자바스크립트로 쓰여진 sum 함수의 예를 보자.

//JS
function sum(num1, num2) {
  return num1 + num2;
}

sum('10', '20') // 1020

두 숫자를 매개변수로 받아 더한값을 반환하려는 의도로 쓰여진 위 sum 함수의 경우, 문자열이 매개변수로 들어와도 에러를 뱉지 않고 의도하지 않은 결과값을 반환한다.

타입스크립트를 사용하면 위와 같은 의도하지 않은 동작을 예방할 수 있다.

//TS
function sum(num1: number, num2: number): number {
  return num1 + num2;
}

sum(10, '20'); // Argument of type 'string' is not assignable to parameter of type 'number'.

타입스크립트의 역할

두 가지 역할이 있다.

1. TS코드를 JS코드로 변환

• typescript는 최종적으로 javascript로 변환된다.
• 순전한 typescript 코드를 돌릴 수 있는 것은 deno이나 대중화되지가 않았다.
  • 실무에서도 거의 사용하지 않는다고 한다.
• 브라우저, 노드는 모두 js 파일을 실행한다.

2. 코드 자체의 타입을 검사

• 소스코드의 타입을 검사해서 문법상에 오류가 있다면 에러를 뱉어준다.

하지만 이 두 가지 역할은 각각 독립적이다. 타입의 검사에 실패하더라도(에러가 있어도) TS->JS로 변환할 수 있다.

기본 세팅 - VSCode

VSCode와 Node.js가 설치되어 있다고 가정

타입스크립트 설치 및 실행 명령어

• npm init -y

  • 해당 경로가 Node 프로젝트가 됨
  • package.json 파일이 생김
    • Node 프로젝트의 설정들을 모두 모아둔 파일
  • npm 명령어들을 이 프로젝트에서 쓸 수 있음

• npm i typescript

  • typescript 설치
  • typescript를 설치하면 tsc 명령어를 쓸 수 있음

• npx tsc --init

  • tsconfig.json 파일이 생김
  • 타입스크립트를 사용하려면 반드시 있어야 하는 파일
  • tsc는 tsconfig.json(tsc --init 시 생성)에 따라 ts 코드를 js(tsc 시 생성)로 바꿔준다. 인풋인 ts와 아웃풋인 js 모두에 영향을 끼치므로 tsconfig.json 설정을 반드시 봐야한다.

• npx tsc --noEmit

  • terminal창에 타입 검사한 결과값을 보여 줌
  • VSCode나 WebStorm의 경우 자동으로 계속 해 줌

• npx tsc

  • ts파일 -> js파일 변환
  • 타입 검사에 에러가 있어도 변환됨

tsconfig.json 세팅

기본 설정 (최소한의 설정)

• "allowJs": true
  • 타입스크립트와 자바스크립트를 동시에 쓸 수 있음 (Js->Ts로 전환하는 경우 유용)
• "strict": true
  • 모든 엄격한 타입-체킹 옵션 활성화
• "forceConsistentCasingInFileNames": true
  • 대소문자를 꼭 지켜서만 import 할 수 있도록 하는 옵션
  • import 할 때 윈도우 파일의 경우 예를 들어 first.ts 라고 입력해도 First.ts 파일을 import 할 수 있음
  • 리눅스 맥에서는 불가
  • 나중에 배포할 때 문제가 생길 수 있기 때문에 애초에 이 옵션을 켜놓고 대소문자를 엄격하게 지킬 수 있도록 항상 true로 해 두는게 좋음
• "skipLibCheck": true
  • 라이브러리 체킹을 건너뛰라는 말
  • 다른 패키지를 다운받아서 사용할 때 거의 .d.ts라는 파일이 있음
  • 이건 그 패키지의 타입을 싹 정리해놓은 파일
  • 이 모든것을 검사하면 컴파일에 시간이 너무 올래 걸림
  • 그래서 실제로 쓰는 타입만 검사
  • 항상 켜 두도록 할 것

위 설정들은 타입스크립트로 코드를 작성해 나감에 있어서 최소한의 설정이다.
컴파일을 하려고 할 때 문제가 발생하는 경우 구글링을 통해서 문제를 해결 해 나가도록 하자!