[스터디] 타입스크립트 개념 알아보기 4-1 (클래스)

이번에는 타입스크립트의 class에 대해 알아보도록 하자.

Typescript class
타입스크립트(TypeScript)의 class 는 객채 지향 프로그래밍을 지원하는 구조로, 코드의 재사용성과 유지 보수성을 높이는 데 중요한 역할을 한다. class 는 객체의 속성(변수) 과 메서드(함수) 를 정의할 수 있는데, 한마디로 말해보자면 정보를 담는 틀 같은거라고 생각하면 좋을거 같다.

✨ 클래스(class)는 거푸집

아래 간단한 예제를 먼저 살펴보고 가자.

class Person {
	name: string; // 이름이라는 속성
  	age: number; // 나이라는 속성
  
  // 생성자: 새로운 사람이 만들어질 때 이름과 나이를 설정. 
  constructor(name: string, age:number) {
  this.name = name;
  this.age = age;
  }
  
  // 메서드: 사람 객체가 할 수 있는 동작
  great() {
  console.log(`안녕하세요, 제 이름은 ${this.name}이고 나이는 ${this.age}살 입니다.`)}
} 

// 새로운 사람 객체를 만든다.
const person1 = new Person('Hyunmer', 17);
person1.greet(); 
// 안녕하세요, 제 이름은 Hyunmer이고 나이는 17살입니다.

1. 같은 구조의 여러 객체를 만들기 위한 틀.

2. 속성(name, age): 재료가 어떤 모양과 특징(이름, 나이 등등...) 을 가지게 될 지를 정의하는 부분. 객체가 만들어질 때 각각의 속성에 고유한 값이 주어진다.

3. 메서드(greet): 짜여진 물건이 할 수 있는 행동(인사하기) 이다.

4. 생성자(constructor): 거푸집에 재료를 넣고 모양을 찍어낼 때, 모양을 초기화하고 완성시키는 과정이다.

그렇다면 Typescript에서 class 선언은 어떻게 하면 좋을까? 조금만 더 알아보도록 하자.

✨ 클래스(class) 선언하기

// 에러발생

 class Car {
   constructor(color) {
     this.color = color; }
     start() { console.log("start"); }
 }

const bmw = new Car("red");

javascript 에서는 문제가 되지 않겠지만 typescript 에서는 에러가 발생하는 것을 알 수 있다.

이는 멤버변수(클래스 내부에 선언된 변수)를 선언하지 않아서 생기는 오류인데, type 을 엄격하게 체크하는 typescript 에서는 class 속성의 type 을 미리 알려줘야 한다.

// ts 에서는 멤버 변수를 미리 선언해줘야 한다.

class Car {
  // color 속성의 타입을 string으로 명시
  color: string; 
  
  constructor(color: string) {
    this.color = color;
  }
  start() {
    console.log("start");
  }
}

const bmw = new Car("red");

물론, 멤버변수를 미리 선언하지 않는 방법도 있다.
접근 제한자 또는 readonly 를 사용하는 것이다. 접근 제한자의 종류를 먼저 작성하고, 다음 포스트에서 더 자세히 적어보도록 하겠다.

접근 제한자 종류

• public
• private
• protected