Class 정의 / 초기화 / Getter And Setter

Class란

object를 만드는 blueprint이다. class내부에는 함수, 멤버 등 여러가지를 정의할 수 있다.

 

클래스를 정의하는 방법

• class키워드를 이용하여 클래스를 만들 수 있다.
• class 이름은 보통 대문자를 이용한다.
• new를 이용하여 class를 통해 object를 만들 수 있다.
• contsructor를 이용하여 object를 생성하면서 값을 전달 할 수 있다.
• this를 이용해서 만들어진 object를 가르킬 수 있다.
• JS로 컴파일되면 es5의 경우 function으로 변경된다.

class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
}

 

클래스 초기화

멤버는 무조건적으로 변수가 들어가야만 한다. 직접적으로 정의하거나 ! 를 사용해서 무시할 수도 있지만, ! 는 런타임에러를 발생시키기 때문에 조심해야 한다.

class Person {
    name: string = "Mark";
    age!: number;           // 값을 초기화 하지 않아도 된다.
}

 

아래와 같이 제어자를 붙이면 필드를 정의하지 않아도 초기화가 가능하다.

class Person {          
    constructor(public name: string, public age: number) {}
}

 

constructor사용하기

• 생성자 함수가 없으면 디폴트 생성자를 사용한다.
• 한개라도 생성자를 정의하면 디폴트 생성자는 쓸 수 없다.

class Person { 
  name: string = "Mark"; 
  age: number; 
  constructor(age?: number) { 
    if(age === undefined) { 
      this.age = 20; 
    } else { 
      this.age = age; 
    } 
  } 
}

 

readonly사용하기

readonly를 사용해서 초기화 할 수 있지만 초기화 이후에는 값을 변경하지 못한다.

 

초기화 방법 1 - 직접 필드에 값을 대입

class Person {

    public readonly name: string = "Mark";
    private readonly country: string = "Korea";

    constructor(private _name: string, private age: number) { }

    // 에러발생
    hello() {
        this.country = "China";
    }
}

 

초기화 방법 2 - 생성자내에서 초기화한다.

class Person {

    public readonly name: string = "Mark";
    private readonly country: string;

    constructor(private _name: string, private age: number) { 
      this.country = "Korea";
    }
}

접근 제어자

접근제어자는 크게 3가지가 있다.

제  어  자	설    명
public	디폴트, 외부에서 접근 가능
private	내부에서만 접근 가능, 필드 이름 앞에 언더바(_)를 붙인다.
protected	상속된 클래스 내에서까지 접근 가능

 

class Person {
    name: string = "Mark";
    private _age: number;          

    constructor(age?: number) {
        if(age === undefined) {
            this._age = 20;
        }
        else {
            this._age = age;
        }
    }
}

 

Getter And Setter

• Getter는 필드 값을 리턴해준다.

class Person {          
    constructor(private _name: string, private age: number) {}

    get name() {
        //
        console.log('get');
        return this._name;
    }
}

const p1 = new Person("Mark", 39);
console.log(p1.name);    // get을 하는 함수 getter

• Setter는 필드의 값에 새로운 값을 대입 할 수 있도록 해준다.

class Person {          
    constructor(private _name: string, private age: number) {}

    set name(n: string) {
        //
        console.log('set');
        this._name = n;
    }
}

const p1 = new Person("Mark", 39);
p1.name = "Kim";         // set을 하는 함수 setter

 

클래스내 인덱스 만들기

[]를 활용하여 index의 이름을 지정 할 수 있다. 하지만, index내 필드를 정하려고 한다면 index에 들어갈 타입과 같은 타입 만이 가능하다.

class Students {
    [index :string]: "male" | "female";

    mark: "male" = "male";   // 인덱스와 같은 타입만 지정 가능
}

const studentsA = new Students();
studentsA.mark = "male";
studentsA.jage = "male";

console.log(studentsA);

const studentsB = new Students();
studentsB.chloe = "male";
studentsB.alex = "female";
studentsB.anna = "female";

console.log(studentsB);