typescript - 使用 bind 时如何对 typescript type 说这个？

Question

我有 3 个包含下一个内容的文件:

bark.ts

export function bark () {
  console.log('My name', this.name);
}

Dog.ts

import {bark} from './bark';

class Dog {
  name = 'Hachiko';
  
  makeVoice = bark.bind(this);
}

index.ts

const dog = new Dog();
dog.makeVoice();

如果我使用干净的 JS(没有 TS)运行这个例子，它就会工作。但是当我将此示例与 typescript 一起使用时，this 具有未知类型 - 编译错误。那么如何在文件bark.ts中对this的TS编译器类型说。

Answer 1

您想要的是对this 的约束。您可以在函数签名中的魔术参数 this 上设置它。

function(this: SomeType) {}

现在在这种情况下，您的方法只关心 name 属性。所以你不需要 this 是 Dog，你只需要它有一个 name 属性。

也就是说，bark()中的this需要实现接口(interface){name:string}。

export function bark(this: { name: string }) {
  console.log('My name', this.name);
}

现在您的其余代码可以正常工作并且是类型安全的。很酷的是，如果你的类没有 name，typescript 根本不允许你绑定(bind)这个函数:

// This class does not fit the contract of bark()
class NamelessDog {
  constructor () {
    bark.bind(this); // type error, name is a required property to use bark()
  }
  
  makeVoice = bark;
}

Playground