반응형
Notice
Recent Posts
Recent Comments
«   2024/06   »
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
Archives
Today
Total
관리 메뉴

UP

Typescript : 생성자 (Constructor), 접근 제한자 (Access Modifiers), Getter 와 Setter 본문

TypeScript

Typescript : 생성자 (Constructor), 접근 제한자 (Access Modifiers), Getter 와 Setter

cijbest 2021. 5. 30. 14:19

생성자 (Constructor)

  • 클래스로부터 객체를 생성할 때, 호출되며 '객체의 초기화를 담당'.
// 생성자(Constructor)
constructor(fullName: string, age: number, jobTitle: string, 
            hourlyRate: number, workingHourPerWeek: number) {
    this.fullName = fullName;
    this.age = age;
    this.jobTitle = jobTitle;
    this.hourlyRate = hourlyRate;
    this.workingHourPerWeek = workingHourPerWeek;
}
  • app.ts
class Employee { 
    // 프로퍼티(Property)
    private _fullName: string;
    age: number;
    jobTitle: string;
    hourlyRate: number;
    workingHourPerWeek: number;

    // 생성자(Constructor)
    constructor(fullName: string, age: number, jobTitle: string, 
        hourlyRate: number, workingHourPerWeek: number) {
            this.fullName = fullName;
            this.age = age;
            this.jobTitle = jobTitle;
            this.hourlyRate = hourlyRate;
            this.workingHourPerWeek = workingHourPerWeek;
    }

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

let employee = new Employee(); // 💥에러
let employee = new Employee('미래', 20, '주니어 웹개발자', 40, 35); // 정상
employee.printEmployeeDetails(); // 미래의 직업은 주니어 웹개발자이고 일주일의 수입은 1400달러 이다.

생성자()

생성자 선언 시 매개변수가 없어 에러 발생.

  • 생성자 선택적 매개변수
// 생성자(Constructor)
// 선택적 매개변수 : jobTitle, hourlyRate, workingHourPerWeek
constructor(fullName: string, age: number, jobTitle?: string, 
        hourlyRate?: number, workingHourPerWeek?: number) {
this.fullName = fullName;
  this.age = age;
  this.jobTitle = jobTitle;
  this.hourlyRate = hourlyRate;
  this.workingHourPerWeek = workingHourPerWeek;
}
let employee = new Employee('미래', 20); // 미래의 직업은 undefined이고 일주일의 수입은 NaN달러 이다.

let employee = new Employee('미래', 20, '주니어 웹개발자'); // 미래의 직업은 주니어 웹개발자이고 일주일의 수입은 NaN달러 이다. 

employee.printEmployeeDetails();

접근 제한자 (Access Modifiers)

  • 클래스 속 멤버 변수(프로퍼티)와 메소드에 적용될 수 있는 키워드.
  • 클래스 외부로부터의 접근을 통제. → 버그를 줄이고 코드의 안정성 향상.
  • Public : 클래스의 외부에서 접근 가능. 접근 제한자가 없으면 public으로 취급.
  • Private : 클래스 내에서만 접근 가능. 클래스의 외부에서 접근 불가능(비공개 멤버). 변수 앞에 '_'로 표시
  • Protected : 클래스 내부, 그리고 상속받은 자식 클래스에서 접근 가능.
class Employee {
    // 프로퍼티(Property)
    private _fullName: string; // private 제한자
    age: number;
    jobTitle: string;
    hourlyRate: number;
    workingHourPerWeek: number;
:
}

let employee = new Employee('하나', 28, '프로젝트 매니저', 55, 35);
employee.fullName = '우주'; // 💥에러
console.log(employee3.fullName); // 💥에러

private 제한자가 붙은 변수는 일반적으로 변수 앞에 ''_''를 붙인다.

private 에러

private 변수에는 접근이 불가능하다는 에러문.

Getter & Setter

  • private 변수에 접근하기 위해선 gettersetter를 사용

    class Employee {
    /*
    // 프로퍼티(Property)
    private _fullName: string;
    age: number;
    jobTitle: string;
    hourlyRate: number;
    workingHourPerWeek: number;
    
    // 생성자(Constructor)
    constructor(fullName: string, age: number, jobTitle?: string, 
        hourlyRate?: number, workingHourPerWeek?: number) {
            this.fullName = fullName;
            this.age = age;
            this.jobTitle = jobTitle;
            this.hourlyRate = hourlyRate;
            this.workingHourPerWeek = workingHourPerWeek;
    }
    */
    
    // 위의 두 개를 합쳐 표현한 것
    // Constructor의 매개변수에 Access Modifiers 직접 적용
    constructor(
        private _fullName: string, 
        private _age: number, 
        private _jobTitle?: string, 
        private _hourlyRate?: number, 
        public workingHourPerWeek?: number) {
    }
    :

Constructor의 매개변수에 Access Modifiers 직접 적용

  • 객체가 생성될 때, 생성자(Constructor)의 매개변수로 전달된 값은, 객체의 프로퍼티 값으로 자동으로 그 값이 초기화되고 할당된다.
  • 프로퍼티 + 생성자 + 접근 제한자
class Employee {
    /*
    // 프로퍼티(Property)
    private _fullName: string;
    age: number;
    jobTitle: string;
    hourlyRate: number;
    workingHourPerWeek: number;

    // 생성자(Constructor)
    constructor(fullName: string, age: number, jobTitle?: string, 
        hourlyRate?: number, workingHourPerWeek?: number) {
            this.fullName = fullName;
            this.age = age;
            this.jobTitle = jobTitle;
            this.hourlyRate = hourlyRate;
            this.workingHourPerWeek = workingHourPerWeek;
    }
    */

    // 위의 두 개를 합쳐 표현한 것
    // Constructor의 매개변수에 Access Modifiers 직접 적용
    constructor(
        private _fullName: string, 
        private _age: number, 
        private _jobTitle?: string, 
        private _hourlyRate?: number, 
        public workingHourPerWeek?: number) {
    }
:

실습 코드 : https://github.com/cijbest/TIL/tree/master/TypeScript/실습/Day_9

공부 영상 출처 : [땅콩코딩] https://youtu.be/sPM94o5_WVU

반응형
Comments