step 1

readonly 속성: 읽기만 가능한 속성

초기값을 정하는 구간에서만 수정 가능하다.

예제

TS 파일

class Person55 {

  public readonly name: string = "Mark";
  private readonly country: string = "Korea";

  public constructor(private age: number, public _name: string){
    // 에러가 발생하지 않는다.
    this.country = "china";
  }

  // 에러 발생
  // hello(){
  //   this.country = "China";
  // }
}
const p12: Person55 = new Person55(22, 'aaa');

console.log(p12);
// readonly 이기 때문에 에러 발생
// p12.name = "수정";

getter: class내부에 선언된 변수를 가져오도록 하는 함수

setter: class 내부에 선언된 변수를 수정하는 함수

예제

TS 파일

class Person55 {

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

  }

  get name(){
    // get하기 전에 동작
    console.log("get");
    // 반환할때 값을 변경해줄수도 있다.
    return this._name + "추가";
  }

  set name(n: string){
    // 반환값이 필요없다.
    console.log("set");
    this._name = n;
  }
}
const p12: Person55 = new Person55(22, 'aaa');

console.log(p12);
console.log(p12.name); // get  -> get을 하는 함수 getter
p12._name = '안녕하세요'; // set -> set을 하는 함수 setter
console.log(p12.name); // get  -> get을 하는 함수 getter

// 에러 발생 외부에서 접근이 불가능 하기 때문
// console.log(p12.age);

JS 파일

"use strict";
class Person55 {
    constructor(age, _name) {
        this.age = age;
        this._name = _name;
    }
    get name() {
        // get하기 전에 동작
        console.log("get");
        // 반환할때 값을 변경해줄수도 있다.
        return this._name + "추가";
    }
    set name(n) {
        // 반환값이 필요없다.
        console.log("set");
        this._name = n;
    }
}
const p12 = new Person55(22, 'aaa');
console.log(p12);
console.log(p12.name); // get  -> get을 하는 함수 getter
p12._name = '안녕하세요'; // set -> set을 하는 함수 setter
console.log(p12.name); // get  -> get을 하는 함수 getter
// 에러 발생 외부에서 접근이 불가능 하기 때문
// console.log(p12.age);

실행 화면

불필요한 코드를 정리하고 생성자만을 작성하여 코드를 간결하게 작성할 수 있다.

예제

TS 파일

class Person55 {

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

  }
}
const p12: Person55 = new Person55(22, 'aaa');

console.log(p12);
console.log(p12.age);

// 에러 발생 외부에서 접근이 불가능 하기 때문
// console.log(p12.name);

JS 파일

"use strict";
class Person55 {
    constructor(age, name) {
        this.age = age;
        this.name = name;
    }
}
const p12 = new Person55(22, 'aaa');
console.log(p12);
console.log(p12.age);
// 에러 발생 외부에서 접근이 불가능 하기 때문
// console.log(p12.name);

실행 화면

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

예제

TS 파일

class Person55 {
  public name: string = "Mark";
  // 클래스 내부에서 선언하지 않을 경우 !를 붙여준다.
  // 반드시 바깥에서 선언해주어야 한다.
  private age!: number;

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

  public async init(){}
}

const p12: Person55 = new Person55(22);

console.log(p12);

// 에러 발생 외부에서 접근이 불가능 하기 때문
// console.log(p12.age);

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

예제

TS 파일

class Person55 {
  name: string = "Mark";
  // 클래스 내부에서 선언하지 않을 경우 !를 붙여준다.
  // 반드시 바깥에서 선언해주어야 한다.
  age!: number;

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

const p12: Person55 = new Person55(22);

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

컴파일된 JS 파일

"use strict";
class Person55 {
    constructor(age) {
        this.name = "Mark";
        this.age = age;
    }
}
const p12 = new Person55(22);
console.log(p12);
//p12.age = 39;
console.log(p12.age);

확인

• Object를 만드는 blueprint (청사진, 설계도)
• 클래스 이전에 object를 만드는 기본적인 방법은 function
• JavaScript에도 class는 es6부터 사용 가능
• OOP을 위한 초석
• TypeScript에서는 클래스도 사용자가 만드는 타입의 하나
• class 키워드를 이용하여 클래스를 만들 수 있다.
• class 이름은 보통 대문자를 이용한다.
• new를 이용하여 class를 통해 object를 만들 수 있다.
• constructor를 이용하여 object를 생성하면서 값을 전달할 수 있다.
• this를 이용해서 만들어진 object를 가리킬 수 있다.
• JS로 컴파일되면 es5의 경우 function으로 변경된다.

예제

예제를 실행하기 전에 es6로 변경해준다. (tsconfig.json)

TS 파일

class Person55 {
  name;
  constructor(name: string){
    this.name = name;
  }
}

const p12 = new Person55("Mark");

console.log(p12);

컴파일된 JS 파일

"use strict";
class Person55 {
    constructor(name) {
        this.name = name;
    }
}
const p12 = new Person55("Mark");
console.log(p12);

실행 화면