[Typescript] 메소드

클래스의 속성으로 오는 함수를 메소드라고 부릅니다. 타입스크립트에서 이 메소드들을 사용하는 방법들을 소개해드리려고 합니다.

---

1. 클래스 메소드

이전 포스트에서 소개해드린대로 클래스 메소드를 구현해보면 다음과 같습니다.

class Student {
    constructor(protected name: string) {}
    
    printInfo: () => void = function (): void {
        console.log(`이름: ${this.name}`);
    }
}

이렇게 보니 좀 복잡하고 지저분한 감이 있지않아서 타입스크립트에서는 이것을 간단하게 줄여쓸 수 있도록 단축 구문을 제공합니다. 위의 printInfo() 메소드를 단축구문을 이용해서 줄여보겠습니다.

class Student {
    constructor(protected name: string) {}
    
    printInfo(): void {
        console.log(`이름: ${this.name}`);
    }
}

 

또한 메소드 앞에 static 키워드를 붙여 정적 메소드로 만들 수 있습니다. 정적 메소드란, 인스턴스 생성 없이도 호출 할 수 있는 메소드를 의미합니다.

class Student {
    constructor(protected name: string) {}

    static printInfo(): void {
        console.log(`이름: ${this.name}`);
    }
}

 

 

 

2. 메소드 체인

메소드 체인이란 객체의 메소드들을 연속해서 호출하는 방식입니다.

Obj.method1().method2().method3().method4();

 

타입스크립트에서 메소드 체인을 구현하는 방법은 메소드의 마지막에 this를 반환하면 됩니다.

class Obj {
    method1() {
        console.log('1');
        return this;
    }

    method2() {
        console.log('2');
        return this;
    }

    method3() {
        console.log('3');
        return this;
    }
}

let obj = new Obj();

obj.method1().method2().method3();

이러한 결과가 나오는 것은 객체의 메소드 내부에서 사용된 this는 해당 메소드를 가리키기 때문입니다. 즉 위 코드를 실행 순서로 다시 살펴보면 아래와 같이 실행됩니다.

//실행전
obj.method1().method2().method3();

//method1()실행 후 return this;
//return this는 호출한 객체인 obj가 됩니다.
obj.method2().method3();

//method2()실행 후 return this;
obj.method3();