ts与组合式api

TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准（ES6 教程）。
TypeScript 由微软开发的自由和开源的编程语言。
TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

隐式推导

<template>
  <div>
    app = {{ state.myname }}
  </div>
</template>
<script setup lang="ts">
import {reactive} from 'vue'
const state=reactive({
  myname:"kerwin"

})</script>

显示推导

<template>
  <div>
    app = {{ state.myname }}
  </div>
</template>
<script setup lang="ts">
import {reactive ，ref} from 'vue'

interface IState {
  myname:string

}
const state:IState=reactive({
    myname:"kerwin"
})
import type {Ref} from 'vue'
const myname:Ref<string>=ref("kerwin")
const myname=ref<string>("kerwin")
</script>

ref操作原生dom

<template>
  <div>
    app = {{  }}
  </div>
  <div ref="mydiv">w s d v</div>
</template>
<script setup lang="ts">
import {reactive,ref,onMounted} from 'vue'
 const  mydiv=ref<HTMLDivElement>()
 onMounted(()=>{
 console.log(mydiv.value
 )})

计算属性

const myname=ref("kerwin")
const computedName=computed(()=>myname.value.substring(0,1).toUpperCase())

补充
类型断言（Type Assertion）
类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。

语法格式：<类型>值

或:值 as 类型
变量作用域
变量作用域指定了变量定义的位置。

程序中变量的可用性由变量作用域决定。

TypeScript 有以下几种作用域：

全局作用域 − 全局变量定义在程序结构的外部，它可以在你代码的任何位置使用。

类作用域 − 这个变量也可以称为 字段。类变量声明在一个类里头，但在类的方法外面。 该变量可以通过类的对象来访问。类变量也可以是静态的，静态的变量可以通过类名直接访问。

局部作用域 − 局部变量，局部变量只能在声明它的一个代码块（如：方法）中使用。