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

相关推荐
GIS程序媛—椰子14 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落1 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
麦麦大数据1 小时前
基于vue+neo4j 的中药方剂知识图谱可视化系统
vue.js·知识图谱·neo4j
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS医院管理系统(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·开源·intellij-idea
理想不理想v2 小时前
vue经典前端面试题
前端·javascript·vue.js
小阮的学习笔记2 小时前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜2 小时前
Vue实现登录功能
前端·javascript·vue.js
杨荧2 小时前
【JAVA毕业设计】基于Vue和SpringBoot的服装商城系统学科竞赛管理系统
java·开发语言·vue.js·spring boot·spring cloud·java-ee·kafka