TypeScript에 대해서 하나씩 차근차근 배우면서 작성하는 글입니다.

📌 TypeScript 환경 구축

Node.js 설치

TypeScript를 사용하기 위해서는 먼저 Node.js가 설치되어 있어야 합니다. Node.js는 JavaScript를 실행할 수 있는 서버 사이드 런타임입니다.

Node.js 공식 홈페이지

해당 링크에 접속하면 두가지 버전이 있는데 LTS 버전을 다운받으시면 됩니다.

설치가 완료되면 터미널(또는 명령 프롬프트)에서 다음 명령어를 실행하여 Node.js가 정상적으로 설치되었는지 확인합니다.

node -v

TypeScript 설치

Node.js가 설치되었으면, 이제 타입스크립트를 설치할 차례입니다. NPM(Node Package Manager)을 이용하여 타입스크립트를 설치합니다. 터미널에서 다음 명령어를 실행하여 전역(global)으로 설치합니다.

npm install -g typescript

설치가 완료되면 다음 명령어를 실행하여 타입스크립트가 정상적으로 설치되었는지 확인할 수 있습니다.

tsc -v

tsconfig.json 파일 생성

프로젝트 디렉토리로 이동한 후, tsc --init 명령어를 사용하여 기본 tsconfig.json 파일을 생성합니다

tsc --init

tsconfig.json 파일 설정

tsconfig.json 파일은 타입스크립트 프로젝트의 구성 파일로, 컴파일러 옵션 및 프로젝트 설정을 정의합니다. 생성된 tsconfig.json 파일을 열어 필요한 설정을 수정하고 저장할 수 있습니다.

예를 들어, outDir 옵션을 설정하여 컴파일된 JavaScript 파일이 저장될 디렉토리를 지정할 수 있습니다.

{
  "compilerOptions": {
    "outDir": "dist",
    // ...
  }
}

이제 타입스크립트 환경이 구축되었으며, 프로젝트 디렉토리에서 타입스크립트 파일(*.ts)을 작성하고 컴파일할 수 있습니다.

📌 TypeScript 파일 컴파일

TypeScript 파일 작성

우선 타입스크립트 파일을 작성해야겠죠?!
간단한 .ts 파일을 작성하고 컴파일 방법에 대해서 알아보겠습니다.
다음은 예시 코드입니다.

// app.ts
function hello(name: string): string {
  return `Hello, ${name}!`;
}

console.log(hello("TypeScript"));

위에 예시 코드를 확인해보면 JavaScript와 매우 유사하지만 차이점도 확실히 존재합니다. 이는 추후에 다시 알아보도록 하겠습니다!

TypeScript 파일은 브라우저에 바로 적용할 수 없어서 컴파일 후 JavaScript 파일로 변환하는 작업이 필요합니다.

TypeScript 파일 컴파일

app.ts 파일을 컴파일하려면 터미널에서 다음 명령어를 실행합니다.

tsc app.ts

이 명령어는 타입스크립트 파일을 JavaScript 파일로 변환합니다. 컴파일이 완료되면 프로젝트 디렉토리에 app.js 파일이 생성됩니다. 이 파일은 컴파일된 JavaScript 코드를 포함하고 있습니다.

tsc -w

tsc -w 또는 tsc --watch 명령어는 타입스크립트 컴파일러를 "감시(watch)" 모드로 실행합니다. 이 모드에서 컴파일러는 타입스크립트 파일의 변경을 지속적으로 감시하고, 파일이 수정되고 저장될 때마다 자동으로 컴파일을 수행합니다.

"감시" 모드를 사용하면 개발 과정에서 시간을 절약할 수 있습니다. 일반적으로 타입스크립트 파일을 수정할 때마다 수동으로 컴파일을 다시 실행해야 하지만, "감시" 모드를 사용하면 파일을 저장하는 즉시 컴파일이 이루어지므로 개발 흐름이 더욱 원활해집니다.

tsc -w 명령어를 사용하여 "감시" 모드를 실행하려면 터미널에서 다음 명령어를 입력하면 됩니다.

tsc -w

위 명령어를 실행하면 컴파일러가 현재 디렉토리의 타입스크립트 파일 및 하위 디렉토리의 모든 타입스크립트 파일을 감시하기 시작합니다. tsconfig.json 파일이 있는 경우, 해당 파일에 정의된 구성에 따라 컴파일러가 동작합니다.

파일을 수정하고 저장하면, 컴파일러가 자동으로 컴파일을 수행하고 변경 사항을 반영한 JavaScript 파일을 생성합니다.

"감시" 모드를 종료하려면 터미널에서 Ctrl + C를 누르면 감시 모드가 종료됩니다.

📌 TypeScript 설치 시 오류

tsc : 이 시스템에서 스크립트를 실행할 수 없으므로
C:\Users\User\AppData\Roaming\npm\tsc.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(h
ttps://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.
위치 줄:1 문자:1
+ tsc --init
+ ~~~
    + CategoryInfo          : 보안 오류: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

TypeScript 설치 도중 이런 오류가 발생한다면 아래 방법을 참고하시면 됩니다!

1. 관리자 권한으로 PowerShell을 실행하세요.

   • 검색 창에서 'PowerShell'을 검색한 후, 마우스 오른쪽 버튼으로 클릭하여 "관리자 권한으로 실행"을 선택합니다.

2. 관리자 권한으로 실행된 PowerShell에서 다음 명령어를 입력합니다.

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

3. 실행 정책을 변경하려는지 묻는 메시지가 표시되면, Y를 입력하고 Enter 키를 눌러 변경을 허용합니다.