您的位置:首页 > 教程 > JavaScript > typescript中this报错的解决

typescript中this报错的解决

2023-01-21 09:07:40 来源:易采站长站 作者:

目录typescript中this报错出错原因改成这样就可以了typescript中this的使用注意总结typescript中this报错exportclassAppComponent{t...

目录
typescript中this报错
出错原因
改成这样就可以了
typescript中this的使用注意
总结

typescript中this报错

export class AppComponent {
  title = 'myapp';
  count=1;
  clickme=function(){
      this.count++; 
  }

在上述代码中

使用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的指向问题。

改成这样就可以了

export class AppComponent {
  title = 'myapp';
  count=1;
  clickme=()=>{
    this.count++;
  }
}

typescript中tjshis的使用注意

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

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

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

  public delegate int handle();
  public class Program
  {
    public static void Main(string[] args)
    {
      var t = new Test();
      var a = new A();
      t.h = a.hander;
      t.count = t.h();
      Console.WriteLine("count is:{0}",t.count);
      // output:
      // count is:1
    }
  }
  public class Test
  {
    public handle h;
    public int count = 100;
  }
  public class A
  {
    private int count = 0;
    public int hander()
    {
      this.count +=1;
      return this.count;
    }
  }

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

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

class A {
  public count: number = 0;
  public hander(): number {
    this.count += 1;
    return this.count;
  }
}


class Test {
  public count: number = 100;
  public h: () => number;
}

class Program {

  static Main(): void {
    let t = new Test();
    let a = new A();
    t.h = a.hander;
    t.count = t.h();
    console.log(`count is :${t.count}`);
    // output
    // count is :101
  }
}

Program.Main();// 为了跟C#一致 , 提供的静态入口

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

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

class A {
  constructor() {
    this.hander = ()=>{
      this.count += 1;
      return this.count;
    }
  }
  public count: number = 0;
  public hander: () => number;
}

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

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

总结

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

如有侵权,请发邮件到 [email protected]

相关文章

  • vue跳转页面的几种方法(推荐)

    vue跳转页面的几种方法(推荐)

    vue跳转不同页面的多种方法 1:router-link跳转 !-- 直接跳转 --router-link to='/testDemo' button点击跳转2/button/router-link !-- 带参数跳转 --router-link :to="{path:'testDemo',query:{setid:123456}}" button点击跳转
    2020-03-26
  • Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除

    Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除

    最近有使用vue+elementUI实现多图片上传的需求,遂做此纪录。 本次主要写一下前端的实现细节,至于后台以Multipart[ ]数组接收即可,不再赘述,网上一搜大把文章可供参考。 本次使用
    2020-03-23
  • 微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能

    微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能

    上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 view class='page_row' bindtap="suo" view class="search" view class="df search_arr" icon class="searchcion" size='20' type='search'/
    2020-03-10
  • 微信小程序实现canvas分享朋友圈海报

    微信小程序实现canvas分享朋友圈海报

    本文实例为大家分享了微信小程序分享朋友圈海报的具体代码,供大家参考,具体内容如下 思路:生成朋友圈海报放在公共文件,首先需要绘制canvas,点击分享朋友圈按钮,在手机屏幕
    2020-06-21
  • 详解ES6 Modules

    详解ES6 Modules

    当下, 我们几乎所有的项目都是基于 webpack、rollup 等构建工具进行开发的,模块化已经是常态。 我们对它并不陌生,今天,我们就再系统的回顾一下ES6的模块机制, 并总结下常用的操
    2020-07-04
  • Vue-router 报错NavigationDuplicated的解决方法

    Vue-router 报错NavigationDuplicated的解决方法

    版本:3.1.x 报错原因: 使用push()、replace()进行导航时,不能重复导航到当前路由。 解决办法: 方法1:在定义路由的文件中router/index.js const originalPush = VueRouter.prototype.pushVueRouter.protot
    2020-03-31
  • vue使用better-scroll实现滑动以及左右联动

    vue使用better-scroll实现滑动以及左右联动

    本文实例为大家分享了vue实现滑动以及左右联动效果的具体代码,供大家参考,具体内容如下 一、首先需要在项目中引入better-scroll 1. 在package.json 直接写入 "better-scroll":"^1.15.1" 版本以
    2020-06-30
  • Vue如何提升首屏加载速度实例解析

    Vue如何提升首屏加载速度实例解析

    在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响
    2020-06-25