본문 바로가기
JavaScript/TypeScript

ts 파일 생성 및 실행 [TypeScript]

by GangDev 2024. 12. 19.

ts 파일 생성 및 실행

.ts 파일의 생성과 실행은 타입스크립트 개발의 첫 단계입니다. 이 과정을 단계별로 살펴보겠습니다.

텍스트 에디터를 통한 파일 생성

  1. 텍스트 에디터를 엽니다.
  2. 새 파일을 만듭니다.
  3. 다음과 같은 간단한 타입스크립트 코드를 입력합니다:
function greet(name: string): void {
  console.log(`Hello, ${name}!`);
}

greet("World");
  1. 파일을 저장할 때 확장자를 .ts로 지정합니다(예: hello.ts)

VSCode에서의 새 파일 만들기

VSCode는 타입스크립트 개발에 매우 적합한 에디터입ㄴ디ㅏ:

  1. VSCode를 엽니다.
  2. 파일 메뉴에서 "새 파일"을 선택하거나 Ctrl+N 또는 Cmd+N을 누릅니다.
  3. 다음과 같은 코드를 입력합니다.
function greet(name: string): void {
  console.log(`Hello, ${name}!`);
}

greet("World");
  1. 파일을 저장할 때 확장자를 .ts로 지정합니다(예: hello.ts).

VSCode는 타입스크립트에 대한 내장 지원이 있어 자동으로 구문 강조와 인텔리센스를 제공합니다.

컴파일된 JavaScript 파일 실행 방법

타입스크립트 파일을 실행하기 전에 먼저 컴파일해야 합니다:

  1. 터미널이나 명령 프롬프트를 엽니다.
  2. .ts 파일이 있는 디렉토리로 이동합니다.
  3. 다음 명령어로 타입스크립트 파일을 컴파일합니다.
tsc hello.ts

이 명령어는 hello.js 파일을 생성합니다.

  1. Node.js를 사용하여 컴파일된 JavaScript 파일을 실행합니다:
node hello.js

이 명령어를 실행하면 콘솔에 "Hello, World!"가 출력됩니다.

추가 팁:

  1. 여러 개의 .ts 파일을 한 번에 컴파일하려면:
tsc file1.ts file2.ts file3.ts
  1. 모든 .ts 파일을 컴파일하려면:
tsc *.ts
  1. tsconfig.json 파일을 사용하면 프로젝트 전체를 쉽게 관리할 수 있습니다. 예를 들어:
{
  "compilerOptions": {
    "target": "ES2018",
    "module": "commonjs",
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

이 설정은 src 폴더 내의 모든 .ts 파일을 컴파일하고 결과를 dist 폴더에 저장합니다. 이 경우 다음 명령어만으로 전체 프로젝트를 컴파일할 수 있습니다:

tsc
  1. 개발 중에는 -w 옵션을 사용하여 watch 모드를 활성화할 수 있습니다:
tsc -w hello.ts

이렇게 하면 파일 변경 시 자동으로 다시 컴파일됩니다.

이러한 과정을 통해 타입스크립트 파일을 생성하고 실행하는 기본적인 흐름을 이해할 수 있습니다.