타입스크립트 클래스와 객체 만들기

let empName: string = "김민제";
let empAge: number = 26;
let empJob: string = "개발자";

function printEmp(empName: string, empAge: number, empJob: string): void {
  console.log(`이름: ${empName}`);
  console.log(`나이: ${empAge}`);
  console.log(`직업: ${empJob}`);
}

printEmp(empName, empAge, empJob);

 

직원들의 이름, 나이, 직업이 있을 때 이를 출력하는 함수가 있다.

위 코드를 실행하면 이름, 나이, 직업이 잘 출력되지만, 한 가지 문제가 있다.

만약 직원들이 수백명이 존재한다면, 직원 정보가 더 많이 존재한다면 위 코드는 아주 더러워질 것이다.

 

이를 클래스를 통하여 구조화하여 깔끔하게 정리해보자.

 

클래스

class Employee {
  empName: string | undefined;
  empAge: number | undefined;
  empJob: string | undefined;

  printEmp = (): void => {
    console.log(`이름: ${this.empName}`);
    console.log(`나이: ${this.empAge}`);
    console.log(`직업: ${this.empJob}`);
  };
}

let minje: Employee = new Employee();
minje.empName = "김민제";
minje.empAge = 26;
minje.empJob = "개발자";

minje.printEmp();

Employee라는 클래스를 만들어 그 안에 empName, empAge, empJob을 저장하도록 하였다.

(생성자가 없을 때 empName: string | undefined가 아닌 empName: string으로 하면 에러가 발생한다)

 

또한 클래스 내에 printEmp()라는 함수가 있어 편리하게 직원 정보를 출력할 수 있다.

minje라는 Employee를 만들어 empName, empAge, empJob을 설정해주고,

minje.printEmp()를 통해 minje의 정보를 편리하게 출력할 수 있게 되었다.

 

생성자

class Employee {
  empName: string;
  empAge: number;
  empJob: string;

  constructor(empName: string, empAge: number, empJob: string) {
    this.empName = empName;
    this.empAge = empAge;
    this.empJob = empJob;
  }

  printEmp = (): void => {
    console.log(`이름: ${this.empName}`);
    console.log(`나이: ${this.empAge}`);
    console.log(`직업: ${this.empJob}`);
  };
}

let minje: Employee = new Employee("김민제", 26, "개발자");

minje.printEmp();

타입스크립트에서 생성자는 constructor()를 통해 설정할 수 있다.

다른 언어에서와 마찬가지로 매개변수로 값들을 받아준 뒤,

this.empName = empName과 같이 값을 설정해주면 된다.

 

기존에는 new Employee()로 빈 클래스를 생성한 뒤 empName, empAge, empJob을 따로 지정해줬지만,

생성자를 활용하여 편리하게 new Employee(empName, empAge, empJob)으로 객체를 생성할 수 있게 되었다.

(생성자가 있다면 empName: string | undefined가 아닌, empName: string도 가능해진다)

 

class Employee {
  constructor(
    empName: string,
    empAge: number,
    empJob: string
  ) {}

  printEmp = (): void => {
    console.log(`이름: ${this_empName}`);
    console.log(`나이: ${this.empAge}`);
    console.log(`직업: ${this.empJob}`);
  };
}

또는, 위와 같이 생성자 내에 멤버변수들을 정의하여 깔끔하게 생성자와 멤버변수를 한 번에 정의할 수도 있다.

 

접근지정자

객체지향적 개발의 원칙 중 캡슐화에 따르면, 클래스 내 멤버변수는 접근할 수 없어야 한다.

그러나 위의 코드에서는 minje.empName과 같이 멤버변수에 쉽게 접근할 수 있다.

이를 보호하기 위해서는 public, private, protected 접근지정자를 활용하여 멤버변수를 보호해주어야 한다.

class Employee {
  private _empName: string;
  private _empAge: number;
  private _empJob: string;

  constructor(empName: string, empAge: number, empJob: string) {
    this._empName = empName;
    this._empAge = empAge;
    this._empJob = empJob;
  }

  printEmp = (): void => {
    console.log(`이름: ${this._empName}`);
    console.log(`나이: ${this._empAge}`);
    console.log(`직업: ${this._empJob}`);
  };
}

let minje: Employee = new Employee("김민제", 26, "개발자");

minje.printEmp();

minje.empName = "Kim"; // 에러
// 'empName' 속성은 private이며 'Employee' 클래스 내에서만 액세스할 수 있습니다.ts(2341)

멤버변수 empName, empAge, empJob 앞에 "private"을 붙여 보호를 해주었다.

이제 만약 클래스의 private인 멤버변수를 접근하려고 하면 에러가 발생할 것이다.

실제로 코드의 맨 밑 줄에서 minje.empName을 변경하려고 할 때 에러가 발생한다.

(private한 멤버변수는 앞에 언더바를 붙여주는 것이 좋다)

 

Getter와 Setter

class Employee {
  private _empName: string;
  private _empAge: number;
  private _empJob: string;

  constructor(empName: string, empAge: number, empJob: string) {
    this._empName = empName;
    this._empAge = empAge;
    this._empJob = empJob;
  }

  get empName() {
    return this._empName;
  }

  set empName(newName: string) {
    this._empName = newName;
  }

  printEmp = (): void => {
    console.log(`이름: ${this._empName}`);
    console.log(`나이: ${this._empAge}`);
    console.log(`직업: ${this._empJob}`);
  };
}

let minje: Employee = new Employee("김민제", 26, "개발자");

minje.printEmp();

console.log(minje.empName); // 김민제
minje.empName = "Kim";
console.log(minje.empName); // Kim

타입스크립트에서는 getEmpName(), setEmpName()과 같이 함수를 따로 만들지 않고,

get empName(), set empName()과 같이 getter와 setter 함수를 생성할 수 있다.

위와 같이 empName에 대해 getter와 setter 함수를 설정해준 뒤 minje.empName을 호출하고 변경해보면

이전에 발생하던 오류는 더 이상 발생하지 않고 잘 작동하는 것을 볼 수 있다.