TS 简易入门
<template> <div className="hello"> <li className="about">{{ints}}</li> <li>{{flo}}</li> <li>{{str}}</li> <li>{{tfOk}}</li> <li>{{xxx}}</li> <button @click.stop="tapfun(22)">按钮(.stop为截流)</button> </div> </template> <script lang="ts" setup> import { ref } from 'vue'; let ints = ref<number>(123); //整型 let flo = ref<number>(1.23); //小数 let str = ref<string>("文本"); //文本 let tfOk = ref<boolean>(true); //布尔 let xxx = ref<any>(null); //未知类型 //箭头涵 const tapfun = (intx : number) => { console.log("接收参数:", intx) let x : number = funAdd(ints.value, flo.value); //引用方法涵 let aaa : string = str.value + tfOk.value //测试正确 let bbb : number = ints.value + tfOk.value //测试错误 let ccc : boolean = ints.value + str.value //测试错误 console.log(aaa, bbb, ccc, x, str.value, tfOk.value) //打印结果 } //方法涵 function funAdd(x : number, y : number) { return x + y } //创建接口 也叫 结构体 interface user { name : string ints : number } let obj : user = { // 创建 结构体 对象 name: 'Linwute', ints: 999 } let objx = ref<user>({ // 创建 结构体 对象 name: 'Linwute', ints: 999 }) objx.value.ints = "aaa" //测试错误 obj.ints = "bbb" //测试错误 obj.name = "ccc" //测试正确 console.log(obj, objx.value) //打印结果 // 定义返回类型 function funSS(x : number) : string { //返回文本 return "1" + x } const funCC = (x : string) : number => {//返回整数 console.log(x) return 1 } console.log(funSS(1), funCC("CC")) //打印结果 </script>
451 Views