ts与vue

ts与Vue

如果你已经学习了typeScript,但不知道如何在vue项目中使用，那么这篇文章将会很适合你。参考千峰教育 kerwin视频

1.会自动推导，隐士推导。提示

类型系统。

独立模块。

isolatedModules选项：是否配置为独立的模块。

减少报错

let name:string = "kerwin"
myname.toFixed()

如果类型过于复杂，就写any，偷懒的写法。

对象：

使用接口来写类型。

对象有超强的提示。

interface Obj{
	name:string,
	age:number
}

let myobj:Obj
myobj={
	name:'kerwin'，
	age：100
}

后面接受数据，任意多少都行。

函数类型：

function test(a,b){
	return a+b
}
test(1,2)

选项式api

方法写错了也能够自动报错。

当定义了类型，就会对应相应类型的api。

类型断言。

实例对象，你不确定对象上有innerHTML属性，因为input没有innerHTML属性。

props未结合ts的写法

传递对象

自动补全能力。

import type {Proptype} from 'vue' 这个type怎么理解？

这里的 type 是 TypeScript 的关键字，用于类型声明和类型别名定义。在 Vue.js 中，使用 TypeScript 进行开发时，可以通过 import type 的方式导入一个类型来使用。

具体来说，import type {Proptype} from 'vue' 表示从 vue 模块中导入一个类型别名为 Proptype 的类型。此处的 Proptype 是 Vue.js 框架中用于定义组件属性类型检查的数据类型，它是一个复杂的类型别名，包含了许多其他的类型定义。

通过使用 import type，您可以方便地引用一个类型，而无需同时引入该模块的其他内容，从而使代码更加简洁和可读。同时，由于 TypeScript 是一种强类型语言，在编写代码时使用正确的类型别名也可以帮助您避免一些常见的类型错误和 bug。

emit事件参数定义类型。检查类型是否符合标准。

组合式api

显示定义ref

另一种写法

DOM元素

computed也可以采用泛型的写法。

未来去引入别人的库，如果别人的库用ts写的，那么我一但.就会提示出来了。

props传入对象类型的写法:

过于繁琐：

本身就是支持泛型的函数。简化写法。在开发的过程中，也会提示你。

emit不会报错。

里面定义函数类型。

路由与ts的结合

datalist里面是数组，数组里面每一项是Iitem

里面定义函数类型。