TypeScript上下文变量类型化：容器函数的this上下文设置疑问

当然可以！TypeScript 专门提供了语法来为函数显式指定this的类型，完美解决你这种Utils容器里函数既接收参数又依赖特定上下文的场景。

单个函数指定this类型 #

最直接的方式是在函数的参数列表最前面添加一个伪参数this: 你的上下文类型——注意这个参数不会被编译到最终的JavaScript代码里，只是给TypeScript做类型校验用的。

比如针对你的例子，先定义_nodeCheck依赖的上下文类型：

// 先定义上下文的类型
type UtilsNodeCheckContext = {
  node: INodeType;
  nn: INodeType;
};

const Utils = {
  isSomeMethod: function (a: INodeType, b: INodeType) {
    // 你的逻辑实现
    return true;
  },
  // 给_nodeCheck显式指定this的类型
  _nodeCheck: function (this: UtilsNodeCheckContext, n: INodeType) {
    // 现在TypeScript会准确提示this的属性，写错会直接报错
    return (n !== this.node && Utils.isSomeMethod(n, this.nn));
  },
  // 其他工具方法...
};

批量复用上下文类型 #

如果多个工具方法都依赖同一个上下文类型，你可以先定义整个Utils对象的类型，把每个方法的this约束统一写进去，这样实现的时候TypeScript会自动做类型推断：

type INodeType = { /* 你的节点类型定义 */ };
type UtilsSharedContext = {
  node: INodeType;
  nn: INodeType;
};

// 先定义Utils的完整类型
type UtilsType = {
  isSomeMethod(a: INodeType, b: INodeType): boolean;
  _nodeCheck(this: UtilsSharedContext, n: INodeType): boolean;
  // 其他方法的类型声明...
};

// 实现Utils时会自动遵循类型约束
const Utils: UtilsType = {
  isSomeMethod(a, b) {
    // 逻辑
    return a.id === b.id;
  },
  _nodeCheck(n) {
    // 这里this的类型已经被约束为UtilsSharedContext，不用再重复写
    return n !== this.node && Utils.isSomeMethod(n, this.nn);
  },
  // 其他方法实现...
};

额外注意点 #

• 如果你用箭头函数定义工具方法，那箭头函数本身没有自己的this，它会捕获外层作用域的this，这种情况就不能用上面的this参数语法了——所以如果方法需要依赖动态上下文，尽量用普通函数声明。
• 当你调用这些方法时，TypeScript会校验你传入的上下文是否符合指定类型。比如用call/apply指定上下文时，如果属性缺失或类型不匹配，会直接抛出类型错误：

  const validContext = { node: someNode, nn: anotherNode };
  Utils._nodeCheck.call(validContext, testNode); // 正常通过
  
  const invalidContext = { node: someNode };
  Utils._nodeCheck.call(invalidContext, testNode); // TypeScript报错：缺少nn属性
  

内容的提问来源于stack exchange，提问作者RQman