| Vue3中集成并使用TypeScript | 您所在的位置：网站首页 › vue项目引入ts › Vue3中集成并使用TypeScript |
|
一、安装
创建vue项目
vue create vue-test-demo
复制代码
进入项目
cd vue-ts-demo
复制代码
新增typescript
vue add typescript
复制代码
跳过class语法
二、如何让组件能够使用TS语法？
script标签的lang属性设置为ts。
复制代码
从vue中导入defineComponent
import { defineComponent } from 'vue';
复制代码
组件对外暴露时需要通过defineComponent进行包裹。
export default defineComponent({
name: 'App',
components: {
Home
}
});
复制代码
三、Vue中使用TS语法实例
定义接口并实现接口。 import {defineComponent} from 'vue' interface News{ title: string, description: string, count: number, content?: string } let newsData: News= { title: "这是一个新闻", description: "这是新闻的描述", count: 12 } export default defineComponent({ data() { return newsData }, methods: { setTitle(): void{ this.title = '123'; } } }); 复制代码 四、组合式API中使用TS下文首先介绍reactive的使用注意事项。 第一种实现方式（参数） interface User { username: string; age: number; } setup() { let user: User = reactive({ username: "张三", age: 20, }); function setUsername(username: string) { user.username = username; } return { ...toRefs(user), setUsername }; } 复制代码 第二种实现方式（泛型） setup() { let user = reactive({ username: "张三", age: 20, }); function setUsername(username: string) { user.username = username; } return { ...toRefs(user), setUsername }; } 复制代码 第三种实现方式（通过as） let user = reactive({ username: "张三", age: 20, }) as User; 复制代码下面介绍下ref的注意事项。 ref不支持直接指定类型。下面的是错误的形式。 let num: string = ref('666'); 复制代码 ref支持泛型。 let num = ref('666'); 复制代码 |
| CopyRight 2018-2019 实验室设备网 版权所有 |