Nuxt + Typescript最佳实践2：使用ClassAPI语法

TypeScript的优势就是类型检查和良好的代码提示，使用TypeScript编程主要是利用这一点，vue提供了基于TypeScript的ClassAPI语法，一起来看看。

改写.vue文件

为了支持TypeScript ClassAPI风格写法，我们需要引入

• vue-property-decorator
  安装

yarn add vue-property-decorator

一个典型的vue文件写法是：

如果要改写成ClassAPI风格写法就是

这其中只有

Class API风格介绍

vue 组件现在有几种风格的写法

• 默认写法，也就是基于ES6单文件写法。
• Composition API风格写法，vue3新加入的。
• Class API风格写法，TypeScript独有。

当然TypeScript都支持这三种，这里只介绍Class API风格写法。这种写法比较贴近TypeScript的语法特征，能最大化利用TypeScript的语言优势，包括类，装饰器，Inject/Eject， getter/setter的理念。

下面是一个例子

以上是最简单的写法，更多写法可以参考 https://github.com/kaorun343/vue-property-decorator#readme

如何使用SSR独有的API

nuxt给vue页面添加了独有api，诸如asycData, fetch , middleware, 官方只给了普通模式的写法，没有给出ClassAPI风格写法，那么该怎么写？

• 答案：直接写在 @Component里面即可。

import {Component, Prop, Vue} from 'vue-property-decorator';
@Component({
    // 写在这里
    middleware: 'auth',   // 中间件
    key: '',
    layout: '',
    components: {},
    head() {
        //使用 head 方法设置当前页面的头部标签。
       return {
          title: this.title,
          meta: [
            { hid: 'description', name: 'description', content: 'My custom description' }
          ]
        }
    }
    async asyncData() {
        return {};
    }
}
export default class extends Vue {
     // 省略
}

具体API请参考：api

nuxt提供的函数调用时不在vue组件的生命周期里面，我们没法使用组件this对象，不过nuxt给我们提供了app上下文对象，具体参考：context

 async asyncData(app) {
       // app 包含了很多对象信息
        return {};
 }

其他的.ts文件改写

在我们的项目里除了server/index.js 和 nuxt.config.js 我们都可以改写成ts文件，这样可以统一管理.
比如官方提供的middleware中间件改写方案:

import { Middleware } from '@nuxt/types'

const myMiddleware: Middleware = (context) => {
  // 使用 context
}

export default myMiddleware