前端【TS】06-typescript【基础】【搭建Vite+Vue3+TS项目】【为ref、reactive、computed、事件处理函数、模版引用、组件的props、组件的emits 标注类型】【类型声明文件】【自定义声明文件】

前置

基于Vite创建Vue3 + TS环境

　　vite官方文档：https://cn.vitejs.dev/guide/

　　vite除了支持基础阶段的纯TS环境之外，还支持 Vue + TS开发环境的快速创建, 命令如下：

npm create vite@latest vue-ts-project -- --template vue-ts

// 说明：
1. npm create vite@latest   基于最新版本的vite进行项目创建
2. vue-ts-pro    项目名称
3. -- --template vue-ts    选择Vue + TS的开发模板

和.vue文件TS环境相关的工具职责说明

　　开发阶段
　　　　1. Volar工具对.vue文件进行实时的类型错误反馈
　　　　2. TypeScript Vue Plugin 工具用于支持在 TS 中 import *.vue 文件
　　打包阶段
　　　　vue-tsc工具负责打包时最终的类型检查

 

vue3中的标注类型

为ref标注类型

　　好处

　　　　为ref标注类型之后，既可以在给ref对象的value赋值时校验数据类型，同时在使用value的时候可以获得代码提示

　　如何标注类型

　　　　

<script setup lang="ts">
import { ref } from 'vue'
type ListItem = {
  id: number
  name: string
}

const list = ref<ListItem[]>([])
list.value = [
  {
    id: 1,
    name: '张三'
  }
]
</script>

<template>
  <ul>
    <li v-for="item in list" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<style scoped></style>

 

为reactive标注类型

　　场景和好处

　　　　为reactive标注类型之后，既可以在响应式对象在修改属性值的时候约束类型，也可以在使用时获得代码提示

　　如何标注类型

　　　　

<script setup lang="ts">
import { reactive } from 'vue'

// 1、自动推导， 根据默认值推导出来的类型
const form = reactive({
  username: '',
  password: ''
})
form.username = 'zhangsan' // 如果赋值的类型与推导的类型不一致，则会报错提示

// 2、显示注解变量的类型，推导不出来我们想要的类型
type Form = {
  username: string
  password: string
  isAgree?: boolean
}

const form2: Form = reactive({
  username: '张三',
  password: '123'
})
</script>

<template>
  <div>
    <div>{{ form.username }}</div>
    <div>{{ form2.username }}</div>
    <div>{{ form2.password }}</div>
  </div>
</template>

<style scoped></style>

 

为computed标注类型

　　计算属性通常由已知的响应式数据计算得到，所以依赖的数据类型一旦确定通过自动推导就可以知道计算属性的类型 另外根据最佳实践，计算属性多数情况下是只读的，不做修改，所以配合TS一般只做代码提示

　　

　　需求：给ref函数标注类型，接收后端返回的对象列表，然后使用计算属性做过滤计算，计算得到单价大于500的商品

<script setup lang="ts">
import { computed, ref } from 'vue'

// 1、ref标注类型
type Item = {
  id: number
  name: string
  price: number
}
const list = ref<Item[]>([])

// 2、基于List筛选出价格大于400的商品
const filterList = computed(() => list.value.filter(item => item.price > 500))
</script>

<template>
  <div>
    <ul>
      <li v-for="item in filterList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<style scoped></style>

为事件处理函数标注类型

　　原生dom事件处理函数的参数默认会自动标注为any类型，没有任何类型提示，为了获得良好的类型提示，需要手动标注类型

事件处理函数的类型标注主要做俩个事

　　1. 给事件对象形参 e 标注为Event类型，可以获得事件对象的相关类型提示

　　2. 如果需要更加精确的DOM类型提示可以使用断言（as）进行操作

<script setup lang="ts">
import { computed, ref } from 'vue'

// 这么写会直接推导为any类型
// Parameter 'e' implicitly has an 'any' type
const inputChange = e => {}

// 1、给事件对象形参 e 标注为Event类型，可以获得事件对象的相关类型提示
const inputChange2 = (e: Event) => {
  // 这里在点的时候就能提示所有事件对象的方法
  console.log(e.target) 
}

