外部访问Alpine Store触发TypeScript错误，如何解决？

要解决TypeScript提示Property 'qr' does not exist on type 'XData'的错误，核心是给Alpine Store添加自定义类型声明，让TypeScript识别你的Store结构：

步骤1：定义Store的类型接口 #

先声明你的Store结构对应的TypeScript接口：

interface StateStore {
  qr: string;
}

步骤2：扩展Alpine的全局Store类型 #

通过模块声明合并，让Alpine的Store类型包含你的自定义Store：

declare module 'alpinejs' {
  interface Stores {
    state: StateStore;
  }
}

步骤3：创建Store并访问/更新 #

现在你可以正常创建Store，之后访问或更新qr属性时TypeScript就不会报错了：

// 创建Store
Alpine.store('state', {
  qr: ''
})

// 外部更新值
Alpine.store('state').qr = 'test';
// 外部访问值
const currentQr = Alpine.store('state').qr;

临时替代方案（不推荐） #

如果不想添加全局类型声明，也可以用类型断言临时绕过检查，但这会丢失类型安全：

(Alpine.store('state') as StateStore).qr = 'test';

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