ts(typescript)
TypeScript 是 JavaScript 的强类型版本,最终在浏览器中运行的仍然是 JavaScript,所以 TypeScript 并不依赖于浏览器的支持,也并不会带来兼容性问题。
TypeScript 这种强类型语言最大的优势在于静态类型检查:
1、强类型
2、遵循ES6
3、编译器严谨的语法检查
基本数据类型
布尔值
let isDone: boolean = false;
数字
let amount: number = 6;
字符串
const str =ref<string>(“abc")
const str = ref("abc")
根据值类型自动判断改变类型变量是什么
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.`;
数组
第一种,可以在元素类型后面接上[]
,表示由此类型元素组成的一个数组:
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<Iuser>({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:
运行结果: