ts 파일 생성 및 실행
.ts
파일의 생성과 실행은 타입스크립트 개발의 첫 단계입니다. 이 과정을 단계별로 살펴보겠습니다.
텍스트 에디터를 통한 파일 생성
- 텍스트 에디터를 엽니다.
- 새 파일을 만듭니다.
- 다음과 같은 간단한 타입스크립트 코드를 입력합니다:
function greet(name: string): void {
console.log(`Hello, ${name}!`);
}
greet("World");
- 파일을 저장할 때 확장자를
.ts
로 지정합니다(예:hello.ts
)
VSCode에서의 새 파일 만들기
VSCode는 타입스크립트 개발에 매우 적합한 에디터입ㄴ디ㅏ:
- VSCode를 엽니다.
- 파일 메뉴에서 "새 파일"을 선택하거나
Ctrl+N
또는Cmd+N
을 누릅니다. - 다음과 같은 코드를 입력합니다.
function greet(name: string): void {
console.log(`Hello, ${name}!`);
}
greet("World");
- 파일을 저장할 때 확장자를
.ts
로 지정합니다(예:hello.ts
).
VSCode는 타입스크립트에 대한 내장 지원이 있어 자동으로 구문 강조와 인텔리센스를 제공합니다.
컴파일된 JavaScript 파일 실행 방법
타입스크립트 파일을 실행하기 전에 먼저 컴파일해야 합니다:
- 터미널이나 명령 프롬프트를 엽니다.
.ts
파일이 있는 디렉토리로 이동합니다.- 다음 명령어로 타입스크립트 파일을 컴파일합니다.
tsc hello.ts
이 명령어는 hello.js
파일을 생성합니다.
- Node.js를 사용하여 컴파일된 JavaScript 파일을 실행합니다:
node hello.js
이 명령어를 실행하면 콘솔에 "Hello, World!"가 출력됩니다.
추가 팁:
- 여러 개의
.ts
파일을 한 번에 컴파일하려면:
tsc file1.ts file2.ts file3.ts
- 모든
.ts
파일을 컴파일하려면:
tsc *.ts
tsconfig.json
파일을 사용하면 프로젝트 전체를 쉽게 관리할 수 있습니다. 예를 들어:
{
"compilerOptions": {
"target": "ES2018",
"module": "commonjs",
"outDir": "./dist"
},
"include": ["src/**/*"]
}
이 설정은 src
폴더 내의 모든 .ts
파일을 컴파일하고 결과를 dist
폴더에 저장합니다. 이 경우 다음 명령어만으로 전체 프로젝트를 컴파일할 수 있습니다:
tsc
- 개발 중에는 -w 옵션을 사용하여 watch 모드를 활성화할 수 있습니다:
tsc -w hello.ts
이렇게 하면 파일 변경 시 자동으로 다시 컴파일됩니다.
이러한 과정을 통해 타입스크립트 파일을 생성하고 실행하는 기본적인 흐름을 이해할 수 있습니다.
'JavaScript > TypeScript' 카테고리의 다른 글
기본 타입 선언 예제(TypeScript) (1) | 2024.12.19 |
---|---|
tsc 명령어 사용법[TypeScript] (0) | 2024.12.19 |
TypeScript - ECMAScript 표준과의 관계 (0) | 2024.12.19 |
간단한 함수 작성 및 호출(TypeScript) (1) | 2024.12.19 |
TypeScript - 브라우저 호환성 (0) | 2024.12.18 |