TypeScript `this` 入参

我会带着你远行 2021-11-17 19:20 382阅读 0赞

<table> 
 <tbody> 
  <tr> 
   <td> <p>考察下面的示例代码：</p> 
    <div> 
     <pre><span>class</span> <span>MyClass</span> {
  <span>constructor</span>(<span>protected</span> <span>foo</span><span>:</span> <span>string</span>) {}

@<span>MyDecorator</span>
  bar() {
    <span>console</span>.<span>log</span>(<span><span>"</span>bar<span>"</span></span>);
  }
}

<span>function</span> MyDecorator(
  <span>_target</span><span>:</span> <span>any</span>,
  <span>_key</span><span>:</span> <span>string</span>,
  <span>descriptor</span><span>:</span> <span>PropertyDescriptor</span>
) {
  <span><span>const</span></span> original <span>=</span> <span>descriptor</span>.<span>value</span>;
  <span>descriptor</span>.<span>value</span> <span>=</span> <span>function</span>(<span>...</span><span>args</span><span>:</span> <span>any</span>[]) {
    <span><span>//</span> ?Property 'foo' does not exist on type 'PropertyDescriptor'.ts(2339)</span>
    <span>console</span>.<span>log</span>(<span>this</span>.<span>foo</span>);
    <span>return</span> <span>original</span>.<span>apply</span>(<span>this</span>, <span>args</span>);
  };
  <span>return</span> <span>descriptor</span>;
}

