TypeScript中使用apply方法时如何正确为this参数标注类型

问题根因 #

你当前的代码有3个核心问题导致this类型不生效：

• this参数是函数签名级别的约束，你仅在外层generatePathFactory上标注了this类型，内层返回的普通函数有独立的作用域，不会自动继承外层的this类型，因此TS会判定内层this为any。
• 对象字面量初始化阶段，内部的this指向外层作用域（严格模式下为undefined），根本不是你预期的ENV_DASHBOARD对象，generatePathFactory.apply(this)传入的this本身就不符合类型要求。
• 你在generatePathFactory中用typeof ENV_DASHBOARD标注类型时，ENV_DASHBOARD还处于初始化的暂时性死区，TS无法正确推导其类型。

正确实现方案 #

写法1：保留普通函数，显式标注内外层this类型 #

提前定义对象类型，避免初始化顺序问题，内外层函数都显式标注this类型，等对象创建完成后再调用apply绑定正确的this：

import { generatePath } from 'react-router-dom';

type generatePathParamsType = Parameters<typeof generatePath>[1];

// 提前定义对象类型，解决暂时性死区问题
type DashboardEnv = {
  PATH: string;
  TITLE: string;
  generatePath: (args?: generatePathParamsType) => string;
}

const generatePathFactory = function (this: DashboardEnv) {
  // 内层函数单独标注this类型，和外层保持一致
  return function (this: DashboardEnv, args: generatePathParamsType = {}) {
    return generatePath(this.PATH, args);
  };
};

const ENV_DASHBOARD: DashboardEnv = {
  PATH: "/dashboard/:environmentId",
  generatePath: () => '', // 临时占位，等对象创建完成后重新赋值
  TITLE: "Dashboard"
};
// 对象创建完成后再绑定this，传入的this符合DashboardEnv类型要求
ENV_DASHBOARD.generatePath = generatePathFactory.apply(ENV_DASHBOARD);

// 调用时类型校验完全正常
console.log(ENV_DASHBOARD.generatePath({ environmentId: "1" })); // '/dashboard/1'

写法2：用箭头函数自动继承外层this（更推荐） #

内层函数改为箭头函数，箭头函数没有自身的this，会直接继承外层作用域的this类型，不需要额外标注：

import { generatePath } from 'react-router-dom';

type generatePathParamsType = Parameters<typeof generatePath>[1];

type DashboardEnv = {
  PATH: string;
  TITLE: string;
  generatePath: (args?: generatePathParamsType) => string;
}

const generatePathFactory = function (this: DashboardEnv) {
  // 箭头函数自动继承外层factory的this类型，TS可自动推导
  return (args: generatePathParamsType = {}) => {
    return generatePath(this.PATH, args);
  };
};

const ENV_DASHBOARD: DashboardEnv = {
  PATH: "/dashboard/:environmentId",
  generatePath: () => '',
  TITLE: "Dashboard"
};
ENV_DASHBOARD.generatePath = generatePathFactory.apply(ENV_DASHBOARD);

注意事项 #

• 永远不要在对象字面量初始化的内部尝试通过this引用正在创建的对象，JS对象字面量的创建阶段不会将this绑定到当前实例，这类写法本身就有JS逻辑错误。
• 嵌套的普通函数不会继承外层函数的this类型，必须单独标注；如果需要透传this，优先用箭头函数，减少手动标注的成本和出错概率。
• 用apply/call/bind修改函数this指向时，TS会自动校验传入的this值是否匹配函数声明的this参数类型，类型不匹配时会直接抛错。

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