class 구조 - TypeScript

클래스 본문에서 멤버 변수를 선언하고 생성자에서 초기화하는 방법

class App {
// 멤버 변수 선언
  private domApp: Element;               // private 멤버 변수 선언
  private renderer: THREE.WebGLRenderer; // private 멤버 변수 선언
  private scene: THREE.Scene;            // private 멤버 변수 선언
  private camera?: THREE.PerspectiveCamera; // private 멤버 변수 선언 (optional)

 // 생성자에서 멤버 변수 초기화
  constructor() {
    this.domApp = document.querySelector('#app')!;
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.domApp.appendChild(this.renderer.domElement);
    this.scene = new THREE.Scene();
    
     this.setupCamera()
  }
  // 메서드(멤버함수)
  private setupCamera() {
    const domApp = this.domApp
    const width = domApp.clientWidth
    const height = domApp.clientHeight

    this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100)
    this.camera.position.set(2,2,3.5);

    new OrbitControls(this.camera, this.domApp as HTMLElement)
  }
}

- TypeScript에서 클래스 멤버 변수는 private, protected, public과 같은 접근 제한자를 사용하여 선언할 수 있습니다.

- 이 방법을 사용하면 생성자 파라미터에 해당 변수를 별도로 표기할 필요가 없습니다.

- type 표시가 없으면, public 입니다.

- 클래스에서 멤버 변수는 객체의 데이터를 저장하며, 주로 생성자에서 초기화됩니다.

- 메서드(멤버 함수)는 생성자 뒤에 위치하는 것이 일반적이며, 멤버 변수와는 구분됩니다.

- 이 방법으로 멤버 변수를 선언하면, 굳이 생성자 함수에서 초기화 하지 않아도, 멤버 함수(method) 통해서 초기화 할 수 있습니다.

 

 

생성자 파라미터에 접근 제한자를 사용하여 멤버 변수를 선언하는 방법

class App {
  // 생성자 파라미터를 통해 멤버 변수를 선언 및 초기화
  constructor(
    private domApp: Element,
    private renderer: THREE.WebGLRenderer,
    private scene: THREE.Scene,
    private camera?: THREE.PerspectiveCamera
  ) {}
  
// 메소드(멤버 함수)
  initialize() {
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.domApp.appendChild(this.renderer.domElement);
  }
}

const app = new App(
  document.querySelector('#app')!,
  new THREE.WebGLRenderer({ antialias: true }),
  new THREE.Scene()
);
app.initialize();

- 이 방법이 간결하고, 가독성이 좋아 추천합니다.

- 생성자에서 파라미터를 통해 멤버 변수가 자동으로 초기화되므로 중복된 코드가 줄어듭니다.

- 멤버 변수를 생성자에서 선언 및 초기화하려면 해당 변수를 클래스 본문에 미리 선언하지 않아야 합니다. 반대로, 이미 클래스 본문에 선언된 멤버 변수를 생성자 파라미터에서 재 선언하면 안 됩니다.

 

** TypeScript 만이 접근제한자, private, protected, public 의 개념이 있고, JavaScript는 모두 public 입니다.