WeniVooks

검색
북마크 이동

타입스크립트 베이스캠프

타입스크립트 환경설정

1. 환경설정

타입스크립트를 배우는 목적이 다양하기 때문에 다양한 환경을 소개합니다. 가장 편한 환경에서 시작해보세요.

타입스크립트 개발 환경은 크게 세 가지로 나눌 수 있습니다.

  1. 온라인 플레이그라운드: 설치 없이 바로 사용 가능
  2. 로컬 Node.js 환경: 실제 개발에 가까운 환경
  3. IDE 통합 환경: 본격적인 프로젝트 개발 환경

각각의 장단점을 살펴보고 자신에게 맞는 환경을 선택해보세요.

1.1 위니브 타입스크립트

위니브에서 서비스하고 있는 '위니브 타입스크립트'에서 설치없이 사용해 볼 수 있습니다.

위니브 타입스크립트
1.1.1 주요 기능
  • 설치 불필요: 브라우저에서 바로 실행 가능
  • 폰트 크기 조절: 오른쪽 상단 +와 - 버튼으로 editor와 console의 폰트 크기 조절
  • 실행 단축키: Ctrl + Enter로 코드 실행
  • 테마 변경: 우측상단 토글로 화이트모드와 다크모드 선택
  • 코드 스니펫: log, for, if, async 등 간단한 단축키 제공
1.1.2 사용법
  1. 사이트에 접속하면 간단한 샘플 코드가 작성되어 있습니다.
  2. Ctrl + Enter을 눌러서 실행해보겠습니다.
타입스크립트 플레이그라운드 실행 결과
1.1.3 활용 예시
// 간단한 타입스크립트 코드 테스트
function greet(name: string): string {
  return `안녕하세요, ${name}님!`;
}
 
console.log(greet("타입스크립트"));
console.log(greet(123)); // 오류: 숫자는 string 타입이 아님
// 간단한 타입스크립트 코드 테스트
function greet(name: string): string {
  return `안녕하세요, ${name}님!`;
}
 
console.log(greet("타입스크립트"));
console.log(greet(123)); // 오류: 숫자는 string 타입이 아님

해당 도구는 설치 없이 간편하게 테스트 해보는 용도로 사용하기 적합한 도구입니다.

1.2 타입스크립트 플레이그라운드

타입스크립트 공식 홈페이지에서 제공하는 플레이그라운드입니다. 아래 링크를 통해 접속할 수 있습니다.

타입스크립트 플레이그라운드
1.2.1 공식 플레이그라운드의 장점
  1. 최신 기능: 최신 타입스크립트 기능을 사용할 수 있습니다.
  2. 컴파일 옵션: 다양한 컴파일러 옵션을 설정할 수 있습니다.
  3. 예제 코드: 다양한 예제 코드를 제공합니다. Example 탭에서 다양한 예제를 확인할 수 있습니다.
  4. JavaScript 변환: 타입스크립트 코드가 어떻게 JavaScript로 변환되는지 실시간으로 확인 가능합니다. 오른쪽 탭에 .JS 탭을 클릭하면 변환된 JavaScript 코드를 볼 수 있습니다.
1.2.2 사용 팁

아래 코드를 입력하고 오른쪽에서 .JS 탭을 클릭해 변환된 JavaScript 코드를 확인해보세요.

const num: number[] = [1, 2, 3];
const num: number[] = [1, 2, 3];

아래 코드를 실행하고 변환된 JavaScript 코드를 확인해보세요.

// 타입스크립트 플레이그라운드에서 테스트해보기
interface User {
  name: string;
  age: number;
  email?: string; // 선택적 속성
}
 
function createUser(userData: User): User {
  return {
    name: userData.name,
    age: userData.age,
    email: userData.email || "이메일 없음"
  };
}
 
const user = createUser({
  name: "김타입",
  age: 25
});
 
console.log(user);
// 타입스크립트 플레이그라운드에서 테스트해보기
interface User {
  name: string;
  age: number;
  email?: string; // 선택적 속성
}
 
function createUser(userData: User): User {
  return {
    name: userData.name,
    age: userData.age,
    email: userData.email || "이메일 없음"
  };
}
 
