如果要说今年最火的前端技术，Vue3和TS绝对榜上有名。据了解，目前已有不少公司在使用Vue3+TS+Vite开发新项目。那我们一定不能落后。Use这称为运行时声明，因为传递给defineProps()的参数将作为运行时的props选项使用。第二种方式是通过泛型参数定义props的类型，更直接：//或这称为基于类型的声明，编译器将尝试可能尝试从类型参数中推断出等效的运行时选项。这种方法的缺点是你失去了为props定义默认值的能力。为了解决这个问题，我们可以使用withDefaults编译器宏：=>['one','two']})上面的代码将被编译成等效运行时道具的默认选项。非我们可以看到，基于类型的声明让我们可以更细粒度地控制触发事件的类型。非template>当没有类型注解时，事件参数会隐式标记为任意类型。如果在tsconfig.json中配置了"strict":true或"noImplicitAny":true，这也会引发TS错误。因此，建议显式键入事件处理函数的参数。此外，您可能需要在事件上显式转换属性：functionhandleChange(event:Event){console.log((event.targetasHTMLInputElement).value)}提供/注入注解类型提供和注入通常在运行中不同的组件。为了正确标记注入值的类型，Vue提供了一个InjectionKey接口，它是继承自Symbol的泛型类型，可以用来在提供者和消费者之间同步注入值的类型：import{provide,inject}from'vue'importtype{InjectionKey}from'vue'constkey=Symbol()asInjectionKeyprovide(key,'foo')//如果提供非字符串值，会报错constfoo=inject(key)//foo的类型:string|undefined建议将注入的key类型放在单独的文件中，这样可以被多个组件导入。使用字符串注入键时，注入值的类型未知，需要通过泛型参数显式声明：constfoo=inject('key')//type:string|undefined请注意，注入的值仍然可以是未定义的，因为无法保证提供者会在运行时提供此值。当提供默认值时，可以移除未定义的类型：constfoo=inject('foo','bar')//type:string如果您确定将始终提供该值，则还提供该值可以转换：constfoo=inject('foo')asstring需要使用显式指定的泛型参数和null初始值来创建dom模板引用的注解类型模板引用：请注意，为了严格的类型安全，它是访问el.value时必须使用可选链接或类型保护。这是因为在挂载组件之前，这个ref的值最初是null，当被引用的元素被卸载时，v-if也会被设置为null。为组件模板引用注解类型有时我们需要将模板引用添加到子组件，以便调用它公开的方法。例如，我们有一个MyModal子组件，它有一个打开模态框的方法：为了获取MyModal的类型，我们首先需要通过typeof获取其类型，然后使用TypeScript的内置InstanceType工具类型要获取其实例类型：好了，以上就是在Vue3组件中使用TS类型的基本方法，也是我最近学习Vue3笔记。如果对你有帮助，别忘了点赞支持哦~