<span><span>const</span></span> myClass <span>=</span> <span>new</span> <span>MyClass</span>(<span><span>"</span>erm<span>"</span></span>);
<span>myClass</span>.<span>bar</span>();
</pre> 
    </div> <p>上面代码定义了一个类 <code>MyClass</code>，包含一个 <code>protected</code> 类型的 <code>foo</code> 属性。</p> <p>同时定义了一个 <code>MyDecorator</code> 装饰器，在被装饰方法调用前访问上面的 <code>protected foo</code> 属性并且打印出来。</p> <p>可以看到上面示例中，已经将 TypeScript 报错标识了出来，可以看到此时 <code>this</code> 所指的对象其实不对，指向了 <code>PropertyDescriptor</code>，所以在装饰器中试图访问 <code>protected foo</code> 时提示没有 <code>foo</code> 属性。</p> <p>首先我们需要修正一下 <code>this</code> 的类型，因为该装饰器修饰的是类的方法，所以 <code>descriptor.value</code> 中 <code>this</code> 应该是被修饰方法所在的类才对。</p> 
    <div> 
     <pre>function MyDecorator(
  _target: any,
  _key: string,
  descriptor: PropertyDescriptor
) {
  const original = descriptor.value;
  descriptor.value = function(...args: any[]) {
    // ?Property 'foo' does not exist on type 'PropertyDescriptor'.ts(2339)
    console.log((this as MyClass).foo);
    return original.apply(this, args);
  };
  return descriptor;
}</pre> 
    </div> <p>当我们试图通过强制类型转换修正 <code>this</code> 的类型时，发现新的错误出现了。因为 <code>foo</code> 被声明成了 <code>protected</code> 类型，它提示只能在 <code>MyClass</code> 中或其继承类中访问该属性。但我们明确知道，运行时 <code>descriptor.value</code> 确实是在这个类当中的。同时 Hover 到强制类型转换后的 <code>this</code> 上发现其类型还是 <code>PropertyDescriptor</code>，说明强制类型转换其实没生效。</p> <p><a href="https://user-images.githubusercontent.com/3783096/59554334-0a4a7000-8fd4-11e9-8c18-24493f082544.png" rel="nofollow"><img src="https://user-images.githubusercontent.com/3783096/59554334-0a4a7000-8fd4-11e9-8c18-24493f082544.png" alt="强制类型转换失败"></a></p> <p>强制类型转换失败</p> <h2><code>this</code> 入参</h2> <p>对于这种需要修正函数中 <code>this</code> 所指的场景，TypeScript 提供了一种机制，可以在函数入参列表中第一个位置处，手动写入 <code>this</code> 标识其类型。但这个 <code>this</code> 入参只作为一个形式上的参数，供 TypeScript 做静态检查时使用，编译后是不会存在于真实代码中的。</p> 
    <div> 
     <pre><span>function</span> f(<span>this</span><span>:</span> <span>void</span>) {
    <span><span>//</span> make sure `this` is unusable in this standalone function</span>
}</pre> 
    </div> <p>像上面这样，<code>f</code> 被指定了 <code>this</code> 类型为 <code>void</code>，即 <code>f</code> 这个函数的函数体内，不允许使用 <code>this</code>。这有什么用呢，请看以下示例：</p> 
    <div> 
     <pre><span>interface</span> <span>UIElement</span> {
  addClickListener(<span>onclick</span><span>:</span> (<span>this</span><span>:</span> <span>void</span>, <span>e</span><span>:</span> <span>Event</span>) <span>=&gt;</span> <span>void</span>)<span>:</span> <span>void</span>;
}
<span>class</span> <span>Handler</span> {
  <span>constructor</span>(<span>public</span> <span>info</span><span>:</span> <span>string</span>) {}
  onClickBad(<span>this</span><span>:</span> <span>Handler</span>, <span>e</span><span>:</span> <span>Event</span>) {
    <span>this</span>.<span>info</span> <span>=</span> <span>e</span>.<span>type</span>;
  }
}
<span>let</span> h <span>=</span> <span>new</span> <span>Handler</span>(<span><span>'</span>foo<span>'</span></span>);
<span><span>//</span> ?error</span>
<span>uiElement</span>.<span>addClickListener</span>(<span>h</span>.<span>onClickBad</span>); </pre> 
    </div> <p>上面 <code>uiElement.addClickListener</code> 声明了只接收一个不依赖于 <code>this</code> 上下文的函数做为回调，但我们传入的 <code>h.onClickBad</code> 声明为它执行时依赖于 <code>Handler</code> 这个上下文。因此显式地修正函数的执行上下文可让 TypeScript 检查出相关的错误。</p> <p>回到文章开头的示例，我们就知道如何修正它了。</p> <p>只需要将设置 <code>descriptor.value</code> 地方，为其添加上 <code>this</code> 入参即可保证正确的上下文了。</p> 
    <div> 
     <pre>function MyDecorator(
  _target: any,
  _key: string,
  descriptor: PropertyDescriptor
) {
  const original = descriptor.value;
<span><span>-</span>  descriptor.value = function(..args: any[]) {
         </span>
<span><span>+</span>  descriptor.value = function(this: MyClass, ...args: any[]) {
         </span>
    console.log((this as MyClass).foo);
    return original.apply(this, args);
  };
  return descriptor;
}</pre> 
    </div> <h2>相关资源</h2> 
    <ul> 
     <li><a href="https://www.typescriptlang.org/docs/handbook/functions.html#this-parameters" rel="nofollow">TypeScript Handbook - Functions#this parameters</a></li> 
    </ul></td> 
  </tr> 
 </tbody> 
</table>

转载于:https://www.cnblogs.com/Wayou/p/typescript\_this\_parameter.html

发表评论取消回复

表情：

评论列表（有 0 条评论，382人围观）

还没有评论，来说两句吧...

相关阅读

相关 Spring‘MVC入参收参

1. 内置对象 HttpServletRequest ![8a39ee6e82d5f383b5f658e993888ea0.png][] 2. 方法参数收集（常用） ![

- 日理万妓/ 2024年03月30日 14:42/ 0 赞/ 71 阅读

相关关于Map入参，出参

现在有很多小伙伴非常喜欢用map，jsonObject来接收前端的参数如下图： @PostMapping("/test") public M

た入场券/ 2023年02月14日 13:29/ 0 赞/ 28 阅读

相关 mybatis入参运算

mybatis想要实现入参运算，有以下两种方式 1、$\{\} 如： select from table1 limit ${ start}+1

野性酷女/ 2022年11月05日 08:38/ 0 赞/ 186 阅读

相关 typescript入门，typescript特性

typescript的介绍这里就不提，之前文章中有，目前typescript还不能直接运行在浏览器中，所以需要使用compiler进行编译成JavaScript文件进行

秒速五厘米/ 2022年06月11日 00:41/ 0 赞/ 299 阅读

相关 springboot接收json入参

最近做一个项目，给前端vue工程提供数据接口，部门经理希望通过json格式来传递参数。接口项目是用的springboot，所以直接使用controller里

你的名字/ 2022年06月06日 13:53/ 0 赞/ 278 阅读

相关小议入参和出参

分享一下我老师大神的人工智能教程！零基础，通俗易懂！[http://blog.csdn.net/jiangjunshow][http_blog.csdn.net_jiangju

迈不过友情╰/ 2022年04月16日 00:58/ 0 赞/ 374 阅读

相关 TypeScript `this` 入参

<table> <tbody> <tr> <td> <p>考察下面的示例代码：</p> <div> <pre><span>class</

我会带着你远行/ 2021年11月17日 19:20/ 0 赞/ 383 阅读

相关 JdbcTemplate 入参为List

JdbcTemplate主要提供以下五类方法： 1. execute方法：可以用于执行任何SQL语句，一般用于执行DDL语句； 2. update方法及batchUpda

拼搏现实的明天。/ 2021年10月24日 01:12/ 0 赞/ 678 阅读

相关 this.$router.push 传参

index页面 1.params this.$router.push()方法中path不能与params同用，否则param会失效，所以用name来指

骑猪看日落/ 2021年09月30日 07:30/ 0 赞/ 245 阅读

相关 swagger兼容map入参

maven版本号 <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-...

灰太狼/ 2021年01月19日 11:09/ 0 赞/ 717 阅读