ts入门必看

最新推荐文章于 2025-02-18 20:17:37 发布

Hu153155

最新推荐文章于 2025-02-18 20:17:37 发布

阅读量1.1k

点赞数 1

文章标签： typescript

本文链接：https://blog.youkuaiyun.com/Hu153155/article/details/123645504

版权

本文介绍了TypeScript，一个由微软开发的静态类型编程语言，用于增强JavaScript的功能。它适用于大型项目开发，提供强类型、遵循ES6的特性。文章详细讲解了如何创建和配置TypeScript项目，包括定义不同类型的变量如字符串、数字、布尔值和函数，以及如何在Vue组件中使用。同时，展示了如何设置props和接口，并在setup中获取props。

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

ts介绍
TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。
TypeScript 起源于使用JavaScript开发的大型项目。由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了TypeScript ，使得其能够胜任开发大型项目。
TypeScript 是一种静态类型的语言，特性有强类型，遵循ES6，编译器严谨的语法检查
ts常见的定义变量有4种变量
1.字符串
const str = ref(“abc”)
const str = ref(“abc”)
根据值类型自动判断改类型变量是什么
2.数字
const count = ref(10)
const count = ref(10)
3.布尔值
const flag = ref(true)
const flag = ref(true)
4.函数
function add(n1:string,n2:number):void{
}

第一步创建
黑窗口新建vue文件，创建的时候勾选typescript
第二步创建文件
在src里的component目录中创建StepCom.vue文件
第三步配置文件
在上一步创建的文件里

<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>

第四步引入
将上一步配置好的文件引入到需要的页面中

import step from '@/components/StepCom.vue'

第六步定义接口

interface Iuser = {
name:string,
age:number|string
}
const user = reactive<Iuser>({
    name:"mumu",
   age:18
})

第七步在setup中获取props

import{defineProps} from 'vue'
intervace Iprops = {min:number,max:number}
const props =defineProps<Iprops>()