중급 TypeScript - 고급 함수: this 타입

고급 함수: this 타입

고급 함수에서 this 타입은 TypeScript의 중요한 개념 중 하나로, 특히 객체 지향 프로그래밍과 관련된 상황에서 매우 유용합니다. JavaScript에서는 this 키워드가 동적으로 바인딩되기 때문에, TypeScript는 이를 정적으로 정의할 수 있는 방법을 제공합니다.

1. this의 기본 이해

  • JavaScript의 this:

    • JavaScript에서는 함수 호출 방식에 따라 this의 값이 달라집니다.
    • 예를 들어, 메서드로 호출되면 해당 객체를 가리키고, 일반 함수로 호출되면 전역 객체(엄격 모드에서는 undefined)를 가리킵니다.
  • TypeScript에서의 필요성:

    • TypeScript는 이러한 동적 바인딩 문제를 해결하기 위해 this 타입을 제공하여 보다 명확한 코드를 작성할 수 있도록 합니다.

2. 기본적인 사용법

TypeScript에서 함수를 정의할 때, 매개변수와 함께 this 타입을 지정할 수 있습니다. 이는 주어진 컨텍스트 내에서만 유효한 메서드를 만들도록 도와줍니다.

예제:

class Counter {
    count: number = 0;

    increment(): this {
        this.count++;
        return this; // 현재 인스턴스를 반환
    }

    getCount(): number {
        return this.count;
    }
}

const counter = new Counter();
counter.increment().increment(); // 체이닝 가능
console.log(counter.getCount()); // 출력: 2

위 예제에서 increment() 메서드는 자신의 인스턴스를 반환하므로, 여러 번 연속으로 호출하는 것이 가능합니다. 여기서 this는 항상 현재 클래스 인스턴스를 참조하게 됩니다.

3. 화살표 함수와의 관계

화살표 함수는 자신만의 this 값을 가지지 않고 외부 스코프의 값을 그대로 사용합니다. 이 점은 종종 혼란을 초래할 수 있으므로 주의를 기울여야 합니다.

예제:

class Timer {
    seconds: number = 0;

    start() {
        setInterval(() => { // 화살표 함수를 사용하여 'this' 바인딩 유지
            this.seconds++;
            console.log(this.seconds);
        }, 1000);
    }
}

const timer = new Timer();
timer.start(); // 매초마다 seconds 증가 및 출력

위 코드에서는 화살표 함수를 사용함으로써, 내부 스코프에서도 올바르게 클래스 인스턴스(Timer)에 접근할 수 있습니다.

4. 사용자 정의 유형으로서의 this

때때로 더 복잡한 구조체나 인터페이스를 만들고 싶다면 사용자 정의 유형으로 사용할 수도 있습니다.

예제:

interface Person {
    name: string;
    
    greet(this: Person): void; // 'Person' 유형으로 'this' 설정
}

const john: Person = {
    name: "John",
    
    greet() {
        console.log(`안녕하세요! 제 이름은 ${this.name}입니다.`);
    }
};

john.greet(); // 출력: 안녕하세요! 제 이름은 John입니다.

이러한 방식으로 특정 인터페이스에 대해 정확히 어떤 형태로 사용할지를 명시하면 코드가 더욱 안전해지고 오류 발생 가능성이 줄어듭니다.

결론

TypeScript에서 고급 함수와 관련된 this 타입 개념은 코드 작성 시 많은 장점을 제공합니다:

  • 명확성: 각 메서드가 어떤 객체를 참조하는지 명확하게 알 수 있음.
  • 유연성: 체이닝이나 다른 패턴을 쉽게 구현 가능.
  • 안전성: 잘못된 바인딩이나 의도치 않은 에러 방지.

이러한 기능들을 활용함으로써 더욱 견고하고 유지보수가 쉬운 코드를 작성할 수 있습니다.

Subscribe to shimdh.log

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe