ts(typescript)+setup+volar+vue3

提示：在js上手容易，到后面熟用之后，可能会出现问题，js不轻易报错，比较不拘小节的语言，不像C、C++、java等语言，有类型，但是变量的类型是不定的，可以改变，有可能变量是要数字相加但是里面有一个字符串变成拼接，这种变量不检查造成运算错误比较常见，而且函数的参数也是不检查的，传入的类型编写代码时可能要求是数字类型，但后面使用可能会出现传入字符串，比较不好。编写代码后维护起来不方便。没有块级作用域等等一些问题，就有了typescript。

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.基本数据类型

布尔值

  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>

在step中获取Props:

运行结果：