TypeScript 클래스

자바스크립트의 클래스

자바스크립트에서 클래스는 동일한 형태의 객체를 더 쉽게 생성하기 위한 문법입니다. 클래스는 객체의 **틀(템플릿)**로 작용하여, 반복적인 객체 생성 과정을 효율적으로 처리합니다.

자바스크립트의 클래스 주요 개념

클래스 선언
- class ClassName {} 형태로 선언합니다.
- 클래스는 객체를 생성하는 템플릿과 같으며, 생성된 객체는 인스턴스입니다.
필드와 생성자
- 필드: 객체가 가지는 프로퍼티를 선언합니다.
- 생성자(Constructor): constructor 메서드를 사용하여 필드를 초기화하고 객체를 생성합니다. 생성자는 클래스가 호출될 때 자동으로 실행됩니다.
- ```
class Student {
  name;
  age;
  grade;

  constructor(name, age, grade) {
    this.name = name;
    this.age = age;
    this.grade = grade;
  }
}
```
메서드
- 클래스 내에 정의된 함수로, 인스턴스의 행동을 정의합니다.
- ```
study() {
  console.log("열심히 공부 함");
}
```

상속 (Inheritance)

기존 클래스의 필드와 메서드를 확장하는 새로운 클래스를 생성할 수 있습니다.
extends 키워드를 사용하고, 상위 클래스의 생성자는 super()로 호출합니다.

class StudentDeveloper extends Student {
  favoriteSkill;

  constructor(name, age, grade, favoriteSkill) {
    super(name, age, grade);
    this.favoriteSkill = favoriteSkill;
  }

  programming() {
    console.log(`${this.favoriteSkill}로 프로그래밍 함`);
  }
}

타입스크립트의 클래스

타입스크립트의 클래스는 자바스크립트의 클래스 개념을 확장하며, 정적 타입 검사를 통해 코드의 안정성을 높이는 역할을 합니다.

타입스크립트의 클래스 주요 개념

타입 주석

클래스의 필드와 생성자 매개변수에 타입을 명시합니다.
타입 주석을 통해 각 필드의 데이터 타입을 지정하여 잘못된 타입 할당을 방지합니다.

class Employee {
  name: string = "";
  age: number = 0;
  position?: string; // 선택적 필드

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

  work() {
    console.log("일함");
  }
}

선택적 프로퍼티:
- 필드 이름 뒤에 ?를 붙여 해당 필드를 선택적으로 정의할 수 있습니다.

타입으로서의 클래스

타입스크립트에서는 클래스가 객체의 타입으로도 사용됩니다.

const employeeC: Employee = {
  name: "Jane",
  age: 28,
  position: "Manager",
  work() {
    console.log("일함");
  },
};

상속 시 super 호출 의무:
- 파생 클래스에서 생성자를 정의할 때는 반드시 상위 클래스의 생성자를 super()를 통해 호출해야 합니다.

자바스크립트 클래스와 타입스크립트 클래스의 비교

특징자바스크립트 클래스타입스크립트 클래스

특징	자바스크립트 클래스	타입스크립트 클래스
타입 주석	없음	필드와 매개변수에 타입 주석을 추가하여 정적 타입 검사 가능
선택적 필드	없음	필드 이름 뒤에 ?를 붙여 선택적 필드로 설정 가능
타입 검사	없음 (런타임에만 확인 가능)	컴파일 시 타입 검사 가능 (Strict Mode를 통해 오류 방지)
상속 시 생성자	super()를 통해 상위 생성자 호출 가능	super() 호출 필수 (생성자의 최상단에서)
타입으로서의 클래스	타입 사용 불가	클래스를 타입으로 사용할 수 있음
필드 선언	선언은 생성자 내부에서 함	필드를 클래스 내에서 미리 선언 가능 (name: string 등)

요약

자바스크립트와 타입스크립트의 클래스는 모두 객체를 생성하는 틀로 작동하며, 생성자, 필드, 메서드 등을 포함합니다.
타입스크립트 클래스는 타입 주석과 선택적 필드 등을 추가하여 정적 타입 검사를 제공하며, 코드의 안정성을 강화합니다.
자바스크립트 클래스는 런타임에서만 타입 검사를 하지만, 타입스크립트 클래스는 컴파일 시점에 타입 검사를 통해 오류를 방지할 수 있습니다.

