TypeScript `this` 入参

山月万里 發表於 2019-6-17 23:36:00

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

</div>
<div id="MySignature" role="contentinfo">
<div>
<img src="https://licensebuttons.net/l/by-nc-sa/3.0/88x31.png" style="vertical-align: middle">
CC BY-NC-SA 署名-非商业性使用-相同方式共享
</div> 
来源：https://www.cnblogs.com/Wayou/p/typescript_this_parameter.html

頁: [1]

琼殿技术论坛's Archiver

TypeScript `this` 入参