前端【TS】02-typescript【基礎】【搭建Vite+Vue3+TS專案】【為ref標註型別】

前置

基於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>