[타입스크립트] class(클래스) vs interface(인터페이스)

객체를 생성하기 위한 템플릿 Class

상속을 통해서 중복된 코드 작성을 피하고 상속받은 기능을 확장하기 위해서 사용하는 클래스.

 

 

 

 

인스턴스를 생성하기 위한 생성자함수 Contructor

비슷한 여러개의 객체를 찍어내기 위해서 만든 붕어빵틀, 물건 설계도

인스턴스도 결국 객체를 생성하기때문에 클래스의 모든 기능은 객체를 위해 굴러간다고 생각하면 편하다.

 

 

 

객체를 생성하기 위한 인스턴스 Instance

contructor에 의해서 만들어진 객체, 붕어빵, 물건

// 접근제한자 public을 사용한 클래스 Square
class public Square{
	x: number;
    y: number;
    
    // 반드시 클래스 안에 생성자(constructor)를 선언해야한다.
    constructor(_x:number, _y:number){
    	this.x = _x;
        this.y = _y;
    }
    
    // 메소드 make
    make(){
    	console.log(`가로=${x}cm, 세로${y}cm`)
    }
}

// 클래스 Square가 호출(new)되어서 만들어진 인스턴스 redSquare
const redSquare = new Square(2,5);
redSquare.make(); // >> 가로=2cm, 세로=5cm,

 

 

 

상관관계

만날 헷갈려서 그냥 내맘대로 외웠다.

class : 아이스크림 틀을 내장한 아이스크림 판매 키오스크(기계)

contructor : 아이스크림을 만드는 틀

instance : 포장된 아이스크림

object : 포장을 까야 먹을 수 있는 아이스크림

인스턴스(아이스크림 포장) 안에 담긴게 객체(아이스크림)이란걸 생각하면 그나마 이해하기 간편한듯. 

 

class IcecreamKiosk {
  constructor(fruit) {
    this.inside = fruit;
  }
}

let bananaIcecream = new IcecreamKiosk('banana')
console.log(bananaIcecream.inside)
// >> banana

 

 

 

+) 클래스 vs 프로토타입

객체지향언어 (예:타입스크립트)에서 클래스 = 자바스크립트에서 프로토타입

(자바스크립트가 프로토타입 기반 언어인걸 잊지말자)

각각 클래스, 프로토타입에서 생성된 것을 전부 인스턴스라고 한다.

인스턴스는 클래스나, 프로토타입 안에 있던 프로퍼티(속성)과 메서드를 모두 상속받는다.

 

 

 

 

---

타입 체크를 위해 사용되는 interface

ES6가 지원하지 않는 타입스크립트만의 특징을 갖고있다.

프로퍼티와 메소드를 가질 수 있다는 점에서 클래스와 비슷하지만 다음과 같은 점이 다르다.

1. 직접 인스턴스를 생성할 수 없다. ( = 생성자가 없다)

2. abstract를 사용하지 않은 추상메서드만 메서드로 가질 수 있다.

3. 접근 제한자를 설정할 수 없다.

4. 다중상속이 가능하다.

 

잊지 말아야할 점은 타입체크를 위해서 interface를 쓰는만큼,

interface를 쓰면 반드시!! 사용한 interface를 구현해야한다.

// 인터페이스의 정의
interface Bus {
 name: string;
 gender: string;
 pay: number;
}

// 변수 bus 타입으로 선언한 Bus 인터페이스
let bus: Bus;

// 변수 bussms Busdml 인터페이스를 준수하여야한다.
// 하나라도 빼먹으면 안됨.
bus = {name:'밍구', gender:'female', pay:500};

 

 

 

선택적으로 interface의 프로퍼티를 구현하는 법

// 필수적으로 사용하지 않을 프로퍼티명 뒤에 ?을 붙인다.
interface Market {
 egg: number;
 water: number;
 apple?: number;
}

// 해당 프로퍼티를 생략해도 에러가 생기지 않는다.
const market: Market = {
    egg: 4000;
    water: 1200;
}

 

 

 

 

 

 

 

 

참고 블로그

https://poiemaweb.com/typescript-interface
https://poiemaweb.com/typescript-class
https://velog.io/@denmark-banana/TypeScript-%ED%81%B4%EB%9E%98%EC%8A%A4%EC%99%80-%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4
https://velog.io/@integer/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%81%B4%EB%9E%98%EC%8A%A4