[TypeScript-입문] 13.클래스(Class) 추가 설명

in TypeScript on TypeScript 입문


클래스(Class)에 대한 포스팅이다. 객체지향이론을 추구하기에 객체지향언어인 자바와 비슷하게 볼 수 있다.


1. TypeScript에서 클래스(Class)와 new생성자

TypeScript에서는 JAVA와 다르게 생성자 오버로딩이나 여러 개의 생성자를 정의되지 않기 떄문에 클래스 안에는 하나의 생성자만을 정의할 수 있다.

JAVA와 같이 OOP개념을 추구하기 때문에 TypeScript에서도 접근제어자를 통해소 클래스 내에 멤버변수에 직접 접근제한을 제한하고 getter/setter메서드를 통한 멤버변수에 접근으로 OOP의 캡슐화의 특징을 갖을 수 있다.


class Person {
  //접근제어자 private 로 멤버변수에 직접 접근제한
  private name: string;
  private age: number;

  //기본 생성자
  //constructor() {
  //   console.log("기본 생성자 생성");
  //}

  //컴스텀 생성자
  constructor(name: string, age: number) {
    console.log("생성자 생성");
    this.name = name;
    this.age = age;
  }

  //Setter
  public setName(name: string) {
    this.name = name;
  }

  //Getter
  public getName() {
    return this.name;
  }

  //Setter
  public setAge(age: number) {
    this.age = age;
  }

  //Getter
  public getAge() {
    return this.age;
  }
}

let p1 = new Person("호날두", 37);
console.log(p1.getName(), p1.getAge());

let p2 = new Person("메시", 46);
p2.setAge(36);
console.log(p2.getName(), p2.getAge());

[LOG]: "생성자 생성" 
[LOG]: "호날두",  37 
[LOG]: "생성자 생성" 
[LOG]: "메시",  36



2. TypeScript에서 Static

TypeScript에서 static 변수와 메서드를 선언하고 사용하는 코드이다. 자바와 동일한 형태이다.

class ConstCode {
    //static 변수
    public static DEP = "수신";
    public static LON = "여신";
    public static FOR = "외국환";
    public static COM = "공통";
}

class StringUtil {
    //static 메서드
    public static getNumber2String(num: number): string {
        return num.toString();
    }
}

console.log(ConstCode.LON);
console.log(ConstCode.FOR);

//let ret1: number = StringUtil.getNumber2String(123);//Error: Type 'string' is not assignable to type 'number'
let ret2: string = StringUtil.getNumber2String(123000);
console.log(ret2); 

[LOG]: "여신" 
[LOG]: "외국환" 
[LOG]: "123000"



3. 클래스 상속(extends)

TypeScript에서 클래스 상속예제이다. 자바와 비슷한 형태이다.

super()를 사용하여 부모 클래스의 생성자를 호출하고, extends 키워드를 사용하여 상속 관계를 만들었습니다. 이를 통해 Dog 클래스는 Animal 클래스의 모든 특성(속성과 메서드)을 상속받아 사용할 수 있다.


// 부모 클래스
class Animal {
  constructor(public species: string) {}

  makeSound(): void {
    console.log('some animal crying~');
  }
}

// 자식 클래스 - Animal 클래스를 상속받음
class Dog extends Animal {
  constructor(public classification: string) {
    super('포유류'); // 부모 클래스의 생성자 호출
  }

  makeSound(): void {
    console.log('Woof! Woof!');
  }

  displayInfo(): void {
    console.log(`분류: ${this.classification}, 종: ${this.species}`);
  }
}

// Animal 클래스의 인스턴스 생성
const animal = new Animal('동물');
animal.makeSound(); // 출력: Some generic sound

// Dog 클래스의 인스턴스 생성
const dog = new Dog('허스키');
dog.makeSound();
dog.displayInfo();

[LOG]: "some animal crying~" 
[LOG]: "Woof! Woof!" 
[LOG]: "분류: 허스키, 종: 포유류"



4. 추상클래스(abstract)

상속 개념이 자식클래스에서 부모클래스를 사용하는 게 의도라면, 추상화 개념은 기존의 클래스의 공통 부분을 추려내서 부모클래스를 만드는 것이다.

클래스를 설계도에 비유한다면 추상클래스는 미완성 설계도에 비유 한다. 추상 클래스는 abstract 예약어가 붙으며, 무엇을 구현을 할 것이다.라고 설계하는 개념으로 선언만 하며 구현은 자식클래스에서 한다.

Dog와 Cat 클래스는 Animal 클래스를 상속받아 추상 메서드를 구현하고 있다. 추상 클래스는 직접 인스턴스화할 수는 없다.

// 추상 클래스
abstract class Animal {
  constructor(public species: string) {}

  // 추상 메서드 - 하위 클래스에서 반드시 구현되어야 함
  abstract makeSound(): void;

  // 일반 메서드
  displayInfo(): void {
    console.log(`Species: ${this.species}`);
  }
}

// 추상 클래스를 상속받는 하위 클래스
class Dog extends Animal {
  constructor(public breed: string) {
    super('Canine'); // 부모 클래스의 생성자 호출
  }

  makeSound(): void {
    console.log('Woof! Woof!');
  }
}

// 추상 클래스를 상속받는 또 다른 하위 클래스
class Cat extends Animal {
  constructor(public breed: string) {
    super('Feline'); // 부모 클래스의 생성자 호출
  }

  makeSound(): void {
    console.log('Meow!');
  }
}

// 추상 클래스를 사용하여 인스턴스를 생성할 수 없음
// const animal = new Animal('Unknown'); // 에러 발생!

// Dog 클래스의 인스턴스 생성
const dog = new Dog('Bulldog');
dog.makeSound();
dog.displayInfo();

// Cat 클래스의 인스턴스 생성
const cat = new Cat('Siamese');
cat.makeSound();
cat.displayInfo();

[LOG]: "Woof! Woof!" 
[LOG]: "Species: Canine" 
[LOG]: "Meow!" 
[LOG]: "Species: Feline"



  • https://www.typescriptlang.org/play?#code/Q