ts(typescript)、setup、volar、vue3

最新推荐文章于 2025-05-07 10:11:07 发布

稳重聪头

最新推荐文章于 2025-05-07 10:11:07 发布

阅读量698

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端框架

本文链接：https://blog.csdn.net/nnjjn/article/details/123647484

TypeScript是JavaScript的强类型版本，提供静态类型检查和严谨的语法。在Vue3中，它可以增强开发体验。文章介绍了ts的基本数据类型，如布尔值、数字、字符串、数组、对象、Any、Void以及函数和接口的概念。通过实例展示了如何在Vue组件中使用TypeScript进行Props的定义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ts(typescript)

ts是什么

TypeScript 是 JavaScript 的强类型版本，最终在浏览器中运行的仍然是 JavaScript，所以 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。

TypeScript 这种强类型语言最大的优势在于静态类型检查：

强类型
遵循ES6
编译器严谨的语法检查

基本数据类型

布尔值

  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: