TypeScript中对象属性访问问题：JS正常运行但TS报错的解决方法咨询

首先，你的代码在TypeScript里报错，核心原因是箭头函数的this绑定规则——箭头函数不会创建自己的this上下文，它会捕获定义时所在外层作用域的this，而不是指向当前的getUserName对象。

为什么JavaScript里看似正常？ #

其实严格来说，你的JavaScript代码能输出timi大概率是个巧合（比如在非严格模式的浏览器环境中，外层this指向window，而刚好window上有同名的firstname变量？或者你的测试环境有特殊配置）。按照标准JavaScript规则，对象字面量中的箭头函数this不会指向该对象，正常情况下应该输出undefined才对。

TypeScript中的解决方法 #

这里有两种靠谱的方式来修复这个问题：

1. 使用普通函数（或ES6方法语法）替代箭头函数

普通函数作为对象方法时，调用时this会自动指向调用它的对象（也就是getUserName），TypeScript也能正确推断this的类型：

let getUserName = { 
  firstname : "timi", 
  lastname: "oluwayomi", 
  middlename: "ola", 
  // ES6方法语法（推荐，更简洁）
  full() { 
    return this.firstname + this.lastname + this.middlename 
  }, 
  // 传统函数写法也可以
  first: function() { 
    return this.firstname 
  } 
} 
console.log(getUserName.first()) // 正确输出 "timi"

2. 直接通过对象变量名访问属性（不推荐，但可行）

如果你一定要用箭头函数，可以绕过this，直接通过对象的变量名来访问属性：

let getUserName = { 
  firstname : "timi", 
  lastname: "oluwayomi", 
  middlename: "ola", 
  full : () => { 
    return getUserName.firstname + getUserName.lastname + getUserName.middlename 
  }, 
  first: () => { 
    return getUserName.firstname 
  } 
} 
console.log(getUserName.first()) // 输出 "timi"

这种方式的缺点是不够灵活：如果后续修改了getUserName的变量名，你必须同步修改函数内部的引用；如果对象被重新赋值，函数也会访问错误的对象。

TypeScript报错的具体原因 #

TypeScript会严格检查this的类型：在箭头函数中，this继承自外层作用域（比如全局作用域下是Window & typeof globalThis），而全局对象并没有firstname、lastname这些自定义属性，所以TypeScript会抛出类似“属性'firstname'在类型'Window'上不存在”的错误。

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