如何修复JS版Svelte 3 store转TypeScript时的TypeScript-ESLint告警

迁移场景说明 #

将原有可正常运行的JS版Svelte自定义Store（如登录态管理loginStore）迁移至TypeScript时，按照原有闭包模式编写的代码，通常会触发三类典型ESLint校验告警：

• 从svelte/store引入的writable实例上解构subscribe、update方法时，触发「避免引用未绑定方法，可能引发非预期this作用域问题」的校验告警
• 在自定义方法对象的内部逻辑中，通过this调用同对象其他方法时，连续触发「对any类型值上的成员的不安全访问」「对any类型值的不安全调用」两类告警
• 在Svelte组件中引入迁移后的store实例，调用实例自定义方法、通过$store语法读取内部状态字段时，触发「对any类型值上的成员的不安全访问」告警

可批量复用的告警修复方案 #

针对「writable方法解构的this作用域告警」 #

这类告警的触发逻辑是ESLint的@typescript-eslint/unbound-method规则：规则默认认为，将对象方法直接解构为独立变量时，若未绑定原对象的this上下文，脱离原对象调用时会出现指向异常。
而Svelte内置writable返回的subscribe/update/set方法本身是基于闭包实现的，完全不依赖自身的this上下文，不存在潜在的指向问题，可通过以下方式批量适配：

• 优先调整ESLint全局规则配置，对Svelte Store内置的三个方法名豁免unbound-method校验，避免每个迁移的文件都单独添加注释，降低批量迁移的工作量：

// .eslintrc 规则配置片段
"@typescript-eslint/unbound-method": ["error", {
  "ignoreStatic": true,
  "ignoreInterfaceMethodNames": ["subscribe", "update", "set"]
}]

• 若暂时无法调整全局规则，可在解构代码行添加行内注释临时豁免，不会影响代码运行逻辑：

// eslint-disable-next-line @typescript-eslint/unbound-method
const { subscribe, update } = writable(initialState)

针对「方法内this调用触发的any类型告警」 #

这类告警的触发原因是：自定义的方法集合未添加明确的TypeScript类型标注，TS会将其推断为any类型，进而触发「不安全访问」「不安全调用」的校验。
批量迁移时无需额外给this绑定类型，可从根源上消除问题：

• 取消方法内部对this的依赖，利用闭包作用域直接引用同作用域内定义的方法。这类方法本来就在同一个闭包内声明，根本不需要通过this查找上下文，从根源上避免了this指向的潜在问题
• 为所有自定义的store方法定义明确的接口类型，明确每个方法的入参、返回值类型

对比参考：
原始问题写法：

const methods = {
  OnInit() {
    // this无类型标注，被推断为any
    this.Login()
  },
  Login() { /* 读取localStorage、更新状态 */ },
  async Logout() { /* 发起登出请求、更新状态 */ }
}

修复后的通用写法：

// 提前定义store方法接口
interface LoginStoreMethods {
  OnInit: () => void
  Login: () => void
  Logout: () => Promise<void>
}

function createLoginStore() {
  // 提前定义状态接口
  interface LoginStoreState {
    isLoggedIn: boolean
  }
  const initialState: LoginStoreState = { isLoggedIn: false }

  // eslint-disable-next-line @typescript-eslint/unbound-method
  const { subscribe, update } = writable<LoginStoreState>(initialState)

  // 按作用域顺序声明方法，直接互相引用
  const Login = () => {
    const loginFlag = localStorage.getItem('is_logged_in')
    update(state => ({ ...state, isLoggedIn: Boolean(loginFlag) }))
  }

  const OnInit = () => {
    // 直接调用同作用域的Login，无需this
    Login()
  }

  const Logout = async () => {
    // 执行登出请求逻辑
    update(state => ({ ...state, isLoggedIn: false }))
  }

  // 合并能力为最终导出的store，明确标注返回类型
  const loginStore: LoginStoreMethods & Pick<typeof writable<LoginStoreState>, 'subscribe'> = {
    subscribe,
    OnInit,
    Login,
    Logout
  }

  return loginStore
}

export default createLoginStore()

针对「组件内访问store成员触发的any类型告警」 #

这类告警的本质原因是store实例没有明确的TypeScript类型标注，整个实例被TS推断为any类型，不管是调用自定义方法还是读取状态字段，都会触发不安全访问校验。
批量适配时只要做到两点，即可一次性消除这类告警：

• 在声明writable实例时，补上状态值的泛型类型标注，让状态字段的类型被TS明确识别
• 在合并最终导出的store时，为整个实例补充明确的接口类型，不要依赖TS的自动推断能力

完成上述类型标注后，组件内不管是调用loginStore.OnInit()方法，还是通过$loginStore.isLoggedIn语法读取状态字段，TS都能准确识别每个成员的类型，不会再触发any类型的校验告警。
批量迁移时，可将上述store创建的通用逻辑抽成可复用的工厂函数，每次新迁一个老JS Store时，只需要替换对应的状态接口、自定义方法逻辑，即可快速生成符合TS规范、无ESLint告警的store代码。

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