解决 Typescript 中的 'this' implicitly has type 'any' 错误

  • Z时代
  • 2024-01-10
  • 分类：综合

当我们在类之外或在无法推断 this 类型的函数中使用 this 关键字时，会出现“this implicitly has type any”的错误。 要解决此错误，需要将 this 关键字的类型作为函数中的第一个参数。

classEmployee {
constructor(public name: string, public salary: number) {
this.name = name;
this.salary = salary;
  }
}
interface Employee {
getSalary(): number;
}
// 添加一个指明 this 类型的参数
Employee.prototype.getSalary = function (this: Employee) {
returnthis.salary;
};
const e1 = newEmployee('Tom', 100);
console.log(e1.getSalary());

当 TypeScript 无法确定 this 关键字的类型时，会出现“this implicitly has type any”错误，因为我们已经在类之外或嵌套函数中使用了它。

在类之外使用时，默认情况下它的类型为 any。

以下是会产生错误的代码示例：

classEmployee {
first: string;
last: string;
constructor(first: string, last: string) {
this.first = first;
this.last = last;
  }
getFullNameFunction() {
returnfunction () {
// 错误 'this' implicitly has type
// 'any' 因为它没有类型注释。
returnthis.first + ' ' + this.last;
    };
  }
}

TypeScript-this-implicitly-has-type-any-错误

注意 ，getFullNameFunction 中嵌套函数内部的 this 上下文不是 Employee 实例。

为了解决这种错误，我们必须将嵌套函数转换为箭头函数，因为箭头函数使用封闭作用域的 this。

classEmployee {
first: string;
last: string;
constructor(first: string, last: string) {
this.first = first;
this.last = last;
  }
getFullNameFunction() {
return() => {
console.log(this);
// 现在 this 是 Employee 的实例
returnthis.first + ' ' + this.last;
    };
  }
}
const e1 = newEmployee('John', 'Doe');
const func = e1.getFullNameFunction();
console.log(func()); // "John Doe"

运行示例

由于嵌套箭头函数中的 this 引用了一个 Employee 实例，因此我们不再收到错误消息。

或者，我们可以使用闭包。

classEmployee {
first: string;
last: string;
constructor(first: string, last: string) {
this.first = first;
this.last = last;
  }
getFullNameFunction() {
// eslint-disable-next-line @typescript-eslint/no-this-alias
const self = this; 
returnfunction () {
// this 指向Employee实例
return self.first + ' ' + self.last;
    };
  }
}
const e1 = newEmployee('John', 'Doe');
const func = e1.getFullNameFunction();
console.log(func()); // "John Doe"

我们将它分配给外部函数中名为 self 的变量。 现在嵌套命名函数可以使用 self 变量，它引用 Employee 的一个实例。

当 tsconfig.json 文件中的 noImplicitThis 属性设置为 true 时，TypeScript 会在没有显式类型的情况下使用它时抛出错误。

注意，有时 TypeScript 甚至可以在类之外推断出 this 的类型。

为了解决这个错误，我们经常不能使用 this 参数并显式设置 this 的类型。

如果无法通过将其设置为特定类型来解决错误，可以尝试将其类型设置为 any。

如果想在 this 被隐式指定为 any 类型时禁用错误报告，可以在 tsconfig.json 文件中将 noImplicitThis 属性设置为 false。

{
"compilerOptions":{
// ... 其他设置
"noImplicitThis":false
}
}

现在，当 this 被隐式设置为 any 类型时，TypeScript 不再会抛出错误。

本文转载自：迹忆客（https://www.jiyik.com）

以上是 解决 Typescript 中的 'this' implicitly has type 'any' 错误 的全部内容， 来源链接： utcz.com/z/290287.html

回到顶部