효율적인 웹 개발을 위한 TypeScript의 모든 것

2025-02-09 14:14:19

typescriptjavascriptprogrammingwebDevelopment

TypeScript란 무엇인가?

TypeScript는 마이크로소프트가 개발한 오픈 소스 프로그래밍 언어로, 자바스크립트의 상위 집합으로 볼 수 있습니다. 웹 개발 시 발생할 수 있는 오류를 사전에 방지하고, 코드의 유지보수를 향상시키는 기능을 제공합니다. TypeScript를 사용하면 정적 타입 지정, 객체 지향 프로그래밍(OOP), 제네릭, 인터페이스 등을 지원하여 보다 구조적이고 안전한 코드를 작성할 수 있습니다.

TypeScript의 장점

TypeScript의 주요 장점은 다음과 같습니다:

정적 타입 지정: 코드 작성 시점에서 오류를 사전에 잡아내어 개발 효율성을 높입니다.
개선된 코드 작성 경험: 코드 작성 중 타입 정보를 제공하여 자동 완성 기능이 강화됩니다.
유지보수성 향상: 복잡한 프로젝트에서도 코드를 읽고 관리하기 쉬워집니다.
객체 지향 프로그래밍 지원: 클래스를 활용하여 구조화된 코드를 작성할 수 있습니다.
JavaScript와의 호환성: 기존 JavaScript 코드와 쉽게 통합할 수 있습니다.

TypeScript 기초 문법

기본 데이터 타입

TypeScript에서 사용되는 기본 데이터 타입은 문자열, 숫자, 불리언, undefined, null 등이 있습니다. 타입을 지정하면 잘못된 타입의 값을 할당할 때 컴파일러가 오류를 발생시킵니다.

// 문자열
let fullname: string;
fullname = "홍길동";
// fullname = 10; // 오류 발생

// 숫자
let age: number;
age = 30;

// any: 모든 타입을 허용
let anyType: any;
anyType = 10;
anyType = "다양한";
anyType = true;

객체

TypeScript에서 객체 유형은 기본 유형이 아닌 값들을 나타내기 위해 사용됩니다. 객체의 속성을 정의하고 이러한 속성에 타입을 지정합니다.

let person: { name: string; age: number };
person = { name: "홍길동", age: 20 };

// 선택적 프로퍼티
let person1: { name: string; age?: number };
person1 = { name: "홍길동" };

배열

TypeScript에서는 여러 종류의 배열을 정의할 수 있으며, 배열의 타입을 지정할 수 있습니다.

// any 타입 배열
let arr: any[] = [];
arr.push(3);
arr.push("문자열");
arr.push(true);

// 문자열 타입 배열
let arr2: string[] = ["a", "b", "c"];
arr2.push("d");
// arr2.push(20); // 오류 발생

함수

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

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

function logMessage(message: string): void {
    console.log(message);
}

type functionType = (num1: number, num2: number) => number;
const sumTwoNumbers: functionType = (a, b) => a + b;

유니언(Union)

유니언을 사용하면 하나의 변수에 여러 타입을 허용할 수 있습니다.

let size: string | number;
size = "XL";
size = 30;

const handleInputs = (a: number | string, b: number | string) => {
    if (typeof a === "number" && typeof b === "number") {
        return a + b;
    }
    if (typeof a === "string" && typeof b === "string") {
        return a.concat(b);
    }
    throw new Error("인자는 모두 숫자 또는 문자열이어야 합니다.");
};

열거형(Enum)

열거형은 이름이 있는 고정 값을 정의하기 위해 사용됩니다.

enum Colors {
    RED = "RED",
    BLUE = "BLUE",
    GREEN = "GREEN"
}
let color = Colors.RED; // "RED"를 반환

// 숫자 기반 열거형
enum ColorsNumber {
    RED = 10,
    BLUE,   // 11 자동 할당
}
console.log(ColorsNumber.RED); // 10
console.log(ColorsNumber[11]); // "BLUE"

인터페이스와 타입

인터페이스와 타입은 객체의 구조를 정의하는데 사용됩니다. 인터페이스는 주로 상속과 클래스를 위해 사용되고, 타입은 유니언, 인터섹션 등 다양한 목적으로 사용됩니다.

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

type PersonType = {
    name: string;
    age: number;
};

const person1: PersonInterface = { name: "홍길동", age: 20 };
const person2: PersonType = { name: "철수", age: 22 };

제네릭

제네릭은 다양한 데이터 타입을 처리할 수 있는 재사용 가능한 컴포넌트를 만들 때 유용합니다.

function getFirstElement<ElementType>(arr: ElementType[]): ElementType {
    return arr[0];
}

const numbers = [1, 2, 3];
console.log(getFirstElement(numbers)); // 1

const strings = ["a", "b", "c"];
console.log(getFirstElement(strings)); // "a"

클래스

TypeScript의 클래스는 객체 지향 프로그래밍을 가능하게 합니다. 접근 제한자와 상속, 제네릭 등을 활용할 수 있습니다.

class Person {
    name: string; // public
    protected age: number; // protected
    private weight: number; // private

    constructor(name: string, age: number, weight: number) {
        this.name = name;
        this.age = age;
        this.weight = weight;
    }

    getPersonInfo(): void {
        console.log(`Name: ${this.name}, Age: ${this.age}`);
    }

    private getWeight(): number {
        return this.weight;
    }
}

const person = new Person("홍길동", 30, 70);
person.getPersonInfo(); // 접근 가능
// person.weight; // 오류, private 속성 접근 불가
// person.age; // 오류, protected 속성 접근 불가

TypeScript의 미래

TypeScript는 JavaScript 개발자에게 강력한 도구를 제공합니다. 정적 타입 검사를 통한 오류 예방, 코드 유지보수성 향상, 생산성 증대 등의 이점으로 웹 개발에서 많은 사랑을 받고 있습니다. 앞으로도 다양한 기능 추가와 개선이 기대됩니다.

R_11