// 2. 如果需要更加精确的DOM类型提示可以使用断言（as）进行操作
const inputChange3 = (e: Event) => {
  // 这里在点的时候就能提示所有事件对象的方法
  // 但是e.target不知道具体是什么类型
  // 那么如果这个target如果知道一定是input那么就断言类型为HTMLInputElement
  // 这样就可以通过. 获取到input这个dom元素的所有方法
  console.log((e.target as HTMLInputElement).value) 
}
</script>

<template>
  <div>
    <input type="text" @change="inputChange" />
  </div>
</template>

<style scoped></style>

为模版引用标注类型

　　给模版引用标注类型，本质上是给ref对象的value属性添加了类型约束，约定value属性中存放的是特定类型的DOM对 象，从而在使用的时候获得相应的代码提示

<script setup lang="ts">
import { onMounted, ref } from 'vue'

// 使用联合类型，标注其为HTMLInputElement或null
const inputRef = ref<HTMLInputElement | null>(null)

onMounted(() => {
  // 当对象的属性可能是 null 或 undefined 的时候，称之为“空值”，尝试访问空值身上的属性或者方法会发生类型错误
  inputRef.value.focus()
  // 解决方式1：可选链 (使用?.) 表示当value不为空才调用focus方法
  inputRef.value?.focus()
  // 解决方式2：逻辑判断方案
  if (inputRef.value) {
    inputRef.value?.focus()
  }
  // 解决方式3：非空断言方案, 不推荐使用
  // 非空断言（!）是指我们开发者明确知道当前的值一定不是null或者undefined，让TS通过类型校验
  inputRef.value!.focus()
})
</script>

<template>
  <div>
    <input type="text" ref="inputRef" />
  </div>
</template>

<style scoped></style>

 

为组件的props标注类型

为什么给props标注类型

　　1. 确保给组件传递的prop是类型安全的

　　2. 在组件内部使用props和为组件传递prop属性的时候会有良好的代码提示

语法：通过defineProps宏函数对组件props进行类型标注

父传子，子组件定义参数类型

　　需求：按钮组件有俩个prop参数，color类型为string且为必填，size类型为string且为可选，怎么定义类型？

　　说明：按钮组件传递prop属性的时候必须满足color是必传项且类型为string, size为可选属性，类型为string

　　

 父组件

<script setup lang="ts">
import List from './components/List.vue'
</script>

<template>
  <div>
    <!-- 通过自定义属性给子组件传值 -->
    <!--  -->
    <List color="red" size="100"></List>

    <!-- 如果传的类型不正确，就会提示报错 -->
    <!-- Type 'number' is not assignable to type 'string' -->
    <List :color="100" size="100"></List>
  </div>
</template>

<style scoped></style>

子组件

<script setup lang="ts">
// 接收父组件传值
type Props = {
  color: string
  size?: string
}

const props = defineProps<Props>()
</script>
<template>
  <div>{{ props.color }}</div>
</template>

<style scoped></style>

props默认值设置

　　场景：Props中的可选参数通常除了指定类型之外还需要提供默认值，可以使用withDefaults宏函数来进行设置

　　需求：按钮组件的size属性的默认值设置为 middle

　　说明：如果用户传递了size属性，按照传递的数据来，如果没有传递，则size值为 ’middle’

<script setup lang="ts">
// 接收父组件传值
type Props = {
  color: string
  size?: string // 可选参数
}

// 使用withDefaults宏函数给可选参数size设置默认值
// 如果父组件没有传size,那么size默认为middle
const props = withDefaults(defineProps<Props>(), {
  size: 'middle'
})
</script>
<template>
  <div>{{ props.color }}</div>
</template>

<style scoped></style>

 

为组件的emits标注类型

子传父，子组件定义事件名称和参数类型

　　作用：可以约束事件名称并给出自动提示，确保不会拼写错误，同时约束传参类型，不会发生参数类型错误

　　语法：通过 defineEmits 宏函数进行类型标注

　　需求：子组件触发一个名称为 ’get-msg‘ 的事件，并且传递一个类型为string的参数

　　

 父组件

<script setup lang="ts">
import List from './components/List.vue'

const getMessage = (msg: string) => {
  console.log('接收到子组件传的msg: ', msg)
}

const getSize = (size: number) => {
  console.log('接收到子组件传的msg: ', size)
}
</script>

<template>
  <div>
    <!-- 通过监听子组件定义的事件，拿到子组件传的值 -->
    <List @get-msg="getMessage" @get-size="getSize"></List>
  </div>
</template>

<style scoped></style>

子组件

<script setup lang="ts">
type Emits = {
  // 定义的第一个事件
  (e: 'get-msg', msg: string): void
  // 定义第二个事件
  (e: 'get-size', size: number): void
}
// 1、定义事件类型emit
const emit = defineEmits<Emits>()

// 2、定义触发事件的函数，调用对应的事件
const clickHandle = () => {
  // 触发事件1
  emit('get-msg', '我是儿子')
  // 触发事件2
  emit('get-size', 200)
}
</script>
<template>
  <button @click="clickHandle">点击传值给父组件</button>
</template>

<style scoped></style>

类型声明文件

　　概念：在TS中以d.ts为后缀的文件就是类型声明文件，主要作用是为js模块提供类型信息支持，从而获得类型提示

说明：

　　1. d.ts是如何生效的？

　　在使用js某些模块的时候，TS会自动导入模块对应的d.ts文件，以提供类型提示

　　2. d.ts是怎么来的？

　　库如果本身是使用TS编写的，在打包的时候经过配置自动生成对应的d.ts文件（axios本身就是TS编写的）

 

使用 DefinitelyTyped 提供类型声明文件

　　场景：有些库本身并不是采用TS编写的，无法直接生成配套的d.ts文件，但是也想获得类型提示，此时需要 Definitely Typed 提供类型声明文件

　　

 　　DefinitelyTyped是一个TS类型定义的仓库，专门为JS编写的库可以提供类型声明，比如可以安装 @types/jquery 为 jquery提供类型提示

　　

TS内置类型声明文件

　　TS为JS运行时可用的所有标准化内置API都提供了声明文件，这些文件既不需要编译生成，也不需要三方提供

　　

 说明：这里的lib.es5.d.ts以及lib.dom.d.ts都是内置的类型声明文件，为原生js和浏览器API提供类型提示

自定义类型声明文件

　　d.ts文件在项目中是可以进行自定义创建的，通常有俩种作用，第一个是共享TS类型（重要），第二种是给js文件提供 类型（了解）

场景一：共享TS类型

　　相当于原本类型和变量写在一起，然后这里将类型全部提取到d.ts结尾的文件中，然后通过export导出，在使用到的文件中就导入并且导入的时候通过type来标识，然后使用类型

　　

 说明：哪个业务组件需要用到类型导入即可，为了区分普通模块，可以加上type关键词

场景二：给JS文件提供类型

　　当JS只书写逻辑时，其他地方用到这个JS文件，使用其中的方法或者变量的时候，是没有提示的，此时如果希望有提示，那么需要与原js文件同名，创建一个d.ts结尾的文件，然后将js中的类型定义到其中，然后使用declare关键字声明对应类型，然后导出
　　此时其他地方在使用到这个js，导入之后就有完美的提示

　　

说明：通过declare关键词可以为js文件中的变量声明对应类型，这样js导出的模块在使用的时候也会获得类型提示

.ts文件和d.ts文件对比

TS中有俩种文件类型：

　　一种是.ts文件，

　　一种是.d.ts文件

.ts文件

　　1. 既可以包含类型信息也可以写逻辑代码

　　2. 可以被编译为js文件

.d.ts文件

　　1. 只能包含类型信息不可以写逻辑代码

　　2. 不会被编译为js文件，仅做类型校验检查

 

综合案例

　　下载代码

git clone http://git.itcast.cn/heimaqianduan/vue3-ts.git   // 代码中页面结构已经写好

List.vue

<script setup lang="ts">
import axios from 'axios'
import { onMounted, ref } from 'vue'

import type { ArticleItem, ArticleResData } from '../types/data'
// 定义组件props类型

type Props = {
  channelId: number
}
const props = defineProps<Props>()



// 1. 定义响应式列表数据
const list = ref<ArticleItem[]>()

// 2. axios.request获取数据
const getList = async () => {
  const res = await axios.request<ArticleResData>({
    url: 'http://geek.itheima.net/v1_0/articles',
    method: 'GET',
    params: {
      channel_id: props.channelId,
      timestamp: Date.now()
    }
  })
  list.value = res.data.data.results
}
onMounted(() => getList())

</script>

<template>
  <div class="list-box">
    <!-- 列表 -->
    <van-cell v-for="item in list" :key="item.art_id">
      <!-- 标题区域的插槽 -->
      <template #title>
        <!-- 无图模式 -->
        <div class="title-box" v-if="item.cover.type === 0">
          <!-- 标题 -->
          <span> {{ item.title }} </span>
        </div>

        <!-- 单图模式 -->
        <div class="title-box" v-if="item.cover.type === 1">
          <span>{{ item.title }}</span>
          <img class="thumb" :src="item.cover.images[0]" />
        </div>

        <!-- 三图模式 -->
        <div class="thumb-box" v-if="item.cover.type === 3">
          <img class="thumb" v-for="img in item.cover.images" :src="img" :key="img" />
        </div>
      </template>
      <!-- label 区域的插槽 -->
      <template #label>
        <div class="label-box">
          <div>
            <span>{{ item.aut_name }}</span>
            <span>{{ item.comm_count }}评论</span>
            <span>{{ item.pubdate }}</span>
          </div>
        </div>
      </template>
    </van-cell>

  </div>
</template>


<style scoped lang="less">
.list-box {
  position: fixed;
  top: 50px;
  bottom: 0;
  width: 100%;
  overflow-y: auto;
}

/* 标题样式 */
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* label描述样式 */
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 文章信息span */
.label-box span {
  margin: 0 3px;

  &:first-child {
    margin-left: 0;
  }
}

/* 图片的样式, 矩形黄金比例：0.618 */
.thumb {
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

/* 三图, 图片容器 */
.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>

类型定义

// 频道相关类型
// 泛型定义

type ResType<T> = {
  message: string
  data: T
}

export type ChannelItem = {
  id: number
  name: string
}

// export type ChannelRes = {
//   data: {
//     channels: ChannelItem[]
//   }
//   message: string
// }
export type ChannelRes = ResType<{
  channels: ChannelItem[]
}>

// 文章列表相关类型

// 文章对象类型
export type ArticleItem = {
  art_id: string
  aut_id: string
  aut_name: string
  comm_count: number
  cover: {
    type: number
    images: string[]
  }
  is_top: number
  pubdate: string
  title: string
}

// 文章接口响应数据类型
// export type ArticleResData = {
//   data: {
//     pre_timestamp: string
//     results: ArticleItem[]
//   }
//   message: string
// }

export type ArticleResData = ResType<{
  pre_timestamp: string
  results: ArticleItem[]
}>

App.vue

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import List from './components/List.vue'
import axios from 'axios'

import type { ChannelItem, ChannelRes } from './types/data'

// 核心实现步骤

// 1. 声明响应式列表数据 (ref + TS)
const channelList = ref<ChannelItem[]>([])

// 2. axios获取后端数据 (axios.request<类型>)
const getList = async () => {
  const res = await axios.request<ChannelRes>({
    url: 'http://geek.itheima.net/v1_0/channels',
    method: 'GET'
  })
  // 3. 后端数据赋值给响应式列表 (类型自然匹配)
  channelList.value = res.data.data.channels
}

onMounted(() => getList())

// 4. 响应式列表渲染到模板 (类型提示)

// 频道id
const channelId = ref(0)
const tabChange = (id: number) => {
  console.log(id)
  channelId.value = id
}
</script>

<template>
  <!-- tab切换 -->
  <van-tabs @change="tabChange">
    <van-tab v-for="item in channelList" :key="item.id" :title="item.name">
      <!-- 文章列表 -->
      <List :channel-id="channelId" />
    </van-tab>
  </van-tabs>
</template>