初试ts+vue3+setup+volar，第1天学习笔记

目录

一、什么是ts？

二、ts特点

三、定义变量

        字符串

        数字

        布尔值

        函数

        接口

        在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";