TypeScript #6 클래스 Class

| 2025-01-09 18:39 | 조회 266

블로그 목차

1. 타입스크립트 클래스의 기초

1.1 클래스 선언하기
1.2 생성자와 메서드 정의
1.3 타입스크립트의 타입 시스템 이해하기

2. 접근 제한자에 대한 이해

2.1 퍼블릭(Public)
2.2 프라이빗(Private)
2.3 프로텍티드(Protected)

3. 타입스크립트 클래스 상속

3.1 상속의 기본 원리
3.2 생성자에서의 super 키워드 사용
3.3 자식 클래스에서의 접근 제한자 활용하기

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

4.1 읽기 전용 프로퍼티 만들기
4.2 도우미 기능 활용하기
4.3 타입스크립트의 타입 유추를 통한 코드 개선

도입부

타입스크립트(TypeScript)는 자바스크립트(JavaScript)의 강력한 상위 집합으로, 특히 클래스(class)와 타입 시스템(type system)에서 많은 개발자들에게 사랑받고 있습니다. 이번 블로그 포스트에서는 타입스크립트로 클래스를 선언하고, 이를 통해 발생할 수 있는 다양한 에러와 해결 방법에 대해 심도 있게 다뤄보겠습니다. 특히, 클래스의 접근 제한자(public, private, protected)의 역할과 상속 개념을 중심으로 설명할 예정입니다.

클래스를 처음 접하는 초보자부터, 이미 기본적인 지식을 갖춘 중급 개발자까지 모두에게 유익한 정보를 제공할 것입니다. 또한, ES6에 대한 이해가 부족한 분들을 위해 추가적인 자료도 추천드리니, 이 기회를 통해 타입스크립트의 매력을 한층 더 느껴보세요! 이 글을 통해 타입스크립트 클래스를 마스터하는 첫걸음을 내딛어 보시기 바랍니다.

1. 타입스크립트 클래스의 기초

타입스크립트는 자바스크립트에 타입을 추가하여 개발자들이 보다 안전하고 효율적으로 코드를 작성할 수 있게 도와줍니다. 이 섹션에서는 타입스크립트 클래스의 기본 개념을 소개하고, 클래스 선언, 생성자 및 메서드 정의, 그리고 타입스크립트의 타입 시스템에 대해 자세히 설명하겠습니다.

1.1 클래스 선언하기

타입스크립트에서 클래스를 선언하는 방법은 ES6 자바스크립트와 유사합니다. 클래스는 class 키워드를 사용하여 정의되며, 다음과 같은 기본 구조를 가집니다:

```typescript class Car { // 클래스 속성 정의 color: string;

// 생성자
constructor(color: string) {
    this.color = color;
}

// 메서드 정의
start() {
    console.log(`${this.color} 자동차가 출발합니다.`);
}

} ```

이 코드에서는 Car라는 클래스를 정의하고, color라는 속성을 생성자에서 초기화하고 있습니다. 클래스는 객체 지향 프로그래밍의 기본 단위로, 데이터와 메서드를 함께 묶어 관리할 수 있게 해 줍니다.

1.2 생성자와 메서드 정의

생성자는 클래스를 인스턴스화할 때 호출되는 특별한 메서드입니다. 생성자 안에서는 인스턴스 속성을 초기화하거나 필요한 작업을 수행할 수 있습니다. 메서드는 클래스의 행위를 정의하며, 클래스 인스턴스에서 호출할 수 있는 함수입니다.

예를 들어, 아래의 코드에서는 Car 클래스에 start라는 메서드를 추가하여, 자동차가 출발할 때의 동작을 정의하고 있습니다.

typescript const myCar = new Car("빨강"); myCar.start(); // 출력: 빨강 자동차가 출발합니다.

이처럼 생성자와 메서드를 활용하여 객체의 상태와 행동을 정의할 수 있습니다.

1.3 타입스크립트의 타입 시스템 이해하기

타입스크립트는 정적 타입 언어로, 변수와 함수의 타입을 명시적으로 정의할 수 있습니다. 이를 통해 개발자는 코드에서 발생할 수 있는 오류를 사전에 방지할 수 있습니다. 타입 시스템을 이해하는 것은 타입스크립트를 효과적으로 사용하는 데 필수적입니다.

