typescript是基于JavaScript的（JavaScript构建出来的），在它上面拓展出来的，在它基础上新增加其他类型，也有了类型的束缚，而且支持js，因为是从js拓展的，有es的特性和支持es不具有的特性（算是一种扩展吧），还兼容js平台，但是不能直接运行.ts文件（说到这里，我想到了之前学习小程序和小程序框架uniapp过程中老师用的scss和less直接编写然后通过vscode的插件转化成wxss和uniapp对应的一个loader转换成的），ts也是要转化成js才能运行（老师视频中说的ts不能被js解析器执行），ts增加了一些束缚，不过有配置选项可以修改是否严格或者宽松一点，可以选择编译成哪个es版本的js，可以做到兼容ie浏览器。TypeScript 是 JavaScript 的强类型版本，最终在浏览器中运行的仍然是 JavaScript，所以 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。
TypeScript 这种强类型语言最大的优势在于静态类型检查：
1、强类型
2、遵循ES6
3、编译器严谨的语法检查
1.基本数据类型
1.布尔值
let isDone: boolean = false;
2.数字
let amount: number = 6;
3.字符串
const str =ref<string>(“abc")
const str = ref("abc")
4.根据值类型自动判断改变类型变量是什么
let nickname: string = Gene;
let age: number = 37;
let sentence: string = `Hello, my nickname is ${ nickname }.
I’ll be ${ age + 1 } years old next month.`;
5.数组
第一种，可以在元素类型后面接上[]，表示由此类型元素组成的一个数组：
let list: number[] = [1, 2, 3];
第二种方式是使用数组泛型，Array<元素类型>
let list: Array<number> = [1, 2, 3];
对象
let foo: Object = {
name: ‘Jack’,
age: 18
}
Any
有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型,那么我们可以使用 any类型来标记这些变量.any表示任意类型
Void
void类型像是与any类型相反，它表示没有任何类型。
函数
function add(n1:string,n2:number):void{}
接口
定义接口：
//声明一个接口
interface Iuser{
name:string,
age:number,
pet:undefined|string
}
const list = reactive({name:“cong”,age:18,pet:“cat”})
现在我们来点通过一个实例，来深入来了解一下。
新建组件Stepcome.vue:
<template>
<span>
<button :disabled="count<=props.min" @click="countChange(-1)">-</button>
<input type="text" v-model.number="count">
<button @click="countChange(1)" :disabled="count>=props.max">+</button>
</span>
</template>
<script lang="ts" setup>
import {defineProps,ref} from "vue";
interface Iprops{
max:number,
min:number,
step:number,
value:number,
}
const props = defineProps<Iprops>()
const count = ref<number>(props.value);
function countChange(n:number):void{
count.value+=props.step*n;
}
</script>
<template>
<div class="home">
<h1>vue+ts+setup+volar</h1>
<button @click="addCount(2)">{
{count}}</button>
<div v-for="(item,index) in list" :key="index">{
{item}}</div>
<step :value="5" :max="20" :min="1" :step="2"></step>
</div>
</template>
<script lang="ts" setup>
//js数据类型 number string boolean underfind null
// 引用类型： 数组 对象
//ts: any：任意类型 viod:无返回值 interfase接口
import {ref,reactive} from "vue"
import step from "@/components/StepCom.vue"
const count = ref<number>(10);
// const num = ref(5);
// const str = ref<string>("i love your")
// const flag = ref<boolean>(true)
//定义函数
function addCount(n:number):void{
count.value+=n;
}
//声明一个接口
interface Iuser{
name:string,
age:number,
pet:undefined|string
}
const list = reactive<Iuser>({name:"cong",age:18,pet:"cat"})
</script>