타입스크립트와 브라우저 API 활용: 웹 개발의 새로운 지평 🚀

자바스크립트 예제:

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

console.log(add(5, 10));  // 15
console.log(add("5", "10"));  // "510"

타입스크립트 예제:

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

console.log(add(5, 10));  // 15
console.log(add("5", "10"));  // 컴파일 오류!

function identity<T>(arg: T): T {
    return arg;
}

let output = identity<string>("myString");  // 타입은 'string'

interface Person {
    firstName: string;
    lastName: string;
    age?: number;  // 선택적 속성
}

function greet(person: Person) {
    console.log(`Hello, ${person.firstName} ${person.lastName}`);
}

let user = { firstName: "John", lastName: "Doe" };
greet(user);  // "Hello, John Doe"

type StringOrNumber = string | number;

function printId(id: StringOrNumber) {
    console.log(`ID is: ${id}`);
}

printId(101);  // OK
printId("202");  // OK

type Name = { name: string };
type Age = { age: number };
type Person = Name & Age;

let person: Person = { name: "John", age: 30 };  // OK

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

// TypeScript로 DOM 조작하기
const button = document.createElement('button');
button.textContent = '클릭하세요!';
button.addEventListener('click', () => {
    alert('버튼이 클릭되었습니다!');
});
document.body.appendChild(button);

// TypeScript로 Fetch API 사용하기
interface User {
    id: number;
    name: string;
    email: string;
}

fetch('https://api.example.com/users')
    .then(response => response.json())
    .then((data: User[]) => {
        console.log(data);
    })
    .catch(error => console.error('Error:', error));

// TypeScript로 Web Storage API 사용하기
interface UserPreferences {
    theme: 'light' | 'dark';
    fontSize: number;
}

const savePreferences = (prefs: UserPreferences): void => {
    localStorage.setItem('userPrefs', JSON.stringify(prefs));
}

const loadPreferences = (): UserPreferences | null => {
    const prefs = localStorage.getItem('userPrefs');
    return prefs ? JSON.parse(prefs) : null;
}

// 사용 예
savePreferences({ theme: 'dark', fontSize: 16 });
const userPrefs = loadPreferences();
console.log(userPrefs);  // { theme: 'dark', fontSize: 16 }

// TypeScript로 Geolocation API 사용하기
interface Position {
    latitude: number;
    longitude: number;
}

const getLocation = (): Promise<Position> => {
    return new Promise((resolve, reject) => {
        if (!navigator.geolocation) {
            reject(new Error('Geolocation is not supported by your browser'));
        } else {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    resolve({
                        latitude: position.coords.latitude,
                        longitude: position.coords.longitude
                    });
                },
                (error) => {
                    reject(error);
                }
            );
        }
    });
}

// 사용 예
getLocation()
    .then((position: Position) => {
        console.log(`Latitude: ${position.latitude}, Longitude: ${position.longitude}`);
    })
    .catch((error: Error) => {
        console.error('Error:', error.message);
    });

// TypeScript로 Canvas API 사용하기
class Circle {
    constructor(private ctx: CanvasRenderingContext2D, private x: number, private y: number, private radius: number) {}

    draw() {
        this.ctx.beginPath();
        this.ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        this.ctx.fillStyle = 'red';
        this.ctx.fill();
        this.ctx.closePath();
    }
}

const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d');

if (ctx) {
    const circle = new Circle(ctx, 100, 100, 50);
    circle.draw();
}

// TypeScript로 Web Audio API 사용하기
class SoundGenerator {
    private context: AudioContext;
    private oscillator: OscillatorNode | null = null;

    constructor() {
        this.context = new AudioContext();
    }

    play(frequency: number) {
        this.oscillator = this.context.createOscillator();
        this.oscillator.type = 'sine';
        this.oscillator.frequency.setValueAtTime(frequency, this.context.currentTime);
        this.oscillator.connect(this.context.destination);
        this.oscillator.start();
    }

    stop() {
        if (this.oscillator) {
            this.oscillator.stop();
            this.oscillator.disconnect();
        }
    }
}

// 사용 예
const generator = new SoundGenerator();
generator.play(440);  // A4 음 재생
setTimeout(() => generator.stop(), 1000);  // 1초 후 정지

project-root/
├── src/
│   ├── index.ts
│   ├── weather.ts
│   └── map.ts
├── public/
│   └── index.html
├── package.json
└── tsconfig.json

{
  "name": "weather-map-app",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "typescript": "^4.5.5",
    "ts-loader": "^9.2.6",
    "webpack": "^5.68.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }
}

{
  "compilerOptions": {
    "target": "es6",
    "module": "es6",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": ["src"]
}

import { getWeather } from './weather';
import { drawMap } from './map';

interface Location {
  latitude: number;
  longitude: number;
}

function getLocation(): Promise<Location> {
  return new Promise((resolve, reject) => {
    if (!navigator.geolocation) {
      reject(new Error('Geolocation is not supported by your browser'));
    } else {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          resolve({
            latitude: position.coords.latitude,
            longitude: position.coords.longitude
          });
        },
        (error) => {
          reject(error);
        }
      );
    }
  });
}

async function init() {
  try {
    const location = await getLocation();
    const weather = await getWeather(location);
    drawMap(location, weather);
  } catch (error) {
    console.error('Error:', error);
  }
}

init();

interface Location {
  latitude: number;
  longitude: number;
}

interface Weather {
  temperature: number;
  description: string;
}

export async function getWeather(location: Location): Promise<Weather> {
  const apiKey = 'your_api_key_here';
  const url = `https://api.openweathermap.org/data/2.5/weather?lat=${location.latitude}&lon=${location.longitude}&appid=${apiKey}&units=metric`;

  const response = await fetch(url);
  if (!response.ok) {
    throw new Error('Failed to fetch weather data');
  }

  const data = await response.json();
  return {
    temperature: data.main.temp,
    description: data.weather[0].description
  };
}

interface Location {
  latitude: number;
  longitude: number;
}

interface Weather {
  temperature: number;
  description: string;
}

export function drawMap(location: Location, weather: Weather): void {
  const canvas = document.getElementById('map') as HTMLCanvasElement;
  const ctx = canvas.getContext('2d');

  if (ctx) {
    // 배경 그리기
    ctx.fillStyle = '#87CEEB';  // 하늘색
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 위치 표시
    ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.arc(canvas.width / 2, canvas.height / 2, 5, 0, Math.PI * 2);
    ctx.fill();

    // 날씨 정보 표시
    ctx.fillStyle = 'black';
    ctx.font = '14px Arial';
    ctx.fillText(`Temperature: ${weather.temperature}°C`, 10, 20);
    ctx.fillText(`Weather: ${weather.description}`, 10, 40);
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather Map</title>
    <style>
        canvas { border: 1px solid black; }
    </style>
</head>
<body>
    <h1>Weather Map</h1>
    <canvas id="map" width="400" height="400"></canvas>
    <script src="bundle.js"></script>
</body>
</html>

npm install
npm start