如何让TypeScript检查自由函数中的this指向错误？

以下代码在执行时会抛出运行时错误，但TypeScript编译阶段未识别：

function foo() {
    console.log(this.x.y)
}

foo()

执行命令npx ts-node a.ts时，运行时报错：

TypeError: Cannot read properties of undefined (reading 'y')

当前tsconfig.json配置：

{
  "compilerOptions": {
    "esModuleInterop": true,
    "moduleResolution": "node",
    "target": "es2022",
  },
  "include": ["/**/*.ts"],
  "exclude": ["node_modules"],
  "files": ["a.ts"]
}

环境：Node 18.13.0，TypeScript 5.2.2，ts-node 10.9.1

TypeScript默认将普通函数中的this推断为any类型，因此不会对this.x的存在性进行检查。要让TS在编译阶段检测到该错误，需做以下配置和代码调整：

1. 开启noImplicitThis编译选项 #

在tsconfig.json的compilerOptions中添加该选项，强制TS检查this的类型，禁止隐式的any类型：

{
  "compilerOptions": {
    "esModuleInterop": true,
    "moduleResolution": "node",
    "target": "es2022",
    "noImplicitThis": true // 添加此配置
  },
  "include": ["/**/*.ts"],
  "exclude": ["node_modules"],
  "files": ["a.ts"]
}

2. 明确指定this的类型 #

根据函数的实际调用场景，给this绑定对应类型：

• 如果函数仅直接调用（不作为对象方法）：严格模式下this为undefined，可指定this为void或undefined，此时访问this.x会直接触发编译错误：

function foo(this: void) {
    console.log(this.x.y) // 编译报错：无法在类型为void的this上访问属性x
}

foo()

• 如果函数作为对象方法调用：定义接口约束this的结构，确保调用时符合类型要求：

interface FooThis {
  x: { y: string | number }
}

function foo(this: FooThis) {
    console.log(this.x.y)
}

// 正确调用：绑定到符合FooThis类型的对象
const obj: FooThis = { x: { y: 123 } }
foo.call(obj)

// 直接调用foo()会编译报错：this上下文类型void无法赋值给FooThis

3. 可选：开启strict模式 #

strict模式包含noImplicitThis在内的一系列严格检查规则，开启后可全面提升类型校验强度，避免更多隐式错误：

{
  "compilerOptions": {
    "strict": true, // 开启严格模式
    "esModuleInterop": true,
    "moduleResolution": "node",
    "target": "es2022",
  },
  "include": ["/**/*.ts"],
  "exclude": ["node_modules"],
  "files": ["a.ts"]
}

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