网站建设 手机和pc,江苏网站建设南通,百度论坛首页,大连建设工程交易中心目录 TypeScript应用defineProps的TS写法defineEmits的TS写法ref的TS写法1.简单数据类型2.复杂数据类型 reactive的TS写法1.默认值属性是固定的2.根据默认值推导不出我们需要的类型 computed和TS事件处理与TSTemplate Ref与TS非空断言TypeScript类型声明文件TS类型声明文件是什… 目录 TypeScript应用defineProps的TS写法defineEmits的TS写法ref的TS写法1.简单数据类型2.复杂数据类型 reactive的TS写法1.默认值属性是固定的2.根据默认值推导不出我们需要的类型 computed和TS事件处理与TSTemplate Ref与TS非空断言TypeScript类型声明文件TS类型声明文件是什么内置类型声明文件第三方库类型声明文件自定义类型声明文件 TypeScript应用
vue项目中使用tsscript加上 lang”ts“ 才能写ts代码
script setup langts/scriptdefineProps的TS写法
父组件
templatedivh2父组件/h2p{{ money }}---{{ car }}/pMyCom :moneymoney /MyCom/div
/templatescript setup langts
import MyCom from ./components/MyCom.vue;
import {reactive,ref} from vue
let money ref(1000);
let car ref(宝马)
/script子组件
templatedivh2子组件/h2p{{ money }}{{ car }}/p/div
/template
script setup langts
// 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写法
父组件
templatedivh2父组件/h2p{{ money }}---{{ car }}/pMyCom :moneymoney changeMoneychange/MyCom/div
/template
script setup langts
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子组件
templatedivh2子组件/h2p{{ money }}{{ car }}/pbutton clickchangeMoney更改money/button/div
/template
script setup langts
// 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)
}
/scriptref的TS写法
ref()会隐式的依据数据推导类型
1.简单数据类型
推荐使用类型推导
// const money ref(10)
const money refnumber(10)2.复杂数据类型
指定泛型
// 类型别名--单项类型
type Todo {id:numbername:stringdone:boolean
}
const list refTodo[]([])
/*** 复杂数据 --后台返回数据默认值是空无法进行类型推导[{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 2023computed和TS
1.computed() 会从计算函数的返回值上推导出类型
const count ref(100)
const doubleCount computed(()count.value *2)2.可以通过泛型参数显式指定类型
const doubleMoney computedstring(()(count.value*2).toFixed(2))事件处理与TS
templatedivinput typetext changehandleChange($event)/div
/template
script setup langts
// 参数“event”隐式具有“any”类型。
// changehandleChange($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}
/scriptTemplate Ref与TS
模板ref需要通过一个显式指定的泛型参数默认值是null
templatedivinput typetext refelp123/p/div
/template
script setup langts
import {ref,onMounted} from vue
const el refHTMLInputElement |null(null)
document.querySelector(p)onMounted((){// 严格的类型安全 ? 可选链// 组件被挂载前ref的值都是初始的null// 也可能是v-if的行为将引用的元素卸载时会设置为nullel.value?.focus()
})
/script非空断言
类型可能是null 或undefined的值
templatedivinput typetext refinput valueabc/div
/template
script setup langts
import {ref,onMounted} from vueconst inp refHTMLInputElement | 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
})
/scriptTypeScript类型声明文件
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/dataconst p:Person {id:100,name:Zs,age:19
}
