안녕하세요 lika-7입니다
이번 시간에는 TypeScript의 함수 작성에 this 키워드 명시 방법에 대하여 정리 하겠습니다
명시적 this란
💡
함수나 메서드 내에서 this 키워드가 어떤 객체를 가리키는지를 명시적으로 지정하는 것을의미합니다
✅
JavaScript에서 this는 실행 컨텍스트에 따라 동적으로 결정되기 때문에 때로는 예측하기 어려울 수 있습니다
그러나 TypeScript에서는 명시적으로 this를 사용하여 코드를 더 예측 가능하게 만들 수 있습니다.
명시적 this를 사용하는 주요 방법
//TypeScript
interface Cat {
name: string
age: number
}
const cat:Cat= {
name: 'Lay',
age: 25
}
function hello(message: string){
console.log(`Hello ${this.name}, ${message}`)
}
hello.call(cat, 'You are pretty awesome!')
위의 코드상에서
console.log(`Hello ${this.name}, ${message}`)
부분중 this.name이 에러가 납니다

this 부분이 타입이 지정되어 있지 않으면 암시적으로 any 타입이 적용된다고 합니다
✅
이러한 내용은 엄격한 문법을 위해 사용하는 typescript에서 주의해야 합니다
일반함수에서 정의
//TypeScript
interface Cat {
name: string
age: number
}
const cat:Cat= {
name: 'Lay',
age: 25
}
function hello(this:Cat, message: string){
console.log(`Hello ${this.name}, ${message}`)
}
hello.call(cat, 'You are pretty awesome!')
✅
일반 함수에서 this 키워드는 호출되는 위치에서 정의 됩니다
✅
this:Cat은 매개 변수가 아니라 this: Cat을 명시한 typescript의 문법적 요소 입니다
화살표함수에서 정의
//TypeScript
interface Cat {
name: string;
age: number;
}
const cat: Cat = {
name: 'Lay',
age: 25
}
const hello = (message: string) => {
console.log(`Hello ${cat.name}, ${message}`);
}
hello('You are pretty awesome!');
✅
화살표 함수는 자체적으로 this를 바인딩하지 않기 때문에, 함수 내부에서 this를 사용하지 않고 외부 변수 ‘cat’을 직접참조하도록 변결 할 수 있습니다.
명시적으로 this를 전달할 필요가 없습니다