Typescript在Vue方法内报TS2532：this对象可能为undefined如何解决

报错原因 #

你遇到的TS报错本质是Vue的methods选项中不支持使用箭头函数导致的：箭头函数会绑定定义时所在的父作用域的this，不会指向Vue组件实例，TS因此无法正确识别this的类型，才会抛出Object is possibly 'undefined'的错误。
注意：你认为此处this不会为undefined属于常见误解，即便你绕过TS校验，运行时也会因为this实际指向非组件实例，导致program、step赋值失败。

解决方法 #

最优方案：替换箭头函数为普通函数（推荐） #

直接将methods中的方法改为普通函数写法，Vue会自动将函数内部的this绑定到组件实例，TS也能正确识别this类型：

export default {
    methods: {
        setProgram(program: Program) {
            this.program = program 
            this.step++ 
        }
    },
    // ...其余配置
}

临时绕过方案（仅特殊场景使用，不推荐） #

如果你确实有特殊原因需要保留箭头函数，可以用以下两种方式绕过TS校验：

• 使用非空断言操作符!，告知TS你确认此处this一定有值：

export default {
    methods: {
        setProgram: (program: Program)=>{
            this!.program = program
            this!.step++
        }
    },
    // ...
}

• 显式为this指定组件实例类型：

// 先导入Vue类型，如果你有自定义的组件类型也可以直接使用
import type { Vue } from 'vue'

export default {
    methods: {
        setProgram: (program: Program)=>{
            const vm = this as Vue & { program: Program, step: number }
            vm.program = program
            vm.step++
        }
    },
    // ...
}

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