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:numbercar?: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:numbercar?: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:numbername:stringdone: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:stringyear?: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的行为将引用的元素卸载时会设置为nullel.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:numbername:stringage:number
}

App.vue

import {Person} from './types/data'const p:Person ={id:100,name:"Zs",age:19
}