Vue中的option类型推断如果你用ts写代码，你会发现当我们写组件的option（选项）时，我们可以很好地提供类型推断，的当然，前提是你要使用Vue.extend()方法。具体使用可以参考我写的这篇博客，如何在不使用vue-class-decorator的情况下在vue中实现ts类型推断。vue2中使用ts，vue的type是如何实现在参数中为this提供类型推断的？以下代码在javascript中运行良好并且易于理解。但是当我们切换到ts进行静态类型检查时，这并不能很好地工作，那么我们如何让这个提供类型推断呢？exportdefault{data:{first_name:"Anthony",last_name:"Fu",},computed:{full_name(){returnthis.first_name+""+this.last_name;}},},方法：{hi(){alert(this.full_name);},},};thisprovidedthetype为了让this显示推断出的类型，我们可以采用传参的方式interfaceContext{$injected:string}functionbar(this:Context,a:number){this.$injected//Thisworks}但是，如果我们传入Record参数类型（index对象），就会出现问题，它（ts）没有很好的提供类型验证typeMethods=Recordany>constmethods:Methods={bar(a:number){this.$injected//ok}}methods.bar('foo','bar')//没有错误信息，因为参数类型变成了`any[]`，总不能一直要求用户提供参数类型吧！这种体验是非常不友好的，所以为了实现类型验证，我们需要另辟蹊径。在了解了Vue的代码之后，ThisType发现了一个很有用的ts内置类型——ThisTypeThisType定义：通过ThisType，我们可以在对象字面量中键入this，并提供一种方便的方式，通过上下文类型来控制this的类型。只有在--noImplicitThis选项下有效ThisType可以影响所有的嵌套函数，那么我们可以这样写typeMethods={double:(a:number)=>numberdeep:{nested:{half:(a:number)=>number}}}constmethods:Methods&ThisType={double(a:number){this.$injected//okreturna*2},deep:{嵌套:{half(a:number){this.$injected//okreturna/2}}}}methods.double(2)//okmethods.double('foo')//errormethods.deep.nested.half(4)//好的，你可以看到this的类型推断已经生效了，但是有一个缺点就是用户还需要自己定义方法的接口，那么我们能不能自动推断类型呢？可以实现define，通过函数自动推断类型。typeOptions={methods?:T}&ThisTypefunctiondefine(options:Options){returnoptions}define({methods:{foo(){this.$注入//ok},},})方法可以自动推断出来，那么我们就可以继续实现computed和data的类型推断了。整个完整的demo如下：/*----Type----*/exporttypeExtractComputedReturns={[keyinkeyofT]:T[key]extends(...args:any[])=>推断TReturn？TReturn:never}typeOptions={data:()=>Dcomputed:Cmethods:Mmounted:()=>void//和其他选项}&ThisType>//将它们合并在一起函数define(options:Options){}/*----用法----*/define({数据(){return{first_name:"Anthony",last_name:"Fu",}},computed:{fullname(){returnthis.first_name+""+this.last_name},},methods:{notify(msg:string){alert(msg)}},mounted(){this.notify(this.fullname)},})其实原理ofdefineisVue.extend可以推断出this（上下文类型）的原理
