온라인 TypeScript 컴파일러 – 브라우저에서 TypeScript 실행하기

우리의 온라인 TypeScript 컴파일러를 사용하여 브라우저에서 즉시 TypeScript 코드를 작성, 컴파일, 실행하세요. TypeScript를 배우거나 즉석에서 코드를 테스트하려는 개발자에게 완벽합니다.

버전

샘플

🚀 총 실행 ( 이번 달)

📈 요즘 뜨는 Typescript, 지금 시작하세요

💡 초보자를 위한 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("Positive");
} else if (x < 0) {
  console.log("Negative");
} else {
  console.log("Zero");
}

switch (x) {
  case 1:
    console.log("One");
    break;
  case 2:
    console.log("Two");
    break;
  default:
    console.log("Other");
}

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("Hello, " + 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("Something went wrong");
} catch (e) {
  console.error(e.message);
}

10. 파일 입출력 (Node.js 전용)

Node.js fs 모듈을 사용하여 파일을 읽고 씁니다.

import * as fs from "fs";

fs.writeFileSync("file.txt", "Hello File");
const content = fs.readFileSync("file.txt", "utf-8");
console.log(content);

11. 문자열 조작

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

let str = "Hello World";
console.log(str.length);
console.log(str + "!");
console.log(str.includes("World"));

12. 클래스 및 객체

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

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  greet() {
    console.log(\`Hi, I'm \${this.name}\`);
  }
}

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