🟣 타입스크립트에서는 객체지향 프로그래밍의 클래스를 정의하고 사용할 수 있다.

Object Oriented Programming

어플리케이션을 실제 세상에 존재하는 객체와 같은 단위로 쪼개고 객체들이 서로 상호 작용함으로써 시스템이 동작되는것을 객체지향 프로그래밍 이라고 한다.

연관된 변수와 함수들을 한 덩어리로 묶어서 구조화하여 표현하는 프로그래밍 스타일을 말한다.

즉, 실제 삶으로 둘러싸고 있는 사물 객체의 개념을 코드에 대입시켜 덩어리 덩어리로 묶어서 코드를 작성 한다고 생각하면 이해하기 쉬울 수 있다.

객체지향 프로그래밍에서 Class 란 ?

객체지향 프로그래밍에서 클래스와 객체는 댈래야 땔수 없는 관계이다.
객체는 클래스를 통해 만들어 질 수 있고 클래스 는 객체가 어떤 모습을 가질지를 정의 하고 묘사하는 객체의 뼈대
즉, 객체를 만들어 내는 설계도 생산 틀이라고 생각 하면 된다.

예시

let fullName: string;
let age: number;
let jobTitle: string;
let hourlyRate: number;
let workingHoursPerWeek: number;

let printEmployeeDetails = (
  fullName: string;
  jobTitle: string;
  hourlyRate: number,
  workingHoursPerWeek: number
): void => {
  console.log{
    `${fullName} 의 직업은 ${jobTitle} 이고 일주일의 수입은 ${hourlyRate * workingHoursPerWeek}
  } 달러이다. `
  );
};

위 코드를 보면 직원에 대한 정보를 담을 수 있는 변수들 과 직원의 정보를 콘솔에 출력하는 함수 가 있다.

이렇게 직원에 관련된 변수들과 함수를 하나로 묶어서 직원 employee 라는 class 를 만드는 방법은
class 키워드를 넣고 대문자로 시작하는 이름을 만들어 준다.
그리고 { } 중괄호를 넣어준다.
중괄호 안에 만들어 놓은 변수들과 함수를 복사해서 클래스 안에 넣어준다.

클래스 내에서는 const 나 let 등 의 키워드가 필요 하지 않다.
그리고 함수내에 매개변수도 필요 하지 않다.
매개변수를 따로 적어주지 않아도 되는 이유는 클래스 내에서 정의된 변수들에 this 키워드를 주어 바로 접근이 가능하기 때문이다.

따라서 함수 내 콘솔로그 괄호 속에 변수들 앞에 this 키워드를 그냥 넣어주기만 하면 된다.

class Employee {
  fullName: string;
  age: number;
  jobTitle: string;
  hourlyRate: number;
  workingHoursPerWeek: number;

  printEmployeeDetails = () :void => {
    console.log (
      `${this.fullName} 의 직업은 ${this.jobTitle} 이고 일주일의 수입은 
          ${this.hourlyRate * this.workingHoursPerWeek} 달러이다.`
    );
  };
};

! 객체지향 프로그래밍에서 클래스 내에 정의된 변수들을 property 라고 하고 클래스 내에 정의된 함수들을 Method 라고 부른다.

클래스 인스턴스

위에서 언급했듯이 객체지향 프로그래밍에서 클래스는 객체를 만들어 내기 위한 설계도 생산 틀 이라고 표현 된다.
클래스를 통해서 객체를 생성할 때 클래스의 새로운 인스턴스 를 만든다는 용어를 사용한다.

 class Employee  {
  fullName: string;
  age: number;
  jobTitle: string;
  hourlyRate: number;
  workingHoursPerWeek: number;

  printEmployeeDetails = () : void => {
    console.log(
      `${this.fullName} 의 직업은 ${this.jobTitle} 이고 일주일의 수입은 
      ${this.hourlyRate * this.workingHoursPerWeek} 달러이다. `
    );
  };
 };

 let employee1 = new Employee ();
 employee1.printEmployeeDetails();

클래스의 인스턴스 즉 객체를 만들기 위해 선언된 클래스 아래 내 키워드를 넣어준다.

만들어진 객체 이름을 employee1 이라고 지어준다.
그리고 = equal 사인을 넣고 new 연산자를 넣어주고, 클래스의 이름인 Employee 그리고 괄호를 넣어준다.
코드가 실행 되면 employee 클래스를 바탕으로 employee1 이라는 객체가 생성 되는데 코드 에디터에서 객체 이름을 넣고 . 점을 찍고 p 를 입력하면 클래스 네임 메소드인 printEmployeeDetails 가 나타난다.
즉, employee1 객체는 Employee 클래스를 뼈대로 삼아 만들어진 객체 이기 때문에 Employee 클래스 내에 선언된 property 와 method 를 그대로 객체 자신의 property 와 method 로 가지게 된다.

-> node app.js 로 터미널에서 실행을 시키면 콘솔이 찍히는데 지금 위 코드 그대로 콘솔이 찍히게 되면 undefined 의 직업은 undefined 이고 일주일의 수입은 NaN 이다 라고 결과 값이 출력이 된다.

class Employee {
  fullName: string;
  age: number;
  jobTitle: string;
  hourlyRate: number;
  workingHoursPerWeek: number;

  pringEmployeeDetails = (): void => {
    console.log(
      `${this.fullName} 의 직업은 ${this.jobTitle} 이고 일주일의 수입은
      ${this.hourlyRate * this.workingHoursPerWeek} 달러이다. `
    );
  };
}

let employee1 = new Employee ();
employee1.fullName = "Park";
employee1.age = 30;
employee1.jobTitle = "주니어 개발자 " ;
employee1.hourlyRate = 40 ; 
employee1.workingHoursPerWeek = 35;
employee1.printEmployeeDetails ();

변수의 값에 할당을 해주고 다시 터미널에서 확인을 하면 정상적으로 출력이 되는것을 확인 할 수 있다.

클래스를 통해서 붕어빵 틀에 붕어빵을 찍어 내듯이 여러가지 독립된 객체를 만들어 낼 수 도 있다.