타입 스크립트 - 개요 및 개발 환경 구성

타입스크립트

자바스크립트에서는 모든 변수나 객체의 타입을 지정하지 않는다. 따라서 타입 에러가 발생하는 코드를 작성해도 런타임 이전에 알려주지 않는다.
하지만 타입스크립트는 타입 에러가 발생하는 코드를 작성시 즉시 에러를 표시한다.
이러한 장점은 버그를 예방하고 코드 퀄리티를 향상시킬 수 있다.

자바스크립트(동적 타입 언어) - 런타임에서 동작할 때 타입 오류 확인
타입스크립트(정적 타입 언어) - 코드 작성 단계에서 타입 오류 확인

타입스크립트는 자바스크립트의 슈퍼셋, 즉 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어이다.

타입스크립트를 자바스크립트로 변환 후, 브라우저나 Node.js 환경에서 동작한다.

npm 프로젝트 생성

npm init -y

타입 스크립트 설치
여기서 -D 옵션은 개발 의존성으로 설치하는 것

개발 의존성 옵션은 어떨 때 사용하는가?

개발 중에만 필요하고 프로덕션 환경에서는 필요하지 않은 패키지를 사용할 때

npm i -D typescript

root폴더에 tsconfig.json을 생성 후 아래 코드를 작성

{
  "compilerOptions": {
    "strict": true // 타입스크립트를 엄격 모드로 사용
  },
  "include": ["src/**/*.ts"] // src 폴더 아래 모든 파일의 모든 .ts확장자에 타입 스크립트 적용
}

타입스크립트를 적용하면 msg 매개변수가 에러를 표시한다.

msg 매개변수가 any 타입을 갖고 있기 때문이다. 이럴 때는 타입을 지정해줘야 한다.

msg 매개변수를 string 타입으로 지정을 하였고 함수 호출 구문을 보면 string을 제외한 다른 타입을 매개변수로 넘길 시 오류를 표시하는 것을 볼 수 있다.

이러한 오류는 타입스크립트를 사용하여 런타임 이전에 보다 안정적으로 코드를 작성할 수 있게 해주는 장점이 있다.

타입스크립트를 자바스크립트로 변환하는 방법은 package.json에 tsc 구문을 추가하면 된다.

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "tsc": "tsc src/main.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^5.1.6"
  }
}

그 후 터미널에 npm run tsc를 입력하면 main.js가 만들어지는 것을 볼 수 있다.