2021/06/21 TypeScript

Class 란?

• object를 만드는 설계도
• 클래스 이전에 object를 만드는 기본적인 방법은 function
• javascript 에도 class는 es6 부터 사용 가능
• Typescript 에서는 클래스도 사용자가 만드는 타입의 하나

 

ES5

//TS
class Person { }

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

//ES5
"use strict";
var Person = /** @class */ (function () {
    function Person() {
    }
    return Person;
}());
var p1 = new Person();
console.log(p1);

ES6

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

 

Class 생성

 

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

 

Class의 생성자(constructor) 와 초기화(initialize)

//TS
class Person {
  name: string = "Dongit";
  age!: number;
}

const p1 = new Person();
p1.age = 25;
console.log(p1); //Person { name: 'Dongit', age: 25 }

//TS
class Person {
  name: string = "Dongit";
  age: number;

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

const p1 = new Person(25);
console.log(p1); //Person { name: 'Dongit', age: 25 }

//TS
class Person {
  name: string = "Dongit";
  age: number;

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

const p1 = new Person(25);
const p2 = new Person();
console.log(p1); //Person { name: 'Dongit', age: 25 }
console.log(p2); //Person { name: 'Dongit', age: 35 }

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

접근 제어자 ( Access Modifiers)

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

 

 

생성자에 파라미터를 받아서 바로 클래스의 프로퍼티로 초기화하는 법

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

const p1 = new Person('Dongit', 25);

 

Getters & Setters

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

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

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

const p1 = new Person('Dongit', 25);
console.log(p1.name); //get을 하는 함수 getter
p1.name = "H.D" //set을 하는 함수 setter
console.log(p1.name); 

// console
// DongitKim
// H.DKim