TypeScript CLI 실행기 온라인

CLI 환경에서 TypeScript 코드를 온라인으로 테스트하세요. 브라우저에서 바로 실행, 설정 없이 학습과 디버깅에 최적입니다.

버전

샘플

🚀 총 실행 ( 이번 달)

💡 실력을 키우고 싶다면 Typescript를 배워보세요

🌀 이 TypeScript 온라인 실행기 소개

CodeUtility TypeScript 실행기는 브라우저에서 바로 TypeScript 코드를 작성하고 실행할 수 있게 해줍니다 — 컴파일러 설정, Node.js 설치, 로컬 환경 준비가 필요 없습니다. 실제 TypeScript 코드를 JavaScript로 컴파일해 안전한 샌드박스 런타임에서 실행합니다.

이 환경은 현재 TypeScript 5.4를 지원하며, 데코레이터, 향상된 타입 추론, 현대적인 ECMAScript 지원 같은 최신 언어 기능을 사용할 수 있습니다.

TypeScript를 배우거나 유틸리티 함수를 테스트하거나, 타입과 인터페이스를 실험하고 있다면, 이 도구는 코드를 빠르게 작성하고 컴파일 및 실행하며 즉각적인 피드백을 받는 상호작용형 워크플로를 제공합니다.

에디터나 로컬 터미널을 오가며 작업할 필요 없이, TypeScript의 타입 시스템을 탐색하거나 TypeScript가 JavaScript로 어떻게 컴파일되는지 확인하려는 개발자에게 완벽합니다.

💡 이 도구 사용 방법

1. 에디터 상단의 드롭다운에서 사용 가능한 TypeScript 버전(5.4)을 선택하세요.
2. 에디터 영역에 TypeScript 코드를 작성하거나 붙여넣으세요 — 타입, 인터페이스, 제네릭 모두 가능합니다.
3. 실행을 클릭해 코드를 컴파일하고 실행한 뒤, 아래 콘솔에서 출력을 확인하세요.
4. 실행 중에는 중지 버튼이 표시됩니다 — 클릭하여 실행을 조기에 종료할 수 있습니다.
5. 코드 자동 수정을 사용해 문법이나 들여쓰기 문제를 자동으로 고치세요.
6. 수정 후에는 수정 내역 버튼이 나타납니다 — 클릭해 최근 수정 사항을 확인하세요.
7. 로컬 파일을 에디터로 업로드하거나 현재 코드를 다운로드할 수도 있습니다.
8. 안정성과 공정성을 위해 각 실행은 최대 20초 후 타임아웃됩니다.

🧠 팁: TypeScript 실행기는 백그라운드에서 코드를 자동으로 JavaScript로 컴파일합니다 — 정적 타이핑과 컴파일 타임 안전성을 누리면서 실제 실행 동작을 바로 시험해 보세요.

💡 초보자를 위한 TypeScript 기초 가이드

1. 변수 선언

TypeScript는 let, const와 타입 어노테이션으로 정적 타이핑을 제공합니다.

let x: number = 10;
const pi: number = 3.14;
let name: string = "Alice";
let isActive: boolean = true;

2. 조건문 (if / switch)

분기에는 if, else if, else를 사용하세요. 여러 값을 처리할 때는 switch가 유용합니다.

let x = 5;
if (x > 0) {
  console.log("양수");
} else if (x < 0) {
  console.log("음수");
} else {
  console.log("0");
}

switch (x) {
  case 1:
    console.log("하나");
    break;
  case 2:
    console.log("둘");
    break;
  default:
    console.log("기타");
}

3. 반복문

반복에는 for, while, for...of를 사용합니다.

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

let i = 5;
while (i > 0) {
  console.log(i);
  i--;
}

4. 배열

배열은 대괄호 []로 정의합니다.

let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ["Alice", "Bob"];
console.log(numbers[1]);

5. 배열 조작

push, splice, filter 같은 내장 메서드를 사용하세요.

let arr = [10, 20, 30];
arr.push(40);          // 뒤에 추가
arr.splice(1, 1);      // 두 번째 요소 제거
console.log(arr);

6. 콘솔 입출력

console.log을 사용해 콘솔에 출력을 표시합니다.

const name: string = "Alice";
console.log("안녕하세요, " + name);

7. 함수

매개변수와 반환값에 타입을 지정해서 함수를 선언하세요.

function add(a: number, b: number): number {
  return a + b;
}

console.log(add(3, 5));

8. 맵

키-값 구조에는 일반 객체나 Map을 사용할 수 있습니다.

const m = new Map<string, number>();
m.set("Alice", 25);
console.log(m.get("Alice"));

9. 예외 처리

에러 처리는 try와 catch를 사용하세요.

try {
  throw new Error("문제가 발생했습니다");
} catch (e) {
  console.error(e.message);
}

10. 파일 I/O (Node.js 전용)

파일 읽기/쓰기는 Node.js의 fs 모듈을 사용합니다.

import * as fs from "fs";

fs.writeFileSync("file.txt", "안녕, 파일");
const content = fs.readFileSync("file.txt", "utf-8");
console.log(content);

11. 문자열 처리

length, concat, includes 같은 문자열 메서드를 사용합니다.

let str = "안녕 세상";
console.log(str.length);
console.log(str + "!");
console.log(str.includes("세상"));

12. 클래스와 객체

TypeScript는 객체지향 프로그래밍을 지원합니다.

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  greet() {
    console.log(`안녕, 내 이름은 ${this.name}`);
  }
}

const p = new Person("Alice");
p.greet();