让人头大的typeScript简单攻略来喽

最新推荐文章于 2024-03-22 13:52:22 发布

Lin_heng

最新推荐文章于 2024-03-22 13:52:22 发布

阅读量165

点赞数

分类专栏： ts 文章标签： typescript

本文链接：https://blog.csdn.net/Lin_heng/article/details/123647885

版权

ts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了TypeScript作为强类型的JavaScript超集，如何在Vue框架中提升开发体验。文章通过实例展示了如何定义变量、接口和函数，以及在setup中使用defineProps获取props。同时，还演示了如何创建一个具有数字加减功能的组件，并提供了完整的代码示例。TypeScript在Vue组件开发中的优势在于提供严谨的语法提示和类型检查，降低了出错概率，提高了代码质量。

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

type script

简介

微软推出的静态类型的语言
特点：强类型、遵循ES6、编译器严谨的语法提示
难度从大到小：ts>ES6>javascript
运行：运行的时候,ts编译为js
vue、angular等众多公司推荐使用

定义变量

字符串

const str = ref<string>("abc")

const str = ref("abc")

根据值类型自动判断改类型变量是什么

数字

const count = ref<number>(10)
const count = ref(10)

布尔

const flag = ref<bollean>(true)
const flag = ref((true)

函数

function add(n1:string,n2:number):void{}

接口

定义接口

interface Iuser = {
name:string,
age:number|string
}

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

在setup中获取props

导入

import{defineProps} from 'vue'

interface Iprops = {min:number,max:number}

声明

const props = defineProps<Iprops>()

使用ts构建组件

数字加减

<template>
  <span>
      <button :disabled="count<=props.min" @click="countChange(-1)">-</button>
      <input type="text" v-model.number="count">
      <button :disabled="count>=props.max" @click="countChange(1)">+</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(props.value);
function countChange(n:number,val:number):void{
    count.value+=props.step*n;
}
</script>

效果：