目录
字符串
数字
布尔值
函数
接口
在setup中获取props
四、实现简单组件 步进器
一、什么是ts?
ts即TypeScript是微软开发的一个开源的编程语言,通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码,可运行在任何浏览器,任何操作系统。
二、ts特点
- typescript>es6>javascript
- 运行的时候,ts编译成JavaScript
- 静态类型的语言:强类型、遵循es6、编译器严谨的语法检查
- vue,react,angular,小程序都推荐使用ts
- 默认文件后缀名.ts
三、定义变量
<script lang="ts" setup>
字符串
const str1 = ref<string>("i love ts");
const str2=ref("abc")
//根据值类型自动判断类型变量是什么
数字
const num1 = ref<number>(10);
const num2 = ref(5);
布尔值
const flag1 = ref<number>(true)
const flag2 = ref(true)
函数
function add(n1:number,n2:number):void{}
接口
//定义接口
interface Iuser={
name:string,
age:number|string
}
const list = reactive<Iuser>({
name: "mewow",
age: 18,
});
在setup中获取props
import { defineProps} from "vue";
interface Iprops {
max: number;
min: number;
step: number;
value: number;
}
const props = defineProps<Iprops>();
四、实现简单组件 步进器
<!--StepCom.vue-->
<template>
<span>
<button @click="countChange(-1)" :disabled="count <= props.min">-</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>
<!--HelloView.vue-->
<step :value="5" :max="20" :min="1" :step="1"></step>
//ts部分
import step from "@/components/StepCom.vue";