자바스크립트의 클래스
자바스크립트의 클래스
자바스크립트의 클래스(Class)는 객체를 생성하기 위한 템플릿으로서, 데이터와 이를 조작하는 코드를 하나로 추상화합니다. 클래스는 데이터를 표현하는 필드(Field)와 행동을 표현하는 메서드(Methods)로 구성됩니다.
또한, 클래스는 생성자 메서드인 constructor를 가지며, 이는 클래스를 통해 객체가 생성될 때 호출되어 객체의 초기 상태를 설정합니다.
// test.js
// 클래스 선언
class Student {
// 필드
name;
grade;
age;
// 생성자 메서드
constructor(name, grade, age) {
this.name = name;
this.grade = grade;
this.age = age;
}
// 메서드
study() {
console.log("열심히 공부 함");
}
introduce() {
console.log(`안녕하세요 ${this.name} 입니다!`)
}
}
// 클래스를 이용해서 만든 객체를 인스턴스(Instance)라고 합니다.
let studentB = new Student("이정환", "A+", 27);
studentB.study(); // 열심히 공부 함
studentB.introduce(); // 안녕하세요 이정환 입니다!
자바스크립트의 클래스 상속
자바스크립트에서는 extends 키워드를 사용하여 클래스 간에 상속(Inheritance)을 구현할 수 있습니다. 상속을 통해 부모 클래스의 속성과 메서드를 자식 클래스가 상속받을 수 있습니다.
// 클래스 상속
class StudentDeveloper extends Student {
favoriteSkill;
constructor(name, grade, age, favoriteSkill) {
super(name, grade, age); // 부모 클래스의 constructor 호출
this.favoriteSkill = favoriteSkill;
}
programming() {
console.log(`${this.favoriteSkill}로 프로그래밍 함`);
}
}
const studentDeveloper = new StudentDeveloper("이정환", "B+", 27, "TypeScript");
studentDeveloper.programming(); // TypeScript로 프로그래밍 함
타입스크립트의 클래스
타입스크립트의 클래스
타입스크립트에서 클래스는 객체 지향 프로그래밍의 핵심 구성요소입니다. 자바스크립트의 클래스 구문을 확장하여 타입을 지원하며, 추가 기능을 제공합니다.
타입스크립트 클래스에서는 필드와 메소드, 그리고 생성자 매개변수에 타입을 명시해줘야 합니다.
타입스크립트에서는 클래스의 필드를 선언할 때 타입 주석으로 타입을 함께 정의해주어야 합니다. 그렇지 않으면 함수 매개변수와 동일하게 암시적 any 타입으로 추론되는데 엄격한 타입 검사 모드(strict 옵션이 true로 설정되어 있을 경우)일 때에는 오류가 발생하게 됩니다.
추가로 생성자에서 각 필드의 값을 초기화 하지 않을 경우 초기값도 함께 명시해주어야 합니다.
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 employeeB = new Employee("이정환", 27, "개발자");
// 타입스크립트의 클래스는 타입으로도 활용이 됩니다.
const employeeC: Employee = {
name: "",
age: 0,
position: "",
work() {},
}
타입스크립트의 클래스
타입스크립트에서도 extends 키워드를 사용하여 클래스 간의 상속을 구현할 수 있습니다. 이를 통해 기존 클래스의 모든 속성과 메소드를 새 클래스에 상속시킬 수 있습니다.
class ExcutiveOfficer extends Employee {
officeNumber: number;
constructor(
name: string,
age: number,
position: string,
ofiiceNumber: number
) {
super(name, age, position);
this.officeNumber = officeNumber;
}
}
접근 제어자
접근 제어자(Access Modifier)는 필드나 메소드에 대한 접근을 제한하여, 코드의 안정성을 높이고 잘못된 사용을 방지하는 역할을 합니다.
타입스크립트에는 세 가지 접근 제어자가 존재합니다:
private: 이 접근 제어자가 붙은 필드나 메서드는 해당 클래스 내부에서만 접근 가능합니다. 따라서 클래스 외부나 파생 클래스에서는 이 필드나 메서드에 접근할 수 없습니다.protected: 이 접근 제어자가 붙은 필드나 메서드는 해당 클래스 및 파생 클래스 내부에서만 접근 가능합니다. 따라서 클래스 외부에서는 이 필드나 메서드에 접근할 수 없습니다.public: 이 접근 제어자가 붙은 필드나 메서드는 어디서든 접근 가능합니다. 이 접근 제어자는 기본값으로, 접근 제어자를 명시하지 않은 경우에 자동으로 적용됩니다.
class Employee {
// 필드
private name: string;
protected age: number;
position: string; // public
// 생성자 메서드
constructor(name: string, age: number, position: string) {
this.name = name;
this.age = age;
this.position = position;
}
// 메서드
work() {
console.log(`${this.name} 일함`);
}
}
class ExecutiveOfficer extends Employee {
// methods
func() {
this.name; // ❌ No (private)
this.age; // ✅ OK (protected)
}
}
const employee = new Employee("이정환", 27, "developer");
employee.name = "홍길돌"; // ❌ No
employee.age = 30; // ❌ No
employee.position = "디자이너" // ✅ Ok
또한, 필드 선언과 동시에 생성자에서 초기화를 할 수 있도록 도와주는 간결한 문법도 제공합니다.
class Employee {
// 필드
// private name: string; // ❌ No
// protected age: number; // ❌ No
// public position: string; // ❌ No
// 생성자 메서드
constructor(
private name: string,
protected age: number,
public position: string
) {} // this.field = parameter가 자동으로 수행됩니다.
// methods
work() {
console.log(`${this.name} 일함`);
}
}
인터페이스와 클래스
인터페이스는 클래스가 특정 조건을 충족하도록 강제하는 역할을 수행합니다. 클래스는 인터페이스를 구현함으로써 인터페이스에서 정의한 필드와 메소드를 반드시 포함해야 함을 명시할 수 있습니다.
interface CharacterInterface {
name: string;
moveSpeed: number;
move(): void;
}
class Character implements CharacterInterface {
constructor(
public name: string,
public moveSpeed: number, // 인터페이스의 필드는 public으로만 정의할 수 있습니다
private extra: string
) {}
move(): void {
console.log(`${this.moveSpeed} 속도로 이동!`);
}
}
Reference
