0
点赞
收藏
分享

微信扫一扫

ts集成和使用


1、集成

进入到项目,执行下面的命令

vue add typescript

这里选择n,生成的组件就会和文档给的一样;y则组件是class类型

ts集成和使用_App


上面的程序运行完,typescript也就集成好啦!

2、使用

ts集成和使用_javascript_02

<template>
<div class="red">
{{name}}
<home/>
</div>
</template>


<script lang="ts">
import {defineComponents,toRefs,reactive} from "vue"
import home from "./components/home.vue";


// data数据的接口
interface User {
name: string;
age: number;
get(): string;
}

export default defineComponent({
name:"App",
components:{},

setup(){

// ref只能用第二种写法

// 实现接口的第一种方法 属性可增不可减
// let data: User = reactive({
// name: "张三",
// age: 12,
// get() {
// return this.name;
// },
// set(){}
// });


// 实现接口的第二种方法 属性不可增减
// let data = reactive<User>({
// name: "张三",
// age: 12,
// get() {
// return this.name;
// },
// });

// 实现接口的第三种方法 属性可增不可减
let data = reactive({
name: "张三",
age: 12,
get() {
return this.name;
},
set() {},
}) as User;

return {
...toRefs(data),
};
}
})
</script>

<style lang="scss">
</style>


举报

相关推荐

0 条评论