[React] TypeScript (+차이)

TypeScript

TypeScript는 Microsoft에서 개발한 JavaScript의 슈퍼셋 프로그래밍 언어다. JavaScript에 정적 타입을 추가하여 코드의 안정성과 가독성을 높여주며, 대규모 애플리케이션 개발에 특히 유용하다.

 

기본 타입 시스템

TypeScript의 가장 큰 특징은 정적 타입 시스템이다. JavaScript의 동적 타입과는 달리, 변수와 함수의 타입을 명시적으로 선언할 수 있다.

 

// 기본 타입 선언
let name: string = "홍길동";
let age: number = 25;
let isStudent: boolean = true;
let numbers: number[] = [1, 2, 3, 4, 5];
let tuple: [string, number] = ["홍길동", 25];

// 함수에서의 타입 사용
function add(x: number, y: number): number {
    return x + y;
}

 

 

인터페이스와 타입 별칭

인터페이스는 객체의 구조를 정의하는 데 사용되며, 코드의 재사용성과 유지보수성을 높여준다.

// 인터페이스 정의
interface User {
    name: string;
    age: number;
    email?: string;  // 선택적 속성
}

// 인터페이스 구현
class Student implements User {
    constructor(
        public name: string,
        public age: number,
        public studentId: string
    ) {}
}

// 타입 별칭
type Point = {
    x: number;
    y: number;
};

const point: Point = { x: 10, y: 20 };

 

 

제네릭 프로그래밍

제네릭을 사용하면 다양한 타입에 대해 재사용 가능한 컴포넌트를 작성할 수 있다.

// 제네릭 함수
function getFirstElement<T>(arr: T[]): T | undefined {
    return arr[0];
}

// 제네릭 클래스
class Queue<T> {
    private items: T[] = [];

    enqueue(item: T): void {
        this.items.push(item);
    }

    dequeue(): T | undefined {
        return this.items.shift();
    }
}

 

고급 타입과 유틸리티 타입

TypeScript는 복잡한 타입 조작을 위한 다양한 고급 기능을 제공한다.

// 유니온 타입
type Status = "pending" | "approved" | "rejected";

// 타입 가드
function isString(value: any): value is string {
    return typeof value === "string";
}

// 유틸리티 타입
interface Todo {
    title: string;
    description: string;
    completed: boolean;
}

// Partial: 모든 속성을 선택적으로 만듦
type PartialTodo = Partial<Todo>;

// Pick: 특정 속성만 선택
type TodoPreview = Pick<Todo, "title" | "completed">;

 

 

데코레이터

데코레이터는 클래스, 메서드, 속성 등에 메타데이터를 추가하거나 동작을 수정할 수 있게 해준다.

// 클래스 데코레이터
function Logger(target: Function) {
    console.log(`클래스 ${target.name}가 생성되었습니다.`);
}

@Logger
class Person {
    constructor(public name: string) {}
}

// 메서드 데코레이터
function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const original = descriptor.value;
    descriptor.value = function(...args: any[]) {
        console.log(`메서드 ${propertyKey} 호출`);
        return original.apply(this, args);
    };
    return descriptor;
}

 

모듈 시스템

TypeScript는 ES6 모듈 시스템을 완벽하게 지원하며, 코드를 모듈화하여 관리할 수 있다.

// 모듈 내보내기
export interface Config {
    apiUrl: string;
    timeout: number;
}

export class ApiClient {
    constructor(private config: Config) {}
}

// 모듈 가져오기
import { Config, ApiClient } from './api';

 

 

TypeScript는 단순히 타입을 추가한 것을 넘어서, 객체지향 프로그래밍을 위한 다양한 기능을 제공하며, 대규모 웹 애플리케이션 개발에 있어 필수적인 도구가 되어가고 있다. 특히 IDE의 강력한 자동 완성과 타입 체크 기능을 통해 개발 생산성을 크게 향상시킬 수 있다.

 

JavaScript와 TypeScript 문법 비교

변수 선언과 타입 지정

JavaScript에서는 변수를 선언할 때 타입을 명시하지 않지만, TypeScript에서는 타입을 명시적으로 선언할 수 있다.

// JavaScript
let name = "홍길동";
let age = 25;
let items = ["사과", "바나나"];
let user = { name: "홍길동", age: 25 };

// TypeScript
let name: string = "홍길동";
let age: number = 25;
let items: string[] = ["사과", "바나나"];
let user: { name: string; age: number } = { name: "홍길동", age: 25 };

 

함수 정의

// JavaScript
function add(x, y) {
    return x + y;
}

const multiply = (x, y) => x * y;

// TypeScript
function add(x: number, y: number): number {
    return x + y;
}

const multiply = (x: number, y: number): number => x * y;

 

 

클래스와 인터페이스

// JavaScript
class User {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    
    greet() {
        return `안녕하세요, ${this.name}입니다.`;
    }
}

// TypeScript
interface UserInterface {
    name: string;
    age: number;
    greet(): string;
}

class User implements UserInterface {
    constructor(
        public name: string,
        public age: number
    ) {}
    
    greet(): string {
        return `안녕하세요, ${this.name}입니다.`;
    }
}

 

 

객체와 배열

// JavaScript
const person = {
    name: "홍길동",
    age: 25
};

const numbers = [1, 2, 3];
numbers.push("4"); // JavaScript에서는 가능

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

const person: Person = {
    name: "홍길동",
    age: 25
};

const numbers: number[] = [1, 2, 3];
numbers.push("4"); // 타입 에러 발생

 

 

비동기 처리

// JavaScript
async function getData() {
    const response = await fetch('api/data');
    return response.json();
}

// TypeScript
interface ApiResponse {
    id: number;
    name: string;
    data: any;
}

async function getData(): Promise<ApiResponse> {
    const response = await fetch('api/data');
    return response.json();
}

 

 

모듈 시스템

모듈을 가져오고 내보내는 방식은 비슷하지만, TypeScript는 타입 정보를 포함한다.

// JavaScript
export const config = {
    apiUrl: "https://api.example.com"
};

import { config } from './config';

// TypeScript
interface Config {
    apiUrl: string;
}

export const config: Config = {
    apiUrl: "https://api.example.com"
};

import { config } from './config';

 

TypeScript는 JavaScript의 모든 기능을 포함하면서도 타입 시스템을 통해 더 안전하고 예측 가능한 코드를 작성할 수 있게 해준다. 특히 대규모 프로젝트에서 타입 체크를 통해 많은 런타임 에러를 사전에 방지할 수 있다는 장점이 있다.