TS-Classes

Class

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

class Person {
  name
  constructor(name: string) {
    this.name = name
  }
}
const p1 = new Person('Mark')

console.log(p1.name)

constructor & initialize

class Person {
  name: string
  age: number
}
const p1 = new Person()

console.log(p1)

class Person {
  name: string = "Mark"
  age: number
}
const p1 = new Person()
p1.age = 39 // 초기값 없이 이후에 값을 설정 하고 싶을때
console.log(p1)

초기값이 없으면 에러가 뜬다

class Person {
  name: string = "Mark"
  age!: number // age 뒤에 ! 를 붙여준다
}
const p1 = new Person()
// p1.age = 39 // age 뒤에 ! 가 붙어있는데 값을 설정 하지 않은 경우
console.log(p1.age)
// undefined가 뜬다

접근 제어자 (Access Modifiers)

• 접근 제어자에는 public, private, protected가 있다
• 설정하지 않으면 public
• 클래스 내부의 모든 곳에(생성자, 프로퍼티, 메서드) 설정 가능하다
• private 으로 설정하면 클래스 외부에서 접근할 수 없다
• 자바스크립트에서 private 지원하지 않아 오랫동안 프로퍼티나 메서드 이름 앞에 _를 붙여서 표현 했다

class Person {
  name: string = 'Mark'
  age: number

  private constructor(age: number) {
    this.age = age
  }

  async init() {}
}
const p1 = new Person(39) // error
// p1.age = 39
console.log(p1.age)

constructor에 private 설정 한 경우 외부에서 생성자 호출 불가

class Person {
  name: string = 'Mark'
  private age: number

  constructor(age: number) {
    this.age = age
  }

  async init() {}
}
const p1 = new Person(39) 
// p1.age = 39
console.log(p1.age) // error

프로퍼티에 private 를 붙였을때 age에 접근 불가

initialization in constructor parameters

// 기존
class Person {
  name: string
  age: number

  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
}
const p1 = new Person('Mark', 39)
console.log(p1)


// 수정

class Person {
  constructor(public name: string, public age: number) {
  }
}
const p1 = new Person('Mark', 39)
console.log(p1)

Getters & Setters

class Person {
  constructor(public name: string, public age: number) {}
}
const p1 = new Person('Mark', 39)
console.log(p1.name) // get
p1.name = 'John' // set

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

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

  set name(n: string) {
    // return 해줄 필요 없다
    // 인자를 받아 넣어 준다
    console.log('set')
    this._name = n
  }
}
const p1 = new Person('Mark', 39)
console.log(p1.name) // get
p1.name = 'John' // set