TypeScript报错：类型'string'不存在属性'address'的原因与解决方案

错误原因 #

• TypeScript推断this.tenantAccount.address是字符串类型，但代码中试图访问它的address、latitude等子属性，字符串不存在这些属性，因此触发报错。
• 常见触发场景：
  • 页面间传递对象时，用JSON.stringify()把对象转成了字符串，接收端直接将字符串赋值给tenantAccount，未做解析还原。
  • tenantAccount的类型定义中，address字段被错误声明为string，而非包含子属性的对象类型。

最优解决方案 #

方案1：修正类型定义（推荐长期使用） #

先给tenantAccount及其子结构定义正确的TypeScript接口，确保类型匹配：

// 定义子类型
interface Address {
  address: string;
  latitude: number;
  longitude: number;
  state: { name: string };
}

interface Owner {
  name: string;
  mobile_number: string;
}

// 定义主类型
interface TenantAccount {
  name: string;
  telephone_number: string;
  owner: Owner;
  address: Address; // 这里将address类型从string改为Address
  tenant_email: string;
  created_by: { name: string };
  source: { name: string };
}

// 给tenantAccount指定正确类型
tenantAccount: TenantAccount;

方案2：修复页面传递的对象解析问题 #

如果是页面传递时对象被序列化为字符串，接收端需要先解析成对象，再断言为正确类型：

// 示例：从路由参数或本地存储获取并解析
const rawAccountStr = this.$route.query.tenantAccount; // 或 localStorage.getItem('tenantAccount')
this.tenantAccount = JSON.parse(rawAccountStr) as TenantAccount;

临时应急方案（不推荐） #

如果需要快速绕过检查（会丢失TypeScript类型保护），可以用类型断言：

accountData: any = {
  name: this.tenantAccount.name,
  telephone_number: this.tenantAccount.telephone_number,
  mobile_number: this.tenantAccount.owner.mobile_number,
  address: (this.tenantAccount.address as any).address,
  owner_name: this.tenantAccount.owner.name,
  tenant_email: this.tenantAccount.tenant_email,
  created_by: this.tenantAccount.created_by.name,
  source_name: this.tenantAccount.source.name,
  latitude: (this.tenantAccount.address as any).latitude,
  longitude: (this.tenantAccount.address as any).longitude,
  state: (this.tenantAccount.address as any).state.name
}

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