가벼운 Typescript IDE - Typescript 코드 온라인 실행
여러 파일 편집, 영구 작업 공간, 런타임별 라이브러리, 공유 및 실시간 협업을 지원하는 가벼운 온라인 IDE에서 Typescript 코드를 작성하고 실행하며 디버깅하세요.
💡 실력을 키우고 싶다면 Typescript를 배워보세요
로드 중…
💡 기술을 향상시키고 싶으십니까? 이러한 과정이 도움이 될 수 있습니다. AI 모델이 귀하의 요청을 처리하는 동안 확인해 보세요.
🌀 이 TypeScript 온라인 실행기 소개
CodeUtility TypeScript 실행기는 브라우저에서 바로 TypeScript 코드를 작성하고 실행할 수 있게 해줍니다 — 컴파일러 설정, Node.js 설치, 로컬 환경 준비가 필요 없습니다. 실제 TypeScript 코드를 JavaScript로 컴파일해 안전한 샌드박스 런타임에서 실행합니다.
이 환경은 현재 TypeScript 5.4를 지원하며, 데코레이터, 향상된 타입 추론, 현대적인 ECMAScript 지원 같은 최신 언어 기능을 사용할 수 있습니다.
TypeScript를 배우거나 유틸리티 함수를 테스트하거나, 타입과 인터페이스를 실험하고 있다면, 이 도구는 코드를 빠르게 작성하고 컴파일 및 실행하며 즉각적인 피드백을 받는 상호작용형 워크플로를 제공합니다.
에디터나 로컬 터미널을 오가며 작업할 필요 없이, TypeScript의 타입 시스템을 탐색하거나 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();