What are Classes

class?

• object 를 만드는 blueprint(청사진, 설계도)
• 클래스 이전에 object 를 만드는 기본적인 방법은 fucntion
• JavaScript 에도 class 는 es6 부터 사용 가능
• OOP 을 위한 초석
• TypeScript 에서는 클래스도 사용자가 만드는 타입의 하나

Quick Start - class

// example.ts
// 클래스명은 대문자로 시작
class Person {}

const p1 = new Person();

console.log(p1); // Person {}

// es5
// example.js
"use strict";
var Person = (function () {
    function Person() {
    }
    return Person;
}());
var p1 = new Person();
console.log(p1); // Person {}

// es6
// example.js
"use strict";
class Person {
}
const p1 = new Person();
console.log(p1); // Person {}

---

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

const p1 = new Person("Mark");

console.log(p1); // Person { name: 'Mark' }

---

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

constructor & initialize

class Person {
 name: string;
 age: number;
}
// 속성 'name'은(는) 이니셜라이저가 없고 생성자에 할당되어 있지 않습니다.ts(2564)
// 속성 'age'은(는) 이니셜라이저가 없고 생성자에 할당되어 있지 않습니다.ts(2564)

class Person {
  name: string = "Mark";
  age: number = 39;
}

const p1: Person = new Person();

console.log(p1); // Person { name: 'Mark', age: 39 }
console.log(p1.age); // 39

class Person {
  name: string = "Mark";
  age: number;
}
// 속성 'age'은(는) 이니셜라이저가 없고 생성자에 할당되어 있지 않습니다.ts(2564)

const p1: Person = new Person();

console.log(p1.age); // undefined

class Person {
 name: string = "Mark";
 age!: number;
}
// ! 사용할 때 주의해야 함

const p1: Person = new Person();

p1.age = 39;
console.log(p1.age); // 39

class Person {
  name: string = "Mark";
  age: number;

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

const p1: Person = new Person(39);
const p2: Person = new Person();
console.log(p1);
console.log(p1.age);

class Person {
  name: string = "Mark";
  age!: number;

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

  async init() {
    
  }

}

const p1: Person = new Person(39);
const p2: Person = new Person();
console.log(p1);
console.log(p1.age);

---

• 생성자 함수가 없으면, 디폴트 생성자가 불린다.
• 프로그래머가 만든 생성자가 하나라도 있으면, 디폴트 생성자는 사라진다.
• strict 모드에서는 프로퍼티를 선언하는 곳 또는 생성자에서 값을 할당해야 한다.
• property 를 선언하는 곳 또는 생성자에서 값을 할당하지 않는 경우에는 !를 붙여서 위험을 표현한다.
• 클래스의 property 가 정의되어 있지만, 값을 대입하지 않으면 undefined 이다.
• 생성자에는 async 를 설정할 수 없다.

접근제어자(Access Modifiers)

// public
class Person {
  public name: string = "Mark";
  public age!: number;

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

  public async init() {}

}

const p1: Person = new Person(39);
console.log(p1);

// private

class Person {
  public name: string = "Mark";
  public age!: number;

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

  public async init() {}

}

const p1: Person = new Person(39);
// 'Person' 클래스의 생성자는 private이며 클래스 선언 내에서만 액세스할 수 있습니다.ts(2673)
console.log(p1);

// private

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

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

  public async init() {}

}

const p1: Person = new Person(39);
console.log(p1.age); 
// 'age' 속성은 private이며 'Person' 클래스 내에서만 액세스할 수 있습니다.ts(2341)

---

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

initialization in constructor parameters

class Person {

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

}

const p1: Person = new Person("Mark", 39);
console.log(p1); // Person { name: 'Mark', age: 39 }

class Person {

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

}

const p1: Person = new Person("Mark", 39);
console.log(p1); //  Person { name: 'Mark', age: 39 }
console.log(p1.age);
// 'age' 속성은 private이며 'Person' 클래스 내에서만 액세스할 수 있습니다.ts(2341)

Getters & Setters

class Person {

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

}

const p1: Person = new Person("Mark", 39);

console.log(p1.name); // get / get 을 하는 함수 getter
p1.name = "Anna"; // set / set 을 하는 함수 setter

class Person {

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

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

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

const p1: Person = new Person("Mark", 39);
console.log(p1.name); // Mark  
p1.name = "Anna"; 
console.log(p1.name); // Anna

class Person {

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

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

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

const p1: Person = new Person("Mark", 39);
console.log(p1.name); // MarkLee  
p1.name = "Anna"; 
console.log(p1.name); // AnnaLee

class Person {

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

  // get name() {
  //   return this._name + "Lee";
  // }

  set name(n: string) {
    this._name = n;
  }
}

const p1: Person = new Person("Mark", 39);
console.log(p1.name); // undefined
p1.name = "Anna"; 
console.log(p1.name); // undefined

class Person {

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

  get name() {
    return this._name + "Lee";
  }

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

const p1: Person = new Person("Mark", 39);
console.log(p1.name); // undefined
p1.name = "Anna";
// 읽기 전용 속성이므로 'name'에 할당할 수 없습니다.ts(2540)
console.log(p1.name); // Error!