[Typescript] class

1. class (extended interface)

- 컴파일에서 반영되는 속성/인자의 집합

- interface에서 확장된 넓은 개념으로, interface와 동일한 목적으로 활용한다.

interface Human{
  name: string,
  age: number,
  job: string
}

• interface는 인자의 type만 정의해준다.

class Human{
    public name: string
    public age: number
    public job: string
}

• class는 인자의 type과 속성(public, private)를 모두 정의해준다.

2. constructor

- class를 통한 객체 생성, 호출 등 초기화를 할 때마다 실행되는 메소드의 일종

class Human{
    public name: string
    public age: number
    public job: string
    constructor(name: string, age: number, job: string){
        this.name = name
        this.age = age
        this.job = job
    }
}

• 생성자를 통해 인스턴스를 생성할 수 있고, 이 인스턴스는 class 재활용(인자 및 객체 생성)을 할 수 있다.

3. class 활용

- class를 생성하고, 해당 class를 이용하여 새로운 객체를 생성할 수 있다.

class Human{
    public name: string
    public age: number
    public job: string
    constructor(name: string, age: number, job: string){
        this.name = name
        this.age = age
        this.job = job
    }
}
const person1 = new Human("COCO", 15, "Developer")

const foo = (Human) => {
    return `HELLO ${Human.name}(_${Human.age})! How are your ${Human.job} going?`
}

console.log(foo(person1))

export {}

• person1처럼 class를 활용하여 동일한 형태의 객체를 생성할 수 있다.
• 동일한 형태의 객체를 생성하기 위해선 class의 인스턴스가 반드시 필요하고, class의 생성자와 속성이 그 역할을 한다.
• python에서의 class와 형태가 매우 유사하고, 객체지향 프로그래밍 언어에서의 구조와 거의 동일하다.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
class Human {
    constructor(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
    }
}
const person1 = new Human("LEE HYO KYUN", 15, "Developer");
const foo = (Human) => {
    return `HELLO ${Human.name}(_${Human.age})! How are your ${Human.job} going?`;
};
console.log(foo(person1));
//# sourceMappingURL=index.js.map

• 컴파일 이후의 코드인 index.js를 보면, class가 그대로 반영되었음을 확인할 수 있다.

 

 

참조 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes ,

https://velog.io/@gyrbs22/typescript-static-method