[ TypeScript ]- 생성자(Constructor)

Constructor (생성자)

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.fullName = "Park";
employee1.age = 30;
employee1.jobTitle = "주니어 개발자";
employee1.hourlyRate = 40;
employee1.workingHoursPerWeek = 35;
employee1.printEmployeeDetails();

코드를 보면 객체가 클라스를 통해서 만들어지고 그 후에 객체의 property 초기 값이 따로따로 할당 되어 있다.
코드가 복잡하고 읽기 쉽지 않다는 단점이 있다.
객체지향 언어에는 Constructor (생성자) 라고 불리는 것이 있다. 코드를 조금더 깔끔하고 명확하게 향상 시킬 수 있다.
모든 클래스는 컨스트럭터 라고 불리는 메소드를 가질수 있다.
컨스트럭터 는 클래스로 부터 객체를 생성할 때, 호출되는 함수이며 " 객체의 초기화를 담당 " 한다.

Constructor 사용

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

  //
	constructor(fullName:string, 
                 age:number,
                 jobTitle:string,
                 hourlyRate: number,
                 workingHoursPerWeek: number) {
      
      this.fullName = fullname;
      this.age = age;
      this.jobTitle = jobtitle;
      this.hourlyRate = hourlyRate;
      this.workingHoursPerWeek = workingHoursPerWeek;
    
    }

  //
  printEmployeeDetails = (): 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();

상단의 Employee 클래스 내 에 constructor 를 만들어 준다.
constructor 메소드는 매개변수 즉 parameter 를 가질 수 있다.
이렇게 전달된 매겨분수를 객체 생성 시에 맴버 변수인 프로퍼티의 값으로 초기화 할 수 있다.

this. 뒤에 있는 것들은 상단에 나타난 클래스의 멤버 변수 들을 가르키는 것이다. 실제 에디터에서 코드 위에 마우스를 가져가면 설명이 나온다.

= equal 사인 뒤에 는 전달된 매개변수를 나타낸다. 마우스를 올려보면 parameter 라고 에디터에서는 설명을 해준다.

⚠️ 컨스트럭터를 만들고 나면 이전에는 보이지 않았던 에러메시지가 생기는데,
코드 아래 부분에 new Employee 부분에서 에러가 생긴다.

• 에러 메시지에서는 컨스트럭터에 들어갈 매개변수들을 보여주면서 컨스트럭터에 전달될 argument (인자) 가 전달되 지 않았다고 메시지가 나온다.

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

이렇게 클래스를 통해서 객체를 생성 할 때 컨스트럭터 메소드에 정의된 매개변수들의 값이 new Employee ( ) 괄호 안에 인자로서 그 초기 값이 전달 되어야 한다는 것을 뜻한다.

let employee1 = new Employee('Park', 30, '주니어 개발자', 40, 35);

이렇게 전달을 하고 나면 에러는 사라지게 된다.
그리고 전달을 해주었기 때문에 아래 복잡했던 코드들은 지워주면 된다.
보다 깔끔하게 코드를 만들 수가 있고 가독성이 좋아지게 된다.

→employee2, employee3 등 클래스를 기반한 객체를 여러개 만들어 낼 수 도 있다.

constructor(fullName:string, 
                 age:number,
                 jobTitle:string,
                 hourlyRate: number,
                 workingHoursPerWeek: number) {

그런데 Employee 컨스트럭터는 전달되고 있는 다섯개의 매개변수를 강제 하고 있는데 만약 여기서 매개 변수들을 객체가 생성될 때 반드시 할당 하지 않아도 되는 값들로 만들고 싶다면

constructor(fullName?:string, 
                 age?:number,
                 jobTitle?:string,
                 hourlyRate?: number,
                 workingHoursPerWeek?: number) {

그냥 : 콜론 앞에 ? 물음표를 붙여 주고 옵셔널 매개변수로 만들면 끝 !
하지만 짚고 넘어가야 할 것이 있는데

⚠️ 선택적 매개변수 들은 반드시 필수 매개변수 뒤에 위치 해야 한다.

타입스크립트 규칙상 하나의 매개변수가 선택적 매개변수가 되면 그 매개변수의 오른쪽에 위치한 나머지 매개변수들 역시 옵셔널, 즉 선택적 매개변수가 되어야 한다.