当前位置: 代码网 > it编程>前端脚本>Vue.js > typescript中this报错的解决

typescript中this报错的解决

2024年05月18日 Vue.js 我要评论
typescript中this报错在上述代码中使用this报错: 'this' implicitly has type 'any' because it does no

typescript中this报错

在上述代码中

使用this报错: 'this' implicitly has type 'any' because it does not have a type annotation.

function处报错: an outer value of 'this' is shadowed by this container

出错原因

ts 提供类似c# 和 java的静态类型(强类型), 在全局和命名空间的全局里面 直接声明一个函数要用到 function 关键字(就是js的function关键字),

而在类(class)里面却不能使用function来声明方法。

这其中是this的指向问题。

改成这样就可以了

typescript中this的使用注意

最近的一个项目,用了 typescript 来写js脚本,结果错误百出,修复的同时也让我总结了ts 中该怎样使用this。

ts 提供类似c# 和 java的静态类型(强类型), 在全局和命名空间的全局里面 直接声明一个函数 要用到 function 关键字(就是js的function关键字),而在类(class)里面却不能使用function来声明方法。

让我们来比较 它与 c# 的不同

这个代码在class a里面 放了一个方法,并将这个方法作为一个委托 给了 class program 的 h 字段, 最后在 main 方法里面运个 h委托, 结果得到了 1 这个结果(a.count + 1 = 0 + 1 = 1)

让我们在typescript 里面实现相同的功能:

你会发现,这时候结果不再是1,而是101, 造成差异的原因是js的 this 指针 , 在 c# 中 this 总是指向当前的类,而 js中的this可以改变, 当 t.h = a.hander 的时候 t.h 中的this 变成了 test 类。 而在 typescript中,因为当前定义的是一个类,所以其this 总是指向 类,所以ts 直接使用js中的this.

然而 有办法解决这个问题么? 当然有。 让我们来改变 class a

这样我们把hander 从类的 方法 变成了 类的变量,更重要的是 我们在 构造函数里面 使用 lamda 表达式 , 使用 lamda表达式 并不会改变this的作用域, 因为当前是一个构造函数,所以里面的this指向的是 当前的类,(查看一下生成的js会更容易理解, 函数里面已经没有了this)

从js的角度, 因为函数中没有了this指针,所以也就不会因为 传递到其他的地方造成不一致的情况

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持代码网。

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com