[패캠] 타입스크립트 문법 - 함수 명시적 this 타입 (12/20)

Fastcampus 프론트엔드 개발 강의

💡 본 타입스크립트 문법 시리즈는,
     패캠의 '프론트엔드 웹 개발의 모든 것 초격차 패키지 Online'에 있는 TS 강의 노트이다.

 

현재 수강 중인 패스트캠퍼스(fastcampus, 이하 패캠) 프론트엔드 패키지 강의가 있다.

강사님은 김영웅(Heropy) 님이다.

이 글을 쓰면서 강사님의 블로그에 '한눈에 보는 타입스크립트' 자료가 있다는 것을 알게 됬다... (바보😅)

 

강의를 듣는데, 강의자료가 없어서 일일이 강사님이 말씀을 따라 적으면서 강의 교안(?), 강의 노트를 작성했다.

혹시나 나처럼 패캠에서 타입스립트(TypeScript)를 수강하는 사람들에게 도움이 되면 좋겠다. 🔥

 

12. 함수 - 명시적 this 타입

---

함수에서 this 키워드를 사용할 때, this 키워드의 타입을 명시하는 방법이다.

 

Call 메서드

call 메서드 같은 경우에는 함수나 메서드 뒤에서 바로 사용하여 함수나 method가 어떤 대상에서 실행될 것 인지를 결정한다. call 메서드는 그 대상을 첫 번째 인수로 넣어준다. 이는 hello 함수를 cat이라는 객체 데이터의 메서드처럼 호출하겠다는 의미다.

interface Cat {
    name: string
    age: number
}
const cat: Cat = {
    name: 'Lucy',
    age: 3
}

function hello(message: string) {
    console.log(`Hello ${this.name}, ${message}`) // this 타입 Error
}
hello.call(cat, 'You are pretty awesome!')

 

hello는 일반 함수로 정의되어 있고, 일반 함수 내부의 this는 호출 위치에서 정의가 되는데, hello 함수를 call 메서드를 통해서 cat 객체 데이터를 기준으로 호출하고 있다. hello 함수 내부의 this는 결국에는 cat이라는 객체 데이터가 된다. 그래서 cat 객체 데이터에서 점 표기법으로 name 속성을 조회하게 되면 ‘Lucy’가 들어 있기 때문에 콘솔에서 출력이 될 수 있다.

 

명시적 this 타입 문법

암시적으로 any 형식이 포함된다는 의미는 정확하게 무엇이 들어올지 모르기 때문에 자동으로 any 타입이 설정이 된다는 것이다. any라는 타입은 직접 작성하더라도 되도록 사용하지 않는 것으로 추천하는데 이렇게 암시적으로 any 타입이 포함이 되는 부분은 타입스크립트라는 엄격한 문법을 사용하는 프로그래밍 언어에서는 여러모로 주의해야 하는 개념이 된다.

엄격모드에서 명시적 타입는 this 경우 Error

 

그래서 this가 무엇인지 정확하게 명시할 필요가 있다.

interface Cat {
    name: string
    age: number
}
const cat: Cat = {
    name: 'Lucy',
    age: 3
}

function hello(this: Cat, message: string) {
    console.log(`Hello ${this.name}, ${message}`)
}
hello.call(cat, 'You are pretty awesome!')

this라는 매개변수의 타입을 지정하게 되면, 문법상에서 매개변수처럼 보일 수 있겠지만 함수 내부에서 사용할 수 있는 this라는 키워드의 타입을 명시적으로 지정하는 부분이라서 정확하게는 매개변수라고 취급하기 보다는 타입스크립트에서 조금 특이하게도 this의 타입을 명시할 수 있는 하나의 문법으로 이해하는 것이 좋다.

 

정리하면, hello 함수의 첫 번째 인수는 엄밀하게 따지면 message라는 매개변수로 들어가게 된다. Cat 타입의 this는 단지 타입스크립트의 문법일 뿐이다라고 이해할 수 있다.

this라는 키워드를 사용할 때마다 이렇게 명시적으로 타입을 지정할 필요는 없기 때문에 일반적으로 자주 보게 될 문법은 아니지만, this라는 타입이 정확하게 무엇인지 알 수 없는 환경에서 개발자가 타입스크립트에게 알려줄 수 있는 방법으로 이런 명시적 this 타입 문법을 사용할 수 있다.

 

 

Reference

---

김영웅 강사님 블로그 中 TS 파트

https://heropy.blog/2020/01/27/typescript/

한눈에 보는 타입스크립트(updated)

 

김영웅 강사님 유튜브 채널

https://www.youtube.com/channel/UCcjhMpoaNvyy0StN9KgtF6w

HEROPY