TypeScript应用

目录

• • TypeScript应用
  • • • defineProps的TS写法
      • defineEmits的TS写法
      • ref的TS写法
      • • • 1.简单数据类型
          • 2.复杂数据类型
      • reactive的TS写法
      • • • 1.默认值属性是固定的
          • 2.根据默认值推导不出我们需要的类型
      • computed和TS
      • 事件处理与TS
      • [Template Ref与TS](#Template Ref与TS)
      • 非空断言
      • TypeScript类型声明文件
      • • • TS类型声明文件是什么
          • 内置类型声明文件
          • 第三方库类型声明文件
          • 自定义类型声明文件

TypeScript应用

vue项目中使用ts，script加上 lang="ts" 才能写ts代码

<script setup lang="ts">

</script>

defineProps的TS写法

父组件

<template>
  <div>
    <h2>父组件</h2>
    <p>{{ money }}---{{ car }}</p>
    <MyCom :money="money" ></MyCom>
  </div>
</template>

<script setup lang="ts">
import MyCom from './components/MyCom.vue';
import {reactive,ref} from 'vue'
let money =ref(1000);
let car = ref("宝马")
</script>

子组件

<template>
    <div>
      <h2>子组件</h2>
      <p>{{ money }}====={{ car }}</p>
    </div>
</template>
<script setup lang="ts">
//   const props = defineProps({
//     money:{
//         type:Number,
//         required:true
//     },
//     car:{
//         type:String,
//         required:false,
//         default:"麻喇沙蒂"
//     }
//   })
// 1.通过泛型参数来定义props的类型
// const props = defineProps<{
//     money:number
//     car?:string
// }>()
// 2.给props设置默认值 需要使用withDefaults
// const props = withDefaults(
//    defineProps<{
//     money:number;
//     car?:string
//    }>(),
//    {
//      car:"麻喇沙蒂"
//    }
// )
// 3.上面的写法太笨拙， 使用响应式语法糖 解构 + defineProps
const {money,car = "麻喇沙蒂"} = defineProps<{
    money:number
    car?:string
}>()
// 默认值没有显示   需要显式的选择开启
</script>

默认值没有显示 需要显示的选择开启

//vite.config.ts
export default defineConfig({
  plugins: [vue({
    reactivityTransform:true
  })],
})

defineEmits的TS写法

父组件

<template>
  <div>
    <h2>父组件</h2>
    <p>{{ money }}---{{ car }}</p>
    <MyCom :money="money" @changeMoney="change"></MyCom>
  </div>
</template>
<script setup lang="ts">
import MyCom from './components/MyCom.vue';
import {reactive,ref} from 'vue'
let money =ref(1000);
let car = ref("宝马")

const change = (v:number)=>{
  money.value -= v
}
</script>

子组件

<template>
    <div>
      <h2>子组件</h2>
      <p>{{ money }}====={{ car }}</p>
      <button @click="changeMoney">更改money</button>
    </div>
</template>
<script setup lang="ts">
// 3.上面的写法太笨拙， 使用响应式语法糖 解构 + defineProps
const {money,car = "麻喇沙蒂"} = defineProps<{
    money:number
    car?:string
}>()
// 默认值没有显示   需要显示的选择开启

// 子传父
// const emit = defineEmits(['changeMoney','changeCar'])

const emit = defineEmits<{
    (e:'changeMoney',money:number):void
    (e:'changeCar',car:string):void
}>()
const changeMoney=()=>{
  emit('changeMoney',10)
}
</script>

ref的TS写法

ref()会隐式的依据数据推导类型

1.简单数据类型

推荐使用类型推导

// const money =ref(10)
const money =ref<number>(10)

2.复杂数据类型

指定泛型

// 类型别名--单项类型
type Todo = {
  id:number
  name:string
  done:boolean
}
const list = ref<Todo[]>([])
/**
 * 复杂数据 --后台返回数据，默认值是空，无法进行类型推导
 [
  {id:1,name:"zs",done:true},
  {id:2,name:"ls",done:false}
 ]
 */

setTimeout(()=>{
  list.value =[
  {id:1,name:"zs",done:true},
  {id:2,name:"ls",done:false}
  ]
},1000)

reactive的TS写法

reactive()也会隐式的依据数据推导类型

1.默认值属性是固定的

推荐使用类型推断

// 默认值属性是固定的 --类型推断
const book =reactive({title:"vue3学习"})

2.根据默认值推导不出我们需要的类型

推荐使用接口或者类型别名给变量指定类型

type Book1 = {
  title:string
  year?:number
}

// 不推荐使用reactive()的泛型参数
const b:Book1 = reactive({title:"hello"})
b.year = 2023

computed和TS

1.computed() 会从计算函数的返回值上推导出类型

const count = ref(100)
const doubleCount = computed(()=>count.value *2)

2.可以通过泛型参数显式指定类型

const doubleMoney = computed<string>(()=>(count.value*2).toFixed(2))

事件处理与TS

<template>
  <div>
    <input type="text" @change="handleChange($event)">
  </div>
</template>
<script setup lang="ts">
// 参数"event"隐式具有"any"类型。
// @change="handleChange($event)" 查看$event类型
// 鼠标放到@change上 查看类型
  const handleChange = (event:Event)=>{
    // event.target 是 EventTarget | null 类型
    // console.log(event.target.value)
    // document.querySelector("input")  查看返回值类型
    console.log((event.target as HTMLInputElement).value)
    // event.target as HTMLInputElement  as限制event.target 的类型是HTMLInputElement
  }
</script>

Template Ref与TS

模板ref需要通过一个显式指定的泛型参数，默认值是null

<template>
  <div>
    <input type="text" ref="el">
    <p>123</p>
  </div>
</template>
<script setup lang="ts">
import {ref,onMounted} from 'vue'
const el = ref<HTMLInputElement |null>(null)
document.querySelector('p')

onMounted(()=>{
  // 严格的类型安全  ? 可选链
  // 组件被挂载前，ref的值都是初始的null
  // 也可能是v-if的行为将引用的元素卸载时会设置为null
  el.value?.focus()
})
</script>

非空断言

类型可能是null 或undefined的值

<template>
  <div>
    <input type="text" ref="input" value="abc">
  </div>
</template>
<script setup lang="ts">
import {ref,onMounted} from 'vue'

const inp = ref<HTMLInputElement | null>(null)

onMounted(()=>{
  // console.log(inp.value?.value)  可选链
  // 逻辑判断
  // if(inp.value){
  //   console.log(inp.value.value)
  //   inp.value.value = "123"
  // }

  // 一定要确定不为空  ---非空断言
  console.log(inp.value!.value)
  inp.value!.value = "123"
})
</script>

TypeScript类型声明文件

TS类型声明文件是什么

项目中安装的第三方库都是打包后的js代码，但是我们使用的时候却有对应的TS类型提示，为什么？

在第三方库中的js代码都有对应的TS类型声明文件

在ts中以 .d.ts为后缀的文件，我们称之为ts类型声明文件。它的作用是描述js模块内所有导出成员的类型信息

ts中有两种文件类型 .ts文件 .d.ts文件作用是什么?

• .ts文件
  • 既包含类型信息又可执行代码
  • 可以被编译为js文件，然后执行代码
  • 用途：编写程序代码的地方
• .d.ts文件
  • 只包含类型信息的类型声明文件
  • 不会生成.js文件，仅用于提供类型信息，在.d.ts文件中不允许出现可执行的代码，只用于提供类型
  • 用途： 为js提供类型信息

所以 .ts是代码实现文件 .d.ts是类型声明文件

内置类型声明文件

const arr =[1,2,3]   
//鼠标放在forEach上查看类型   ctrl +鼠标左键  进入 lib.es5.d.ts类型声明文件中
arr.forEach

第三方库类型声明文件

下载axios 查看类型声明文件 node_modules/axios/index.d.ts

自定义类型声明文件

• 创建types/data.d.ts
• 创建需要共享的类型，使用export导出
• 在需要使用共享类型.ts文件中，通过import 导入即可（.d.ts后缀可以省略）

src/types/data.d.ts

export type Person = {
    id:number
    name:string
    age:number
}

App.vue

import {Person} from './types/data'

const p:Person ={
  id:100,
  name:"Zs",
  age:19
}