Vue3+vite+Ts+pinia—第六章 TypeScript

6.1 TypeScript概述

TypeScript是由微软开发自由和开源的编程语言,它是JavaScript的一个超集。由于JavaScript属于弱类型语言,在编码过程中的常见拼写、类型等错误都不能预先检查。TypeScript的最初目标是成为JavaScript程序的静态类型检查器,但随着其发展,TypeScript的目标更多是开发大型应用,同时其代码可以编译生成纯JavaScript代码,并可运行在任何浏览器上。

TypeScript包含了JavaScript的全部特性,支持ES6标准,下图展示了TypeScript、JavaScript、ES5、ES6之间的关系。

由于TypeScript知识点非常庞大,在这里不能全部展开一一细说,只能了解一下我们在实战项目上比较常用的知识点。这里主要介绍一下ts的接口、泛型以及自定义类型,以及在Vue3上使用ts的流程。

6.2 ts中的接口

6.2.1 定义接口

假设定义一个Person对象,里面包含id、name、age这三个属性,它们分别是字符串、字符串和数字类型。对于这种确定对象属性以及属性的类型,我们可以使用接口对它进行约束。

在ts中,使用interface关键字来定义接口:

typescript 复制代码
// 定义一个接口,用于限制person对象的具体属性
interface PersonInter {
  id:string,
  name:string,
  age:number
}

注意:定义属性的类型,用的是小写,不要用大写。例如字符串使用string,不要写成String。

6.2.2 使用接口

定义好接口之后,别忘记要把它暴露出去,不然外部就无法引入。这里使用最直接的export把接口暴露出去。

typescript 复制代码
// 定义一个接口,用于限制person对象的具体属性
export interface PersonInter {
  id:string,
  name:string,
  age:number
}

接下来就是引入ts文件了。

xml 复制代码
<script lang="ts" setup>
  import {PersonInter} from '@/types'
</script>

我们发现引入了之后代码飘红了,说明这里有问题。首先排除不是路径出问题,因为如果是路径错误,那么飘红的地方应该在from后面的路径那里。那么我们尝试使用一下这个接口:

使用了它还是飘红,因为以最新的规范而言,它是一个ts接口,不是一个具体的值。我们知道import引入一个具体的值,它是可以直接使用的,但是引入ts接口不行,它是一个规范,是一个类型,不能当作值来使用的。

由于引入的东西有可能是一个值,也有可能是一个类型,为了避免混淆,对于类型的引入,前面需要添加一个type关键字

此时ts接口约束已经生效,如果Person对象里没有包含id、name、age这三个属性,或者单词拼错,它就会提出警告提示:

6.3 ts中的泛型

说完对象再来看数组类型,假设有一个数组persons,它的每一项都是一个Person对象。既然它是一个数组,我们第一反应就是给它设置为Array类型:

bash 复制代码
<script lang="ts" setup>
  let personList:Array = [
    {id:'asyud7asfd01',name:'张三',age:60},
    {id:'asyud7asfd02',name:'李四',age:18},
    {id:'asyud7asfd03',name:'王五',age:5}
  ]
</script>

但这样明显是不对的,因为数组是可以放任何东西的,也就是说单纯的指定数组类型是不够的,你还需要指定数组里的每一项是什么类型。

这个时候就涉及到泛型,泛型是一种特殊的数据类型,它可以在编码时不指定具体类型,而在使用时再确定类型。在数组中使用泛型就可以让数组中的元素保持统一的数据类型,在编译时也可以发现类型不匹配的错误。

在这里既然之前已经定义好Person对象的接口PersonInter,那么在数组的泛型直接使用它即可:Array<PersonInter>

xml 复制代码
<script lang="ts" setup>
  import {type PersonInter} from '@/types'
  
  let personList:Array<PersonInter> = [
    {id:'asyud7asfd01',name:'张三',age:60},
    {id:'asyud7asfd02',name:'李四',age:18},
    {id:'asyud7asfd03',name:'王五',age:5}
  ]
</script>

这代码的含义是:定义一个personList变量,它是一个数组类型并且每一项都需要符合PersonInter接口规范。

6.4 ts中的自定义类型

有时候一个数组里可以包含多个类型,例如它可以写成Array<PersonInter, aaa, bbb, ccc, ...>,类似这种情况看起来就会显得比较臃肿,要是有多个地方出现这种情况,写起来感觉特别难受。

我们还有一种办法就是自定义类型,它用type关键字开头定义一个类型,然后可以根据需求来进行组合。像上述6.3的例子中,personList既要符合数组类型也要求每一项符合PersonInter接口,此时可以运用自定义类型:

typescript 复制代码
// 定义一个接口,用于限制person对象的具体属性
export interface PersonInter {
  id:string,
  name:string,
  age:number
}

/* 一个自定义类型 */

// 第一种写法
// export type Persons = Array<PersonInter>

// 第二种写法
export type Persons = PersonInter[]

自定义类型之后,在使用的时候就显得比较简洁了:

bash 复制代码
<script lang="ts" setup>
  import {type Persons} from '@/types'
  
  let personList:Persons = [
    {id:'asyud7asfd01',name:'张三',age:60},
    {id:'asyud7asfd02',name:'李四',age:18},
    {id:'asyud7asfd03',name:'王五',age:5}
  ]
</script>

6.5 对响应式数据使用ts

Vue3的响应式数据无非就是ref和reactive,对它们使用ts,有两种方式:

1、正常使用

其实不用管数据是否响应式,老老实实在变量名后面使用ts添加类型一样是可以的。

php 复制代码
<script lang="ts" setup>
  import {reactive} from 'vue'
  import {type Persons} from '@/types'
  
  let personList:Persons = reactive([
    {id:'asyud7asfd01',name:'张三',age:60},
    {id:'asyud7asfd02',name:'李四',age:18},
    {id:'asyud7asfd03',name:'王五',age:5}
  ])
</script>

2、ref或reactive通过泛型使用

ref和reactive毕竟是官方推荐的,它也考虑到ts的结合,因此它还可以通过泛型的方式定义类型:

python 复制代码
<script lang="ts" setup>
  import {reactive} from 'vue'
  import {type Persons} from '@/types'
  
  let personList = reactive<Persons>([
    {id:'asyud7asfd01',name:'张三',age:60},
    {id:'asyud7asfd02',name:'李四',age:18},
    {id:'asyud7asfd03',name:'王五',age:5}
  ])
</script>

6.6 示例代码

源码地址:gitee.com/huang_jing_...

文件目录:src_06_typescript

相关推荐
ggdpzhk2 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
刚刚好ā7 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
会发光的猪。9 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客10 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
周全全10 小时前
Spring Boot + Vue 基于 RSA 的用户身份认证加密机制实现
java·vue.js·spring boot·安全·php
ZwaterZ11 小时前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
码农六六11 小时前
vue3封装Element Plus table表格组件
javascript·vue.js·elementui