JS 클래스와 TS static 키워드에 대한 짧은 고찰

Hoyoung Jung·2020년 12월 15일
0

요즘 인프런 캡틴 팡요님의 TS강의를 듣고 있다가 생각나서 짧게 정리해 보았다.

예전에 ES6의 클래스 문법을 사용하면서, 기존 자바에서 사용하던 static 메소드와 static 변수를 사용하고 싶었는데, 잘 되지 않았던 기억이 있었다.

이 문제를 해결하기 위한 아이디어가 갑자기 떠올랐는데, TS로 코딩을 하고 컴파일을 해서 생성된 코드를 보는 것이다!

먼저 TS에는 당연히 static 메소드와 static 변수가 있으니까 이를 이용해서 코드를 짜 보았다.

class Dog {
    public name: string;
    private age: number;
    public static numTail: number;

    constructor(name, age) {
        this.name = name;
        this.age = age;
        Dog.numTail = 1;
    }

    hi(): void {
      console.log(`Hello I am ${this.name} and I am ${this.age} years old`);  
    }

    static wow(): void {
        console.log(`We are Dogs and We have ${Dog.numTail} tail(s)!`);
    }
}

function foo(d: Dog) : void {
    d.hi();
}

const d1 = new Dog('Nabi', 3);
const d2 = new Dog('Zelda', 10);

foo(d1);
d2.hi();
Dog.wow();

이제 컴파일하고 실행을 해 보자.

$ tsc example.ts
$ node examle.js
Hello I am Nabi and I am 3 years old
Hello I am Zelda and I am 10 years old
We are Dogs and We have 1 tail(s)!  

잘 된다. 그럼 마지막으로 변환된 코드를 확인해 보았다.

var Dog = (function () {
    function Dog(name, age) {
        this.name = name;
        this.age = age;
        Dog.numTail = 1;
    }
    Dog.prototype.hi = function () {
        console.log("Hello I am " + this.name + " and I am " + this.age + " years old");
    };
    Dog.wow = function () {
        console.log("We are Dogs and We have " + Dog.numTail + " tail(s)!");
    };
    return Dog;
})();
function foo(d) {
    d.hi();
}
var d1 = new Dog('Nabi', 3);
var d2 = new Dog('Zelda', 10);
foo(d1);
d2.hi();
Dog.wow();

당연한 결과겠지만, prototype과 생성자 함수를 이용해서 클래스를 생성하는 것을 확인할 수 있었다. JS에 대한 지식이 +0.1 되었다.

profile
주짓수를 좋아하는 개발자

0개의 댓글