타입스크립트에서는 기본 데이터 타입인 string, number, boolean 외에도 배열, 튜플, 객체 등의 복합 타입을 정의할 수 있습니다. 다음은 몇 가지 예시입니다:

typescript let name: string = "타입스크립트"; let age: number = 25; let isActive: boolean = true; let colors: string[] = ["red", "green", "blue"];

이렇게 타입을 명시함으로써 코드의 가독성을 높이고, 런타임 에러를 줄일 수 있습니다.

2. 접근 제한자에 대한 이해

타입스크립트에서는 클래스의 속성과 메서드에 접근 제한자를 설정할 수 있습니다. 접근 제한자는 클래스 외부에서 해당 속성이나 메서드를 접근할 수 있는지를 결정합니다. 이 섹션에서는 퍼블릭(Public), 프라이빗(Private), 프로텍티드(Protected)의 개념을 살펴보겠습니다.

2.1 퍼블릭(Public)

퍼블릭 접근 제한자는 클래스의 속성과 메서드가 어디에서나 접근 가능하도록 합니다. 기본적으로 모든 클래스 속성과 메서드는 퍼블릭으로 간주됩니다. 다음의 예시를 통해 퍼블릭 접근 제한자를 사용하는 방법을 알아보겠습니다:

```typescript class Car { public color: string;

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

public start() {
    console.log(`${this.color} 자동차가 출발합니다.`);
}

}

const myCar = new Car("파랑"); myCar.start(); // 출력: 파랑 자동차가 출발합니다. ```

이처럼 퍼블릭으로 설정된 속성과 메서드는 클래스 외부에서도 자유롭게 접근이 가능합니다.

2.2 프라이빗(Private)

프라이빗 접근 제한자는 클래스 내부에서만 접근할 수 있으며, 클래스 외부에서는 접근이 불가능합니다. 이를 통해 클래스의 내부 상태를 보호할 수 있습니다. 다음은 프라이빗 속성을 사용하는 예시입니다:

```typescript class Car { private color: string;

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

public start() {
    console.log(`${this.color} 자동차가 출발합니다.`);
}

}

const myCar = new Car("초록"); // myCar.color; // 에러: 'color'는 private입니다. myCar.start(); // 출력: 초록 자동차가 출발합니다. ```

프라이빗 속성은 클래스 외부에서 직접 접근할 수 없으므로, 데이터 은닉을 통해 클래스의 일관성을 유지할 수 있습니다.

2.3 프로텍티드(Protected)

프로텍티드 접근 제한자는 클래스 내에서 및 자식 클래스에서 접근할 수 있도록 허용하지만, 클래스 외부에서는 접근할 수 없습니다. 이는 상속을 통해 클래스 간의 관계를 정의할 때 유용하게 사용됩니다. 다음은 프로텍티드 속성을 사용하는 예시입니다:

```typescript class Vehicle { protected color: string;

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

}

class Car extends Vehicle { public start() { console.log(${this.color} 자동차가 출발합니다.); } }

const myCar = new Car("보라"); // myCar.color; // 에러: 'color'는 protected입니다. myCar.start(); // 출력: 보라 자동차가 출발합니다. ```

이처럼 프로텍티드 접근 제한자는 상속 관계에서 속성을 공유할 수 있게 해 주며, 외부에서의 접근은 차단합니다.

이번 섹션에서는 타입스크립트 클래스의 기본 요소와 접근 제한자에 대해 알아보았습니다. 다음 섹션에서는 타입스크립트 클래스의 상속에 대해 심화적으로 설명하겠습니다.

1. 타입스크립트 클래스의 기초

1.1 클래스 선언하기

타입스크립트에서 클래스는 class 키워드를 사용하여 선언합니다. 클래스는 객체의 청사진으로, 속성과 메서드를 정의할 수 있습니다. 기본적인 클래스 선언은 다음과 같습니다:

```typescript class Person { name: string; age: number;

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

} ```

위의 예제에서 Person 클래스는 name과 age라는 두 개의 속성을 가지고 있으며, 생성자를 통해 이들을 초기화합니다. 클래스는 객체 지향 프로그래밍의 기본 요소로, 재사용성과 관리 용이성을 높여줍니다.

