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>