# 使用 Typescript

WARNING

确保你的 Nuxt 为 2.10 或更高级的版本

# 安装

yarn add --dev @nuxt/typescript-build
# 或者
npm install --save-dev @nuxt/typescript-build

1
2
3

# 配置

将@nuxt/typescript-build添加到nuxt.config.js 的buildModules中

// nuxt.config.js
export default {
  buildModules: ["@nuxt/typescript-build"],
};

1
2
3
4

并在根目录创建一个tsconfig.json文件，写入以下默认配置。

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext", // 或者"es2018", 如果要使用ts3.7的新特性 ?. 和 ??
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["esnext", "esnext.asynciterable", "dom"],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    },
    "types": ["@types/node", "@nuxt/types"]
  },
  "exclude": ["node_modules"]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 运行时（可选）

非 Webpack 编译的文件（例如nuxt.config、modules、serverMiddlewares）使用 typescript，需要额外的@nuxt/typescript-runtime。

# 安装

yarn add @nuxt/typescript-runtime
# 或者
npm install @nuxt/typescript-runtime

1
2
3

# 配置

更新package.json文件，使用nuxt-ts运行。

"scripts": {
  "dev": "nuxt-ts",
  "build": "nuxt-ts build",
  "generate": "nuxt-ts generate",
  "start": "nuxt-ts start"
},
"dependencies": {
  "@nuxt/typescript-runtime": "latest",
  "nuxt": "latest"
},
"devDependencies": {
  "@nuxt/typescript-build": "latest"
}

1
2
3
4
5
6
7
8
9
10
11
12
13

TIP

现在可以将nuxt.config.js改为nuxt.config.ts。

# ESLint（可选）

如果你使用 ESLint 整理你的项目，可以通过以下方法使 ESLint 整理你的 typescript 文件。只需安装@nuxtjs/eslint-config-typescript。

# 安装

yarn add -D @nuxtjs/eslint-config-typescript
# 或者
npm i -D @nuxtjs/eslint-config-typescript

1
2
3

WARNING

如果你在使用@nuxtjs/eslint-confi，请在依赖中删除它，因为 Nuxt TypeScript ESLint 配置将包括它。

# 配置

然后创建或编辑项目根目录下的.eslintrc.js来配置@nuxtjs/eslint-config-typescript。

module.exports = {
  parserOptions: {
    // parser: 'babel-eslint'
  },
  extends: [
    // '@nuxtjs'
    "@nuxtjs/eslint-config-typescript",
  ],
};

1
2
3
4
5
6
7
8
9

最后，编辑package.json文件的scripts的lint。

{
  "scripts": {
    "lint": "eslint --ext .ts,.js,.vue ."
  }
}

1
2
3
4
5

如果想每次文件保存后，自动检查代码，请打开typeCheck模块选项。

// nuxt.config.js
export default {
  typescript: {
    typeCheck: {
      eslint: true,
    },
  },
};

1
2
3
4
5
6
7
8

← SplitChunkPlugin Typescript 改造 →