1.2 생성자와 메서드 정의

생성자는 클래스의 인스턴스가 생성될 때 호출되는 특별한 메서드로, 초기 값을 설정하는 데 사용됩니다. 메서드는 클래스 내부에 정의된 함수로, 인스턴스의 속성을 조작하거나 특정 작업을 수행할 수 있습니다.

```typescript class Person { name: string; age: number;

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

greet() {
    console.log(`안녕하세요, 저는 ${this.name}입니다.`);
}

}

const john = new Person("John", 30); john.greet(); // 출력: 안녕하세요, 저는 John입니다. ```

이 예제에서 greet 메서드는 Person 클래스의 인스턴스가 인사하는 기능을 수행합니다.

1.3 타입스크립트의 타입 시스템 이해하기

타입스크립트는 정적 타입 언어로, 변수의 타입을 명시적으로 정의할 수 있습니다. 이는 코드의 안정성을 높이고, 개발자가 의도한 대로 코드를 작성했는지 확인하는 데 도움을 줍니다. 타입스크립트의 타입 시스템은 기본 타입, 배열, 튜플, 객체, 열거형(enum) 등을 지원합니다.

typescript let age: number = 30; let name: string = "John"; let isActive: boolean = true; let hobbies: string[] = ["reading", "gaming"];

타입 시스템을 활용하면 코드의 가독성을 높이고, 런타임 에러를 줄일 수 있습니다.

2. 접근 제한자에 대한 이해

2.1 퍼블릭(Public)

public 접근 제한자는 클래스의 속성과 메서드가 클래스 외부에서도 접근 가능하도록 허용합니다. 기본적으로 타입스크립트 클래스의 속성은 public으로 설정됩니다.

```typescript class Person { public name: string;

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

}

const john = new Person("John"); console.log(john.name); // 출력: John ```

위 코드에서 name 속성은 public으로 선언되었기 때문에, 클래스 인스턴스인 john을 통해 외부에서 접근할 수 있습니다.

2.2 프라이빗(Private)

private 접근 제한자는 클래스 내부에서만 접근 가능하도록 설정됩니다. 이는 클래스 외부에서 해당 속성이나 메서드에 접근할 수 없도록 보호합니다.

```typescript class Person { private age: number;

constructor(age: number) {
    this.age = age;
}

public getAge(): number {
    return this.age;
}

}

const john = new Person(30); console.log(john.getAge()); // 출력: 30 // console.log(john.age); // 오류: Property 'age' is private ```

위 코드에서 age 속성은 private으로 정의되어 있어, 클래스 외부에서 직접 접근할 수 없습니다. 대신 getAge 메서드를 통해 값을 안전하게 반환할 수 있습니다.

2.3 프로텍티드(Protected)

protected 접근 제한자는 private와 유사하지만, 자식 클래스에서도 접근할 수 있습니다. 이는 클래스 상속 시 유용합니다.

```typescript class Person { protected name: string;

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

}

class Employee extends Person { public getName(): string { return this.name; } }

const emp = new Employee("John"); console.log(emp.getName()); // 출력: John // console.log(emp.name); // 오류: Property 'name' is protected ```

이 예제에서 name 속성은 protected로 설정되어 있어, Employee 클래스 내부에서 접근할 수 있지만 클래스 외부에서는 접근할 수 없습니다.

3. 타입스크립트 클래스 상속

3.1 상속의 기본 원리

클래스 상속은 기존 클래스(부모 클래스)의 속성과 메서드를 새로운 클래스(자식 클래스)에서 재사용하는 기능입니다. 타입스크립트에서는 extends 키워드를 사용하여 상속을 구현합니다.

```typescript class Animal { public name: string;

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

public speak(): void {
    console.log(`${this.name}이 소리를 냅니다.`);
}

}

class Dog extends Animal { public bark(): void { console.log(${this.name}가 멍멍 짖습니다.); } }

const dog = new Dog("Buddy"); dog.speak(); // 출력: Buddy가 소리를 냅니다. dog.bark(); // 출력: Buddy가 멍멍 짖습니다. ```

여기서 Dog 클래스는 Animal 클래스를 상속받아 speak 메서드를 사용할 수 있으며, 추가로 bark 메서드를 정의합니다.

3.2 생성자에서의 super 키워드 사용

상속받은 클래스의 생성자에서 부모 클래스의 생성자를 호출할 때는 super 키워드를 사용합니다. 이는 부모 클래스의 속성을 초기화할 수 있게 해줍니다.

```typescript class Animal { constructor(public name: string) {} }

class Dog extends Animal { constructor(name: string) { super(name); // 부모 클래스의 생성자 호출 }

public bark(): void {
    console.log(`${this.name}가 멍멍 짖습니다.`);
}

}

const dog = new Dog("Buddy"); dog.bark(); // 출력: Buddy가 멍멍 짖습니다. ```

위 코드에서 Dog 클래스의 생성자는 super(name)을 통해 부모 클래스의 생성자를 호출하여 name 속성을 초기화합니다.

3.3 자식 클래스에서의 접근 제한자 활용하기

자식 클래스에서 부모 클래스의 접근 제한자를 활용할 수 있습니다. public과 protected는 자식 클래스에서 접근할 수 있지만, private는 접근할 수 없습니다.

```typescript class Person { protected name: string;

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

}

class Employee extends Person { public getName(): string { return this.name; // 접근 가능 } }

const emp = new Employee("John"); console.log(emp.getName()); // 출력: John ```

이처럼 protected 속성은 자식 클래스에서 접근할 수 있습니다.

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

4.1 읽기 전용 프로퍼티 만들기

타입스크립트는 readonly 키워드를 사용하여 읽기 전용 프로퍼티를 생성할 수 있습니다. 이 속성은 클래스 외부에서 수정할 수 없으며, 생성자에서만 초기화할 수 있습니다.

```typescript class Person { public readonly name: string;

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

}

const john = new Person("John"); // john.name = "Doe"; // 오류: Cannot assign to 'name' because it is a read-only property ```

위 코드에서 name 속성은 readonly로 선언되어 있기 때문에, 클래스 외부에서 수정할 수 없습니다.

4.2 도우미 기능 활용하기

타입스크립트는 클래스에서 도우미 기능을 제공하여 복잡한 타입을 간편하게 사용할 수 있도록 합니다. 예를 들어, 제네릭을 활용하여 다양한 타입에 유연하게 대응할 수 있습니다.

```typescript class Box { private items: T[] = [];

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

public getItems(): T[] {
    return this.items;
}

}

const box = new Box(); box.add(1); box.add(2); console.log(box.getItems()); // 출력: [1, 2] ```

여기서 Box 클래스는 제네릭 타입 T를 사용하여 어떤 타입의 아이템도 저장할 수 있게 해줍니다.

4.3 타입스크립트의 타입 유추를 통한 코드 개선

타입스크립트는 변수의 타입을 자동으로 추론하는 기능을 제공합니다. 이를 통해 코드를 더 간결하게 작성할 수 있습니다.

```typescript let count = 10; // number로 유추 let message = "Hello"; // string으로 유추

count += 5; // 유효한 연산 // message = 10; // 오류: Type 'number' is not assignable to type 'string' ```

타입 유추를 활용하면 타입을 명시적으로 지정할 필요 없이, 코드의 가독성을 높일 수 있습니다.

이로써 타입스크립트 클래스의 기초부터 고급 기능까지 다양한 내용을 다뤄보았습니다. 각 섹션에서 학습한 내용을 바탕으로 실전 프로젝트에 적용해 보시기 바랍니다. 타입스크립트를 통해 더욱 안전하고 효율적인 코드를 작성해 나가시길 바랍니다!

결론

타입스크립트는 클래스와 객체지향 프로그래밍을 통해 코드의 재사용성과 유지보수성을 높이는 강력한 도구입니다. 본 블로그에서는 타입스크립트 클래스의 기초부터 접근 제한자, 상속, 고급 기능에 이르기까지 다양한 내용을 다뤘습니다. 특히, 접근 제한자와 상속 개념은 객체지향 프로그래밍의 핵심으로, 이를 통해 효율적이고 안전한 코드를 작성할 수 있습니다.