vue
搭配 TypeScript 使用 Vue
TypeScript怎么写呢
下面展示高亮的 代码片
.
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import HelloWorld from './components/HelloWorld.vue';
// 使用 decorators 语法糖来标记类作为一个 Vue 组件
@Component({ components: { HelloWorld } })
export default class App extends Vue {
// 此处可以定义数据属性、计算属性、方法、生命周期钩子等
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
这个代码实例展示了如何在 Vue 应用程序中结合使用 TypeScript 和 Vue 类装饰器。它定义了一个简单的 Vue 应用,其中包含了一个组件 HelloWorld,并且使用 TypeScript 编写了应用的主组件。通过 @Component 装饰器,我们可以声明组件的选项,如模板、样式和子组件。这是一个典型的 Vue + TypeScript 开发模式,对于学习这些技术的开发者有很好的参考价值。
在单文件组件中的用法
要在单文件组件中使用 TypeScript,需要在<script>
标签上加上 lang=“ts” 的 attribute。当 lang=“ts” 存在时,所有的模板内表达式都将享受到更严格的类型检查。
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
data() {
return {
count: 1
}
}
})
</script>
<template>
<!-- 启用了类型检查和自动补全 -->
{{ count.toFixed(2) }}
</template>
lang=“ts” 也可以用于 <script setup>
:
<script setup lang="ts">
// 启用了 TypeScript
import { ref } from 'vue'
const count = ref(1)
</script>
<template>
<!-- 启用了类型检查和自动补全 -->
{{ count.toFixed(2) }}
</template>
模板中的 TypeScript
在使用了 <script lang="ts">
或 <script setup lang="ts">
后,<template>
在绑定表达式中也支持 TypeScript。这对需要在模板表达式中执行类型转换的情况下非常有用。
这里有一个假想的例子
<script setup lang="ts">
let x: string | number = 1
</script>
<template>
<!-- 出错,因为 x 可能是字符串 -->
{{ x.toFixed(2) }}
</template>
可以使用内联类型强制转换解决此问题
<script setup lang="ts">
let x: string | number = 1
</script>
<template>
{{ (x as number).toFixed(2) }}
</template>