const user = createUser({
  name: "김타입",
  age: 25
});
 
console.log(user);

이처럼 다양한 코드를 실험해보고 타입스크립트가 어떻게 동작하는지 이해하는 데 도움이 됩니다.

1.3 Node 환경 세팅

실제 개발 환경에서는 로컬에서 타입스크립트를 실행할 수 있어야 합니다. Node.js를 설치하고, 타입스크립트를 설치하여 로컬 환경에서 작성할 수 있습니다.

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

이렇게 저장하고 node 001.ts로 실행하면 hello world가 출력되지만 이는 TypeScript가 아닌 JavaScript 코드로 해당 코드를 실행시킨 것입니다. 그래서 반드시 tsx와 같은 것을 사용해야 합니다.

먼저 Node.js가 설치되어 있어야 합니다. 아래 명령어로 확인해보세요.

node --version
npm --version
node --version
npm --version
1.3.2 tsx 사용하기

tsx는 타입스크립트를 바로 실행할 수 있는 가장 손쉬운 방법입니다. 다만 문법적 오류가 발생했을 때에도 실행이 되기 때문에 주의가 필요합니다.

# tsx와 typescript 전역 설치
npm install -g tsx typescript
# tsx와 typescript 전역 설치
npm install -g tsx typescript

설치를 다하면 아래 명령어로 설치를 확인할 수 있습니다.

npm list -g
npm list -g

맥북은 sudo를 붙여 실행해야 할 수 있습니다. 지금 터미널에서 입력한 명령어는 아래 모듈 설치할 때에도 동일하게 적용됩니다.

hello.ts 파일을 생성하고 아래 코드를 작성합니다.

// hello.ts
function greet(name: string): string {
  return `안녕하세요, ${name}님!`;
}
 
const message = greet("타입스크립트");
console.log(message);
 
// 타입 오류 예시 (주석 해제하면 오류 발생)
// console.log(greet(123));
// hello.ts
function greet(name: string): string {
  return `안녕하세요, ${name}님!`;
}
 
const message = greet("타입스크립트");
console.log(message);
 
// 타입 오류 예시 (주석 해제하면 오류 발생)
// console.log(greet(123));

아래 명령어로 실행할 수 있습니다.

tsx hello.ts
tsx hello.ts

window의 경우 보안 옵션 때문에 tsx 명령어가 작동하지 않을 수 있습니다. 이 경우 파워쉘을 관리자 권한으로 실행하여 아래 명령어로 실행해보세요.

Set-ExecutionPolicy RemoteSigned
Set-ExecutionPolicy RemoteSigned

[A]모두 예를 선택하고 다시 실행해보세요.

1.3.2 ts-node 사용하기

ts-node는 더 많은 옵션을 제공하며 실무에서 많이 사용됩니다. 수업은 ts-node를 기준으로 진행합니다.

# ts-node와 typescript 전역 설치
npm install -g ts-node typescript
# ts-node와 typescript 전역 설치
npm install -g ts-node typescript

tsconfig.json 파일을 생성해야 합니다.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2020",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "skipLibCheck": true
  },
  "ts-node": {
    "esm": false
  }
}
{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2020",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "skipLibCheck": true
  },
  "ts-node": {
    "esm": false
  }
}

같은 hello.ts 파일을 아래 명령어로 실행할 수 있습니다.

ts-node hello.ts
ts-node hello.ts
1.3.3 컴파일 후 실행하기

타입스크립트를 JavaScript로 컴파일한 후 실행하는 방법도 있습니다.

# 타입스크립트 파일을 JavaScript로 컴파일
tsc hello.ts
 
# 생성된 JavaScript 파일 실행
node hello.js
# 타입스크립트 파일을 JavaScript로 컴파일
tsc hello.ts
 
# 생성된 JavaScript 파일 실행
node hello.js
환경별 비교
방법장점단점사용 시점
tsx간단하고 빠름제한적인 설정학습, 간단한 스크립트
ts-node많은 옵션 제공설정 파일 필요실무 개발
tsc + node명확한 컴파일 과정두 단계 필요프로덕션 빌드
1.1 타입스크립트란1.3 타입스크립트를 사용하는 이유