타입스크립트를 사용하면 클래스의 사용 시 타입 안전성이 향상되므로, 코드의 규모가 커지거나 협업 시 더욱 안전한 개발 환경을 구축할 수 있습니다.

접근 제어자(Access Modifier)

타입스크립트에서는 접근 제어자를 통해 클래스의 필드와 메서드의 접근 범위를 제어할 수 있습니다. 이는 코드의 캡슐화를 강화하여 외부에서 직접 접근하지 못하도록 설정할 수 있는 기능을 제공합니다. 타입스크립트의 주요 접근 제어자는 public, private, protected의 세 가지입니다.

1. public

모든 범위에서 접근이 가능한 필드나 메서드에 사용됩니다.
기본적으로 접근 제어자를 지정하지 않으면 모든 필드와 메서드는 public으로 설정됩니다.

class Employee {
  public name: string;
  public age: number;
  public position: string;

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

  work() {
    console.log("일함");
  }
}

const employee = new Employee("이정환", 27, "developer");
employee.name = "홍길동"; // 접근 가능

2. private

클래스 내부에서만 접근할 수 있는 필드나 메서드에 사용됩니다.
클래스 외부에서 접근하려고 하면 오류가 발생합니다.

class Employee {
  private name: string; // 클래스 외부에서 접근 불가
  public age: number;
  public position: string;

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

  work() {
    console.log(`${this.name}이 일함`); // 내부에서는 접근 가능
  }
}

const employee = new Employee("이정환", 27, "developer");
employee.name = "홍길동"; // ❌ 오류 발생 (외부 접근 불가)

3. protected

클래스 내부와 파생 클래스 내부에서만 접근이 가능합니다.
외부에서는 접근이 불가능하며, 상속된 파생 클래스에서는 접근 가능합니다.

class Employee {
  protected age: number; // 파생 클래스에서 접근 가능
  public position: string;

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

class ExecutiveOfficer extends Employee {
  func() {
    console.log(this.age); // ✅ 가능 (상속받은 클래스 내부에서 접근 가능)
  }
}

const employee = new Employee(27, "developer");
employee.age = 30; // ❌ 오류 발생 (외부 접근 불가)

생성자 매개변수에 접근 제어자 설정하기

타입스크립트에서는 생성자 매개변수에 접근 제어자를 설정하여 필드를 자동으로 선언하고 초기화할 수 있습니다. 이를 통해 코드의 간결성을 높일 수 있습니다.

생성자 매개변수에 public, protected, private 접근 제어자를 설정하면 해당 매개변수가 자동으로 클래스의 필드가 됩니다.
따라서 생성자 내부에서 따로 this.name = name과 같이 초기화하지 않아도 됩니다.

class Employee {
  constructor(
    private name: string,
    protected age: number,
    public position: string
  ) {}

  work() {
    console.log(`${this.name} 일함`);
  }
}

const employee = new Employee("이정환", 27, "developer");
// employee.name = "홍길동"; // ❌ private 필드는 외부에서 접근 불가

이 방법을 사용하면 불필요한 필드 선언과 생성자 초기화를 줄여, 더 간결하고 효율적인 코드를 작성할 수 있습니다.

요약

접근 제어자
- public: 모든 범위에서 접근 가능. 지정하지 않으면 기본으로 public.
- private: 클래스 내부에서만 접근 가능. 외부나 파생 클래스에서도 접근 불가.
- protected: 클래스 내부와 파생 클래스에서만 접근 가능. 외부에서는 접근 불가.
생성자 매개변수에 접근 제어자 설정
- 생성자 매개변수에 접근 제어자를 설정하면 자동으로 필드가 생성되고 초기화됩니다.
- 필드 선언 및 생성자 내부에서의 초기화 코드를 생략할 수 있어 코드가 더 간결해집니다.

타입스크립트의 접근 제어자는 객체의 내부 상태 보호와 캡슐화를 강화하여, 코드의 안정성과 유지보수성을 높이는 데 중요한 역할을 합니다.

'TypeScript' 카테고리의 다른 글

TypeScript 제네릭1 (1)	2024.10.29
TypeScript 인터페이스로 구현하는 클래스 (0)	2024.10.29
JavaScript this정리 (0)	2024.10.29
자바스크립트, 타입스크립트 스코프,호이스팅 (2)	2024.10.29
TypeScript 인터페이스 (0)	2024.10.29