🚀 타입스크립트 시작하기

🎯 1. 타입스크립트란?

타입스크립트는 자바스크립트의 슈퍼셋으로, 자바스크립트 코드에 정적 타입 검사를 추가하여 오류를 미리 발견하고 코드의 품질을 향상시킬 수 있게 합니다. 타입스크립트는 자바스크립트로 컴파일되어 실행되기 때문에 자바스크립트와 호환됩니다.

✅ 타입스크립트의 장점

정적 타입 검사: 코드를 작성하면서 타입 오류를 미리 발견할 수 있습니다.
IDE 자동 완성: IDE에서 타입 정보를 활용해 더 나은 자동 완성 기능을 제공합니다.
대규모 프로젝트 관리: 타입 시스템 덕분에 코드가 커져도 유지보수가 용이합니다.
ES6+ 기능 지원: 최신 자바스크립트 기능을 바로 사용할 수 있습니다.

🎯 2. 타입스크립트 설치

타입스크립트를 사용하려면 먼저 설치해야 합니다. 프로젝트 폴더에서 아래 명령어를 실행하여 타입스크립트를 설치합니다.

npm install --save-dev typescript

설치 후, tsconfig.json 파일을 생성하여 프로젝트의 타입스크립트 설정을 할 수 있습니다.

npx tsc --init

이 명령어는 기본적인 타입스크립트 설정 파일을 생성해줍니다.

🎯 3. 타입스크립트 기본 문법

✅ 변수 선언 및 타입 지정

타입스크립트에서는 변수에 타입을 지정할 수 있습니다. 타입 지정은 변수 선언 시 : 뒤에 타입을 작성합니다.

let age: number = 30;
let name: string = "John";
let isActive: boolean = true;

✅ 배열

배열의 타입을 지정할 때는 number[], string[]처럼 배열의 원소 타입을 명시할 수 있습니다.

let numbers: number[] = [1, 2, 3, 4];
let fruits: string[] = ["apple", "banana", "cherry"];

✅ 튜플(Tuple)

튜플은 고정된 수의 원소를 가질 수 있으며, 각 원소의 타입도 지정할 수 있습니다.

let person: [string, number] = ["Alice", 25];

✅ 객체(Object)

객체의 속성 타입을 지정할 때는 객체 리터럴 타입을 사용합니다.

let user: { name: string, age: number } = { name: "Bob", age: 30 };

✅ 함수(Function)

함수의 매개변수와 반환값의 타입을 지정할 수 있습니다.

function greet(name: string): string {
    return "Hello, " + name;
}

🎯 4. 타입스크립트 고급 기능

✅ 인터페이스(Interface)

인터페이스는 객체의 구조를 정의하는 데 사용됩니다. 클래스가 특정 인터페이스를 구현하도록 강제할 수도 있습니다.

interface Person {
    name: string;
    age: number;
}

let employee: Person = { name: "Alice", age: 28 };

✅ 클래스(Class)와 상속(Inheritance)

타입스크립트에서는 클래스에 타입을 지정하고, 상속을 통해 코드 재사용성을 높일 수 있습니다.

class Animal {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    speak(): void {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Animal {
    constructor(name: string) {
        super(name);
    }

    speak(): void {
        console.log(`${this.name} barks.`);
    }
}

let dog = new Dog("Buddy");
dog.speak();  // Buddy barks.

✅ 제네릭(Generics)

제네릭을 사용하면 함수나 클래스가 다양한 타입을 처리할 수 있게 됩니다. 코드 재사용성을 높이고, 타입 안전성을 보장합니다.

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

let numberIdentity = identity(10);  // number
let stringIdentity = identity("Hello");  // string

🎯 5. 타입스크립트 예제 프로젝트: 간단한 Todo List

이제 타입스크립트를 사용하여 간단한 Todo List 애플리케이션을 만들어봅시다.

✅ 1. TodoItem 인터페이스 정의

interface TodoItem {
    id: number;
    task: string;
    completed: boolean;
}

✅ 2. Todo List 클래스 작성

class TodoList {
    private todos: TodoItem[] = [];

    addTodo(task: string): void {
        const newTodo: TodoItem = {
            id: this.todos.length + 1,
            task: task,
            completed: false
        };
        this.todos.push(newTodo);
    }

    completeTodo(id: number): void {
        const todo = this.todos.find(todo => todo.id === id);
        if (todo) {
            todo.completed = true;
        }
    }

    getTodos(): TodoItem[] {
        return this.todos;
    }
}

✅ 3. TodoList 사용하기

const myTodoList = new TodoList();
myTodoList.addTodo("Learn TypeScript");
myTodoList.addTodo("Build a Todo app");

console.log(myTodoList.getTodos());

myTodoList.completeTodo(1);

console.log(myTodoList.getTodos());

✅ 4. 출력 결과

[
    { id: 1, task: "Learn TypeScript", completed: false },
    { id: 2, task: "Build a Todo app", completed: false }
]
[
    { id: 1, task: "Learn TypeScript", completed: true },
    { id: 2, task: "Build a Todo app", completed: false }
]