v-model父子组件双向绑定

update: 固定写法 冒号后面的变量是父组件中v-model:后面的值

父组件

<template>
  <TsyIndex v-model:x="x"></TsyIndex>
</template>
<script setup lang="ts">
    import TsyIndex from"@/views/TsyIndex.vue"
    import {Ref,ref} from "vue"
    let x:Ref<number>=ref(10)
</script>

子组件

<template>
 <div>{{ x }}</div>
 <button @click="add" >+++</button>
</template>
<script lang="ts" setup>

defineProps({
  x:{
    type:Number
  }
})

const emit = defineEmits<{
  //update: 固定写法 冒号后面的变量是父组件中v-model:后面的值
  (event:'update:x',n:number):void
}>()
const add=()=>{
  // emit(上面event的值，修改的值)
  emit('update:x',40)
}
</script>

将一个文件转为全局文件

![DZIFAEZG2VN)V@9Y)37Q(]N.png](p6-juejin.byteimg.com/tos-cn-i-k3…?) vue组件

<script lang="ts" setup>
let asd:Tsy;
asd={
  name:'tsy',
  age:14
}

</script>

ts文件中的Tsy接口，在types文件夹中

interface Tsy{
  name:string,
  age:number
}

这么转换成全局文件,在tsconfig.json中修改

"include": [
    "types/**/*.d.ts",
  ],

Teleport传送门

to: 类名选择器 id选择器

<Teleport to='#app'>
    <!-- 将标签里的内容传送到指定dom元素内部末尾 -->
    <p>传送门</p>
 </Teleport>

类型增强 declare

全局变量
var tsy='tsy'
//在全局ts文件中
declare  var tsy:string;

针对第三方库的ts声明类型

场景引入的第三方库不是ts写的

// declare function 声明全局方法
// declare class 声明全局类
// declare enum 声明全局枚举类型
// declare namespace 声明全局对象
// interface 和 type 声明全局类型

或者借助插件
npm i --save-dev @type/库名
如
npm i --save-dev @type/jquery