본문 바로가기
TypeScript

Class

by eddypark 2023. 8. 30.

(1) 클래스 정의

- 클래스 몸체에 클래스 프로퍼티를 선언할 수 없고 반드시 생성자 내부에서 클래스 프로퍼티를 선언하고 초기화한다.

class a {
	b: string;
	constructor(b) {
		this.b = b;     // 클래스 프로퍼티의 선언과 초기화
  }

	c() {
		console.log(`a, ${this.b}, c`);
  }
}

const e = new a('wangi');
e.walk(); // a, b, c

 

(2) 접근 제한자

- public, private, protected를 지원하며 의미도 동일하다.

- TypeScript는 접근 제한자를 생략하면 암묵적으로 public이 선언된다.

접근 가능성
public
protected
privated
클래스 내부
O
O
O
자식 클래스 내부
O
O
X
클래스 인스턴트
O
X
X
class a {
  public x: string;
  protected y: string;
  private z: string;

  constructor(x: string, y: string, z: string) {
    this.x = x;            // 접근 제한자 모두 클래스 내부에서 참조 가능하다.
    this.y = y;
    this.z = z;
  }
}

const b = new a('x', 'y', 'z');

console.log(b.x);  // public는 클래스 인스턴스를 통해 클래스 외부에서 참조 가능하다.
console.log(b.y);  // error    protected는 클래스 인스턴스를 통해 클래스 외부에서 참조할 수 없다.
console.log(b.z);  // error    private는 클래스 인스턴스를 통해 클래스 외부에서 참조할 수 없다.

class c extends a{
  constructor(x: string, y: string, z: string) {
    super(x, y, z);

    console.log(this.x);  // public는 자식 클래스 내부에서 참조 가능하다.
    console.log(this.y);  // protected는 자식 클래스 내부에서 참조 가능하다.
    console.log(this.z);  // error   private는 자식 클래스 내부에서 참조할 수 없다.
  }
}

 

(3) 생성자 파라미터에 접근제한자 선언

- 생성자 파라미터에도 접근 제한자를 선언할 수 있다.

- 이때 접근 제한자가 사용된 파라미터는 암풀적으로 클래스 프로퍼티에 선언된다.

- 또한 별도의 초기화가 없어도 암묵적으로 초기화가 된다.

- 생성자 파라미터에 접근 제한자를 선언하지 않으면 생성자 내부에서만 유효한 지역변수가 된다.

class a {
  constructor(public x: string) { }  // x는 프로퍼티로 선언되고 자동 초기화가 된다.
}

const b = new a('wangi');
console.log(b);                      // a { x: 'wangi' }
console.log(b.x);                    // wangi

class c {
  constructor(private x: string) { } // x는 프로퍼티로 선언되고 자동 초기화가 된다.
}

const d = new c('wangi');

console.log(d);                      // c { x: 'wangi' }
console.log(d.x);                    // error   x가 private로 선언되어있으므로 외부에서 참조 불가능하다.

 

(4) Accessor

- 객체 특성 속성의 접근과 할당을 제어할 수 있다.

- 사용자가 함부로 설정을 바꾸지 못하도록 제어할 때 쓰인다.

- get / set

let passcode = "secret passcode";
class a {
    private x: string;
    get x(): string {
        return this.x;
    }
    set x(y: string) {
        if (passcode && passcode == "secret passcode") {     // 비밀코드를 아는사람만 x의 할당 값을 바꿀 수 있다.
            this.x = y;
        }
        else {
            console.log("Error");
        }
    }
}
let b = new a();
b.x= "wangi";
if (b.x) {
    console.log(b.x);
}

 

(5) ReadOnly

- readonly가 선언된 클래스 프로퍼티는 선언 시 또는 생성자 내부에서만 값을 할당할 수 있다.

- 그 외의 경우 오직 읽기만 가능하다.

class a {
  private readonly x: number = 5;
  private readonly y: string;

  constructor() {
    this.y = 'wangi';
  }

  b() {
    this.x = 10;                 // error readonly가 선언된 프로퍼티는 재할당이 불가능하다.
    this.y = 'Hi';               // error readonly가 선언된 프로퍼티는 재할당이 불가능하다.

    console.log(`x: ${this.x}`); // x: 5
    console.log(`y: ${this.y}`); // y: wangi
  }
}

new a().b();

 

(6) Static 키워드

- TypeScript에서는 클래스 프로퍼티에도 사용할 수 있다.

- 클래스 이름으로 호출해야한다.

- 정적 메서드에서는 this를 사용할 수 없다. 정적 메소드 내부에서는 this는 클래스 자신을 가리킨다.

class a {
  static x = 0;
  constructor() {
    a.x++; // 생성자가 호출될 때마다 1씩 증가시킨다.
  }
}

var b = new a();
var c = new a();

console.log(a.x);  // 2
console.log(c.x);  // error    x는 static으로 선언되있기 때문에 인스턴스로 호출이 불가능하다.

 

(7) 추상 클래스

- 내용 없이 메서드 이름과 타입만 선언된 메서드를 말한다.

- 직접 인스턴스를 생성할 수 없고 상속만을 위해 사용한다.

- 추상 클래스를 상속한 클래스는 추상 클래스의 추상 메소드를 반드시 구현해야 한다.

abstract class a {
  abstract x(): void;        // 추상 메소드
  y(): void {                // 일반 메소드
    console.log('wangi');
  }
}

new a();                       // error   직접 인스턴스를 생성할 수 없다.

class b extends a {
  x() {
    console.log('eddy');
  }
}

const c = new b();
c.x();                          // wangi
c.y();                          // eddy

'TypeScript' 카테고리의 다른 글

타입 앨리어스  (0) 2023.09.04
Generic  (0) 2023.09.01
Module  (0) 2023.08.31
Decorator  (0) 2023.08.30
TypeScript란?  (0) 2023.08.30