[타입스크립트] this 관련 오류

function fancyDate() {
  return console.log(
    `${this.getDate()} / ${this.getMonth()} / ${this.getFullYear()}`
  );
}
fancyDate.call(new Date());

 

<오류 메시지>

 

 

src/index.ts:74:8 - error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.

74     `${this.getDate()} / ${this.getMonth()} / ${this.getFullYear()}`
          ~~~~

src/index.ts:74:28 - error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.

74     `${this.getDate()} / ${this.getMonth()} / ${this.getFullYear()}`
                              ~~~~

src/index.ts:74:49 - error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.

74     `${this.getDate()} / ${this.getMonth()} / ${this.getFullYear()}`

Found 3 errors in the same file, starting at: src/index.ts:74

 

 

해당

TypeScript에서 'this'가 암시적으로 'any' 유형 오류를 가집니다  : 해당 오류를 이해하고 적절하게 코드를 고치기 위해 아래 블로그 포스팅을 참고 한다.

https://bobbyhadz.com/blog/typescript-this-implicitly-has-type-any

Fix - 'this' implicitly has type 'any' error in TypeScript | bobbyhadz

"this implicitly have type any" 오류는 기본적으로 TypeScript가 키워드의 유형을 결정할 수 없을 때 발생한다.

클래스 외부 또는 유형을 유추할 수 없는 this함수에서 키워드 를 사용할 때도 발생한다. 클래스 외부에서 사용되는 경우 기본적으로 this유형이 any이다. this오류를 해결하려면 this키워드의 유형을 함수의 첫 번째 매개변수로 추가한다.

 

class Employee {
  constructor(public name: string, public salary: number) {
    this.name = name;
    this.salary = salary;
  }
}

interface Employee {
  getSalary(): number;
}

//                        👇️ add a parameter to type `this`
Employee.prototype.getSalary = function (this: Employee) {
  return this.salary;
};

const e1 = new Employee('Tom', 100);

console.log(e1.getSalary());

 

 

다음은 오류가 발생하는 방법의 예

 

class Employee {
  first: string;
  last: string;

  constructor(first: string, last: string) {
    this.first = first;
    this.last = last;
  }

  getFullNameFunction() {
    return function () {
      // ⛔️ Error 'this' implicitly has type
      // 'any' because it does not have a type annotation.
      return this.first + ' ' + this.last;
    };
  }
}

this중첩된 함수 내부의 컨텍스트는 인스턴스 getFullNameFunction가 아니다.

Employee this

이 상황에서 오류를 해결하려면 화살표 함수가 둘러싸는 범위를 사용하기 때문에 중첩 함수를 화살표 함수로 변환해야 합니다 .

class Employee {
  first: string;
  last: string;

  constructor(first: string, last: string) {
    this.first = first;
    this.last = last;
  }

  getFullNameFunction() {
    return () => {
      console.log(this);
      // ✅ this is now instance of Employee
      return this.first + " " + this.last;
    };
  }
}

const e1 = new Employee("John", "Doe");

const func = e1.getFullNameFunction();

console.log(func()); // 👉️ "John Doe"

 

그럼 처음으로 다시 돌아가서

function fancyDate() {
  return console.log(
    `${this.getDate()} / ${this.getMonth()} / ${this.getFullYear()}`
  );
}
fancyDate.call(new Date());

위의 함수를 고쳐본다.

 

 

- TypeScript에서 'this'가 암시적으로 'any' 유형으로 추론

- 유형을 유추할 수 없는 this함수에서 키워드 를 사용할 때도 발생

- this오류를 해결하려면 this키워드의 유형을 함수의 첫 번째 매개변수로 추가한다.

 

function fancyDate(this: Date) {
  return console.log(
    `${this.getDate()} / ${this.getMonth()} / ${this.getFullYear()}`
  );
}
fancyDate.call(new Date()); //19 / 3 / 2022

성공적으로 고쳐지고 잘 작동하는 모습 ^^