ts+vu3+setup+volar

最新推荐文章于 2024-10-05 01:22:45 发布

人间散章

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量894

点赞数 2

文章标签： vue.js 前端 typescript

本文链接：https://blog.csdn.net/qq_64750772/article/details/123644155

版权

本文介绍了如何使用TypeScript进行项目搭建，包括全局安装tsc，创建项目，以及在Vue中使用TypeScript定义接口和函数。通过示例展示了如何定义IUser接口和Step组件，强调了TypeScript在确保代码类型安全方面的作用。

摘要由CSDN通过智能技术生成

typed JavaScript at Any Scale 添加了类型系统的 JavaScript，适用于任何规模的项目这里就不过多介绍了直接步入正题！

首先安装TypeScript

npm install -g typescript

以上命令会在全局环境下安装 tsc命令，安装完成之后，我们就可以在任何地方执行 ts 命令了。

安装好ts后就开始创建项目

win+r 打开黑窗口

cd /切换到根目录

npm sreve 项目名

之后会弹出选项：

选完后就创建完成了

然后打开项目

接下来介绍ts里面的接口与函数

<template>

<div v-for="(item,index) in list" :key="index">{{item}}</div>
</template>
<script lang="ts" setup>
// 这里说一下js类型
// javascript 数据类型 ：number string boolean undefind null
// 引用类型 ：数组 对象 函数(function)
// 而ts类型：any(任意类型)  void(没有返回值)  interface(接口) 等...

//ts里面定义接口类型

//定义一个接口
import {reactive} from 'vue'

interface Iuser{
 name:string,
 age:number
}

const list = reactive<Iuser>({name:"mumu",age:18})

</script>

ts-step组件定义

创建一个组件

<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>() //定义一个props用来接收传过来的参数
const count = ref<number>(props.value);
function countChange(n:number):void{
    count.value+=props.step*n;
}
</script>

<template>
  <div class="about">
    <step :value="5" :max="20" :min="1" :step="2"></step>
  </div>
</template>

<script lang="ts" setup>
import step from '@/components/SetpCom.vue' //导入组件
</script>

结果：