• 支持 TypeScript
    • 快速开始
    • 从 JavaScript 到 TypeScript
      • 配置文件
      • 组件
    • 使用ESLint

    支持 TypeScript

    静态类型系统有助于防止许多潜在的运行时错误，尤其是在应用程序不断增长时。

    这就是为什么Nuxt的全新 nuxt-ts 软件包提供了内置的 TypeScript 工具支持：

    • Nuxt官方类型声明
    • IDE 中的自动补全功能
    • 以TypeScript方式编写所有内容 (layouts, pages, components, plugins, store)
    • 支持TS编译 (nuxt.config.ts, modules, serverMiddlewares)
    • 支持TSX

    快速开始

    为了能够在项目中使用TypeScript，您需要将@nuxt/typescript和ts-node作为开发依赖项安装：

    1. npm i -D @nuxt/typescript
    2. npm i ts-node
    3. # OR
    4. yarn add -D @nuxt/typescript
    5. yarn add ts-node

    @nuxt/typescript提供了在单独的进程来编译TypeScript文件和检查类型所需的typescript相关依赖项。

    ts-node扩展了Nuxt核心，为nuxt.config.ts和serverMiddlewares开启了运行时TypeScript支持。

    您还需要通过代码编辑器或命令行在根项目文件夹中创建一个空的tsconfig.json文件：

    1. touch tsconfig.json

    提示： tsconfig.json文件将在您第一次运行nuxt命令时使用默认值自动更新。

    从 JavaScript 到 TypeScript

    配置文件

    为了能够在配置文件中使用TypeScript，您只需要将nuxt.config.js重命名为nuxt.config.ts。

    Nuxt.js还带有提供自动补全和类型检查的类型定义：

    1. import NuxtConfiguration from '@nuxt/config'
    3. const config: NuxtConfiguration = {
    4.   // Type or Press `Ctrl + Space` for autocompletion
    5. }
    7. export default config

    组件

    在组件中，我们强烈建议使用依赖于vue-class-component的vue-property-decorator。

    以下是可复用组件用来显示使用Nuxt中 asyncData获取的数据展示在页面中的基本示例。

    1. /* models/Post.ts */
    2. export default interface Post {
    3.   id: number
    4.   title: string
    5.   description: string
    6. }
    1. <!-- components/PostPreview.vue -->
    2. <template>
    3.   <div>
    4.     <h2>{{ post.title }}</h2>
    5.     <p>{{ post.description }}</p>
    6.   </div>
    7. </template>
    9. <script lang="ts">
    10. import { Component, Vue, Prop } from 'vue-property-decorator'
    11. import Post from '~/models/Post'
    13. @Component
    14. export default class PostPreview extends Vue {
    15.   @Prop({ type: Object, required: true }) post!: Post
    16. }
    17. </script>
    1. <!-- pages/feed.vue -->
    2. <template>
    3.   <div>
    4.     <PostPreview v-for="post in posts" :key="post.id" :post="post" />
    5.   </div>
    6. </template>
    8. <script lang="ts">
    9. import axios from 'axios'
    10. import { Component, Vue } from 'vue-property-decorator'
    11. import Post from '~/models/Post'
    13. @Component({
    14.   components: {
    15.     PostPreview: () => import('~/components/PostPreview.vue')
    16.   },
    17.   async asyncData () {
    18.     let { data } = await axios.get(`https://my-api/posts`)
    19.     return {
    20.       posts: data
    21.     }
    22.   }
    23. })
    24. export default class FeedPage extends Vue {
    25.   posts: Post[] = []
    26. }
    27. </script>

    您可以对布局组件(layouts)使用完全相同的逻辑。

    使用ESLint

    If you're using ESLint to lint your project, here is how you can make ESLint lint your TypeScript files.如果您正在使用ESLint来对项目进行代码规范检查，那么您可以使用以下方法将ESLint添加进来：

    重点： 我们假设您已经在项目中设置了nuxt/eslint-config。

    首先，您需要安装typescript-eslint插件：

    1. npm install -D @typescript-eslint/eslint-plugin
    2. # OR
    3. yarn add -D @typescript-eslint/eslint-plugin

    然后，通过添加@typescript-eslint插件并使@typescript-eslint/parser作为默认解析器来编辑ESLint配置(.eslintrc.js)。

    最轻量化配置应如下所示：

    1. module.exports = {
    2.   plugins: ['@typescript-eslint'],
    3.   parserOptions: {
    4.     parser: '@typescript-eslint/parser'
    5.   },
    6.   extends: [
    7.     '@nuxtjs'
    8.   ],
    9.   rules: {
    10.     '@typescript-eslint/no-unused-vars': 'error'
    11.   }
    12. }

    最后，添加或编辑package.json的lint脚本：

    1. "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore ."

    —ignore-path option is useful to prevent ESLint linting files/folders like node_modules, .nuxt or whatever you don't want it to lint.

    —ignore-path选项对于忽略某些不想被检查的文件或文件夹(例如node_modules，.nuxt或任何您不希望它被检查的文件或者文件夹)非常有用。

    您现在可以通过运行npm run lint (或者 yarn lint)来检查您的TypeScript文件的代码风格错误或其他不规范。