[Typescript] Class

이한슬·2024년 1월 19일

Typescript

목록 보기

5/7

Class

타입스크립트에서 객체를 직접 만드는 것도 가능하지만 클래스를 작성하여 객체를 생성하는 것도 가능하다.
클래스 이름은 대문자로 시작해야하며, class 클래스명 {}의 형태로 만들 수 있다.
이렇게 정의된 클래스의 인스턴스를 생성하고자 할 때는 new 클래스명()의 형태로 생성할 수 있다.
클래스에 정의된 인스턴스의 속성, 메소드에는 .을 통해 접근할 수 있다.

class Cafe {
  name: string
  discount: number
}

const cafe = new Cafe()
cafe.name

field, method

클래스 안에서 정의된 속성들을 필드라고 부른다. 이 코드에서 name, discount를 통틀어서 필드라고 한다.
클래스 안에서 정의된 함수는 메소드라고 부른다. 다만 function 키워드를 붙이지 않고 만들면 된다.

class Cafe {
  name: string
  discount: number
  
  hello(){
    console.log('hello')
  }
}

this

타입스크립트에서 this는 자바에서의 this와는 조금 다른 부분이 있다. 자바에서는 this가 속해있는 곳을 가리킨다고 생각하면, 타입스크립트에서는 누가 불렀는지를 말한다고 생각해야 한다.

function change() {
  console.log(this);
}

change();

출력

<ref *1> Object [global] {
  global: [Circular *1], ...

함수에서 출력하는 this는 이 함수를 호출한 곳, 즉, 글로벌 객체가 출력이 되었다.

이번에는 클래스 안의 메서드에서 this를 호출해보자.

class Cafe {
  name: string;
  discount: number;

  changeName() {
    this.name = "starbucks";
    console.log(this.name);
  }
}

const starbucks = new Cafe();
starbucks.changeName();

출력

starbucks

starbucks라는 이름의 Cafe 객체를 만들었고, 이 객체에서 changeName 메소드를 호출했다.
starbucks라는 인스턴스에서 changeName 메소드를 호출했으므로 changeName 안의 this는 starbucks 인스턴스를 가리키게 된다.
즉, starbucks.name이 "starbucks"로 바뀌었고, 이것이 출력된 것이다.

constructor

constructor는 클래스의 객체를 생성할 때 자동으로 호출되는 메소드로, 객체를 만들 때 필요한 기본 정보들로 초기화하는 역할을 한다.

class Cafe {
  name: string
  discount: number
  
  constructor(name, discount){
    this.name = name
    this.discount = discount
  }
}

const starbucks = new Cafe('starbucks', 10)
console.log(starbucks.name)

출력

starbucks

Cafe 객체를 생성할 때 파라미터로 name과 discount를 전달하여 객체가 생성되는 동시에 객체의 name과 discount가 초기화되었다. starbucks 객체의 이름을 출력해보면 초기화 한 것이 잘 출력되었다.

아래처럼 속성들을 따로 선언하지 않고 constructor에서 한 번에 선언할 수도 있다.

class Cafe {
  constructor(
  	public name: string, 
    public discount: number
  ){}
}

const starbucks = new Cafe('starbucks', 10)
console.log(starbucks.name)

단, 이 경우에는 접근 제한자를 꼭 명시해주어야 한다. 그렇지 않으면 이 생성자 안에서만 접근할 수 있는 지역 변수로 선언된다. 접근 제한자에 대해서는 밑에서 자세히 서술한다.

extends

extends는 다른 클래스를 상속받고자 할 때 사용되는 키워드이다. 상속받는 하위 클래스를 생성할 때 class 하위클래스명 extends 상위클래스명 {}의 형태로 선언하게 된다.

class Cafe {
  name: string;
  discount: number;

  constructor() {
    this.name = "starbucks";
    this.discount = 10;
  }
}

class Starbucks extends Cafe {
  hello() {
    console.log("안녕하세요, 스타벅스입니다.");
  }
}

const starbucks = new Starbucks();
console.log(starbucks.name);
starbucks.hello();

출력

starbucks
안녕하세요, 스타벅스입니다.

Cafe 클래스를 상속받는 Starbucks 클래스를 생성하였고, Starbucks 클래스 객체를 생성하였다.
Cafe 클래스를 상속받았으므로, Cafe 클래스에서 정의된대로 starbucks.name을 출력하였을 때 starbucks가 출력되었다.
이렇게 extends로 다른 클래스를 상속받아 상위 클래스에 추가적인 기능을 구현하는 클래스를 생성할 수 있다.

super

super는 상위 클래스의 필드나 메소드에 접근하기 위하여 사용한다.
super()는 상위 클래스의 생성자를 호출하는 의미를 가지고 있다.

class Cafe {
  name: string;

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

  hello() {
    console.log("hello");
  }
}

class Starbucks extends Cafe {
  constructor(name: string) {
    super(name);
  }

  namePrint() {
    console.log(this.name);
    super.hello();
  }
}

const starbucks = new Starbucks("starbucks");
starbucks.namePrint();

출력

starbucks
hello

extends를 통해 상속받는 클래스의 생성자에서는 상위 클래스의 생성자를 무조건 호출해야 한다.
Starbucks 클래스의 생성자에서 super(name)를 사용하여 상위 클래스인 Cafe 클래스 생성자를 호출하였다.
namePrint 함수에서는 super.hello()로 상위 클래스인 Cafe 클래스에 정의된 hello 함수를 호출하였다.

abstract

abstract는 추상화를 위한 키워드로, 추상 클래스는 abstract class 클래스명 {}의 형태로 만든다.
추상 클래스는 인스턴스를 가질 수 없는 클래스이다. 즉, 빈 껍데기만 가지고 있는 추상적인 클래스로, 현재 클래스에서 세부적인 기능들을 구현할 필요가 없을 때 추상 클래스를 만들고, 다른 클래스에서 추상 클래스를 상속받아 구현한다.

abstract class Cafe {
  name: string;

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

class Starbucks extends Cafe {
  constructor(name: string) {
    super(name);
  }
}

class Twosome extends Cafe {
  constructor(name: string) {
    super(name);
  }
}

const starbucks = new Starbucks("starbucks");
const twosome = new Twosome("twosome");

console.log(starbucks.name);
console.log(twosome.name);

출력

starbucks
twosome

Cafe 추상 클래스를 상속받는 두 개의 클래스를 생성하여 각 클래스의 객체를 만들고 이름을 출력해보았다.
Cafe 클래스는 추상 클래스이므로 Cafe 클래스의 객체를 생성하려고 하면 오류가 발생한다.

추상 클래스에서는 추상 메소드를 정의할 수 있다. 추상 메소드는 구현이 되어 있지 않은 메소드이다.
abstract 메소드명(): 리턴타입 의 형태로 추상 클래스 내부에 적어주면 된다.
역시 추상 메소드도 추상 클래스에서 구현하지 않으며 상속하는 하위 클래스에서 구현한다.
추상 메소드가 있는 추상 클래스를 상속받는 하위 클래스에서는 추상 메소드를 필수로 구현해야 한다.

abstract class Cafe {
  name: string;

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

  abstract korean(): void;
}

class Starbucks extends Cafe {
  constructor(name: string) {
    super(name);
  }

  korean(): void {
    console.log("스타벅스");
  }
}

class Twosome extends Cafe {
  constructor(name: string) {
    super(name);
  }

  korean(): void {
    console.log("투썸");
  }
}

const starbucks = new Starbucks("starbucks");
const twosome = new Twosome("twosome");

starbucks.korean();
twosome.korean();