初识TS你需要知道哪些内容？

TS是什么

TS( TypeScript )是由微软推出的，是JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，运行的时候，ts 编译成javascript。

由于js本身是弱类型语言，所以天然不存在类型系统，而ts这种静态类型的语言，相比最大的优点是类型系统的引入，强类型，遵循ES6，编译器严谨的语法检查。

因此，像vue，react，angular，小程序等都推荐使用ts。

此外，ts默认文件后缀名为 .ts ，同样script标签内容也变为<script lang="ts" setup>

TS定义变量

ts必须指定数据类型，ts除了包括js有的类型(boolean、number、string、array、undefined、null)之外，还多出几种类型，有tuple类型（元组类型）、enum类型（枚举类型）、any类型（任意类型）、void类型（没有任何类型）、 never类型。

其中void类型和 never类型比较特别，void类型表示定义方法没有返回值； never类型：是其他类型（包括null和undefined）的子类型，代表从不会出现的值 这意味着声明never变量只能被never类型所赋值

定义字符串

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

const str = ref("abc")
//根据值类型自动判断改类型变量是什么

数字

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

布尔值

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

函数

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

接口

定义接口

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

TS实例

Home.vue代码块

<template>
  <div class="home">
    <h1>vue+ts+setup+volar</h1>
    <button @click="addCount(2)">{{count}}</button>
    <button>{{num}}</button>
    <button v-if="flag">{{str}}</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>
import step from "@/components/StepCom.vue"
// ts：any任意类型 void没有返回值 interface接口
// 声明变量
import { ref,reactive } from "vue"
const count = ref<number>(10);
const num = ref(5);
const str = ref<string>("i like ts")
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:"mumu",age:18,pet:"dog"})
</script>

StepCom.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 { ref,defineProps } 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>