Typescript Basic : Class

0. 접근자 (Access Modifier)

  0-1 public - 모든 클래스에서 접근가능

  0-2 protected - 현재 클래스와 이를 상속한 클래스에서만 접근가능

  0-3 private - 현재 클래스에서만 접근가능

 

1. Class의 속성의 기본 접근자는 Java와 다르게 public이다. 

 

class Customer {
  firstName: string
  lastName: string

  constructor(firstName: string, lastName: string) {
    this.firstName = firstName
    this.lastName = lastName
  }
}

let customer = new Customer("Pilseong", "Heo")

console.log(customer.firstName);
console.log(customer.lastName);

 

2. 수정자 (Getter / Setter)

  2-0 수정자의 기본 접근 설정은 public이다.

  2-1 set / set 키워드는 ES5이상의 Javascript버전에서만 사용된다.

  2-2 --target ES5 option을 compile시에 추가해야 한다.

  2-3 getter/setter 자동생성은

    2-3-1 VS code에서 속성라인을 드레그 후 풍선팁을 누르면 generate get/set accessor를 자동생성된다.

  2-4 속성이름이 _로 시작하는 것은 암묵적인 룰로 안지켜도 되지만 많은 개발자가 이런 식으로 사용한다.

  2-5 아래처럼 설정하면 set / get으로 지정된 이름의 메소드 이름으로 내부 속성을 접근할 수 있다.

 

class Customer {

  private _firstName: string
  private _lastname: string

  constructor(firstName: string, lastName: string) {
    this._firstName = firstName
    this._lastname = lastName
  }

  set firstName(firstName: string) {
    this._firstName = firstName
  }

  get firstName(): string {
    return this._firstName
  }

  set lastName(lastName: string) {
    this._lastname = lastName
  }

  get lastName(): string{
    return this._lastname
  }
}

let customer = new Customer("Pilseong", "Heo")

console.log(customer.firstName);
console.log(customer.lastName);


// 컴파일
$ tsc --noEmitOnError  --target ES5 Customer.ts

// 실행 결과
$ node Customer.js
Pilseong
Heo

 

3. Typescript는 Parameter property라는 것을 지원한다. 즉 생성자에서 바로 속성을 정의하는 기능이다.

  3-1 아래의 여러 줄을 한 줄로 정리할 수 있다.

 

class Customer {
  private _firstName: string
  private _lastName: string

  constructor(firstName: string, lastName: string) {
    this._firstName = firstName
    this._lastName = lastName
  }
  
  // getter / setter
}


// parameter property를 이용한 정의
class Customer {
  constructor(private _firstName: string, private _lastName: string) {}
  
  // getter / setter
}

 

4. import / export  구문

  4-1 export는 클래스, 함수, 변수 등을 다른 파일에서 사용할 수 있도록 한다.

    4-1-1 아래는 Customer.ts파일의 내용으로 export를 사용하여 export하고 있다.

export class Customer {
  constructor(private _firstName: string, private _lastName: string) {}

  set firstName(firstName: string) {
    this._firstName = firstName
  }

  get firstName(): string {
    return this._firstName
  }

  set lastName(lastName: string) {
    this._firstName = lastName
  }

  get lastName(): string{
    return this._lastName
  }
}

 

  4-2 import는 외부에서 export한 것을 가지고 오는 기능이다.

    4-2-1 아래는 Driver.ts파일의 내부인데, import로 Customer 클래스를 가져온다.

    4-2-2 Customer가 { } 로 묶여 있는 것은 default export 한 것이 아니라서

      4-2-2-1 필요한 속성만 object interpolation을 사용하여 가져와야 한다.

 

import { Customer } from './Customer'

let customer = new Customer("Pilseong", "Heo")

console.log(customer.firstName);
console.log(customer.lastName);