支持 TypeScript

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

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

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

快速开始

为了能够在项目中使用TypeScript,您需要将@nuxt/typescriptts-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.tsserverMiddlewares开启了运行时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'
  2. const config: NuxtConfiguration = {
  3. // Type or Press `Ctrl + Space` for autocompletion
  4. }
  5. export default config

组件

在组件中,我们强烈建议使用依赖于vue-class-componentvue-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>
  8. <script lang="ts">
  9. import { Component, Vue, Prop } from 'vue-property-decorator'
  10. import Post from '~/models/Post'
  11. @Component
  12. export default class PostPreview extends Vue {
  13. @Prop({ type: Object, required: true }) post!: Post
  14. }
  15. </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>
  7. <script lang="ts">
  8. import axios from 'axios'
  9. import { Component, Vue } from 'vue-property-decorator'
  10. import Post from '~/models/Post'
  11. @Component({
  12. components: {
  13. PostPreview: () => import('~/components/PostPreview.vue')
  14. },
  15. async asyncData () {
  16. let { data } = await axios.get(`https://my-api/posts`)
  17. return {
  18. posts: data
  19. }
  20. }
  21. })
  22. export default class FeedPage extends Vue {
  23. posts: Post[] = []
  24. }
  25. </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.jsonlint脚本:

  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文件的代码风格错误或其他不规范。

如何提交问题或文档贡献? 在 GitHub 编辑此页面!