타입스크립트와 객체지향 프로그래밍 (OOP)

절차지향과 객체지향

- 절차지향

: 프로그램 전체가 유기적으로 연결되도록 만드는 프로그래밍 기법

 

- 객체지향

: 프로그램을 객체 단위로 나누고 이들의 상호작용으로 구현하는 프로그래밍 기법

 

 

 

 

 

 

자바스크립트와 객체지향 프로그래밍

: JavaScript는 Class를 지원하지는 않지만 prototype을 기반으로 하는 객체지향 프로그래밍 언어

: 객체의 원형인 프로토타입을 이용한 클로닝(복사)과 객체 특성을 확장해 나가는 방식으로 새로운 객체를 생성함

 

- 프로토타입

: prototype link와 prototype object를 통틀어 이르는 개념

: 함수를 정의하면 prototype object도 같이 생성되고, 생성된 함수는 prototype이라는 속성을 통해 prototype object에 접근할 수 있음

: prototype object는 일반적인 객체와 같으며 기본 속성으로 constructor와 __proto__를 가짐

: 여기서 constructor는 prototype object와 같이 생성된 함수를 가리킴

: __proto__는 prototype link로, 객체가 생성될때 조상이었던 함수의 prototype object를 가리킴

출처: https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67

: 이러한 프로토타입 체인 구조를 통해 모든 객체는 Object의 자식이 되고 Object Prototype Object에 있는 모든 속성을 사용 할 수 있음 (toString() 등등)

 

- ES6

: ES6 부터 클래스 문법이 추가되었으나, 프로토타입 기반 함수일 뿐임

: 이후 타입스크립트가 등장하면서 훨씬 표현력있게 클래스를 활용한 OOP를 구현할 수 있게 됨

 

 

 

 

 

 

객체지향 프로그래밍의 특성

- 캡슐화 (Encapsulation)

: 외부에서 보여질 필요가 없는 데이터를 숨기면서 외부에는 기능만 제공

 

- 추상화 (Abstraction)

: 데이터의 공통된 성질을 추출하여 슈퍼 클래스를 선정하는 개념

 

- 상속 (Inheritance)

: 특정 클래스의 기능을 물려받아 사용하는 개념

 

- 다형성 (Polymorphism)

: 같은 모양의 함수가 상황에 따라 다르게 동작하는 것을 의미

: 오버로딩과 오버라이딩의 개념

 

 

 

 

 

 

타입스크립트와 객체지향 프로그래밍

- Class

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

const person = new Person('이무기');

 

- static method

class Person {
  name = '';
  static gender = "male";
  constructor(name: string) {
    this.name = name;
  }
  
  introduce(){
    console.log(`Name: ${this.name}, gender: ${Person.gender}`);
  }
  
  static introduceJob(job: string){
    console.log(`저의 직업은 ${job} 입니다.`);
  }
}

Person.introduceJob('백엔드 개발자');

: 한 번 정의되고 변화가 없는 함수 및 속성

 

- getter와 setter

class Person {
  name: string;
  job : string;
  get introduce(): string{
      return this.name + '는' + this.job
  }
  constructor(name: string, job: string) {
      this.name = name;
      this.job = job;
  }
}

const person = new Person('이무기', '개발자');
console.log(person.introduce);
person.job = "선생님";
console.log(person.introduce);

{
    class Person {
    private admin: string;
    get newAdmin(): string{
      return this.admin;
    }
    set newAdmin(name: string){
        if(name.includes("hyun")){
            this.admin = name;
        }
    }
    constructor(admin: string){
        this.admin = admin;
    }
}
    const person = new Person("2mukee");
    person.newAdmin = "minsu"
    console.log(person)
    person.newAdmin = "hyunsu"
    console.log(person)
}

 

- 접근 제어 지정자(public, private, protected)를 이용한 캡슐화

{
    class Phone {
    app = ''
    constructor(app: string) {
        this.app = app;
    }
    private searchApp(){
        console.log("대충 스마트폰에서 어플 찾는 로직...");
    }
    clickApp(){
        this.searchApp();
        console.log(`${this.app} 어플이 실행됩니다.`);
    }
}

const phone = new Phone('chrome');
phone.clickApp()
}

 

- interface를 이용한 추상화

    interface Mobile{
        searchApp: () => void;
    }

    class Phone implements Mobile {
    app = ''
    constructor(app: string) {
        this.app = app;
    }
    searchApp(){
        console.log("대충 스마트폰에서 어플 찾는 로직...");
    }
    clickApp(){
        this.searchApp();
        console.log(`${this.app} 어플이 실행됩니다.`);
    }
}

const mobile: Mobile = new Phone('chrome');
// mobile.clickApp(); -> Error
const phone: Phone = new Phone('chrome');
phone.clickApp();

 

- 상속

    class CleanningRobot{
        battery: number;
            constructor(battery: number) {
            this.battery = battery;
        }
        sprayWater(){
            console.log("청소기가 물을 뿌리는 로직...");
        }
    }

    class FloorCleanningRobot extends CleanningRobot {
        constructor(battery: number) {
            super(battery);
        }

        work(){
            const sprayWater = super.sprayWater();
            sprayWater;
            console.log(`바닥 위에서 ${this.battery}시간 동안 돌아다니며 청소하는 로직...`);
        }
    }

    const robot = new FloorCleanningRobot(10)
    robot.work();

: 타입스크립트에서는 다중 상속은 불가하다

: 인터페이스 외에도 abstract 선언을 이용한 추상 클래스 작성도 가능하다

 

- 다형성 (오버로딩)

    class CleanningRobot{
        constructor(){}
        sprayWater(num: number){
            console.log(`청소기가 ${num}번 물을 뿌리는 로직...`);
        }
    }

    class FloorCleanningRobot extends CleanningRobot {
        constructor(){
            super();
        }
        sprayWater(num: number): void;
        sprayWater(num: string): void;
        sprayWater(num: number | string): void{
            if(typeof num === "number") console.log(`청소기가 ${num}번 물을 뿌리는 로직...`);
            if(typeof num === "string") console.log(`${num} 바닥 청소기는 물을 뿌리지 않습니다.`);
        }
    }

    class WindowCleanningRobot extends CleanningRobot {

    }

    const robot1 = new CleanningRobot();
    robot1.sprayWater(3);
    const robot2 = new FloorCleanningRobot();
    robot2.sprayWater(5); 
    robot2.sprayWater('신발장');

: 메서드 이름은 같지만 매개변수의 타입이나 로직을 다르게 정의

 

- 다형성 (오버라이딩)

    class CleanningRobot{
        constructor(){}
        sprayWater(num: number){
            return num
        }
    }


    class WindowCleanningRobot extends CleanningRobot {
        sprayWater(num: number){
            return num * num
        }
    }

    const robot = new WindowCleanningRobot();
    robot.sprayWater(4)

: 상위 클래스의 메서드를 하위 클래스에서 재정의

: 매개변수 타입은 상위 클래스와 같거나 상위 타입이어야 한다

 

 

 

 

 

 

 

 

Reference

객체지향 프로그래밍(OOP)과 TypeScript

[Javascript ] 프로토타입 이해하기

 

Javascript 기초 - Object prototype 이해하기 | Insanehong's Incorrect Note