[Vue3] 在Vite脚手架中配置typescript

作者：admin，发布日期：2021-09-01
阅读：1679；评论：0

这篇文章将带你从创建项目开始，在vite中配置typescript，同时配置eslint和prettier进行代码格式化和检查。

使用TypeScript的优点

TypeScript 增加了代码的可读性和可维护性，可以在编译阶段就发现大部分错误，同时增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等

TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发，代码开源于 GitHub 上。 

TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。

在Vite中创建vue-ts项目

可参考创建vue-js项目的过程：https://blog.craftyun.cn/post/226.html

在这篇文章中我们使用包管理器yarn来创建项目，首先打开powershell工具

在最新版本中，创建命令已经被简化，只需要写vite就可以直接创建，不需要旧版本冗长的名字

PS C:\Users\he\Desktop> yarn create vite
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed in 0s 756ms
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed
➤ YN0000: Done in 0s 987ms

√ Project name: ... ts-test # 输入项目名
√ Select a framework: » vue # 选择框架为vue
√ Select a variant: » vue-ts # 选中变种为vue-ts

Scaffolding project in C:\Users\he\Desktop\ts-test...

Done. Now run:

  cd ts-test
  yarn
  yarn dev

创建完成后，进入项目目录，开始安装依赖：

PS C:\Users\he\Desktop> cd .\ts-test\
PS C:\Users\he\Desktop\ts-test> dir


    目录: C:\Users\he\Desktop\ts-test


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----          2021/9/1     14:12                public
d-----          2021/9/1     14:12                src
-a----          2021/9/1     14:10             45 .gitignore
-a----          2021/9/1     14:10            337 index.html
-a----          2021/9/1     14:12            377 package.json
-a----          2021/9/1     14:10            805 README.md
-a----          2021/9/1     14:10            382 tsconfig.json
-a----          2021/9/1     14:10            156 vite.config.ts


PS C:\Users\he\Desktop\ts-test> yarn
➤ YN0000: ┌ Resolution step
➤ YN0032: │ fsevents@npm:2.3.2: Implicit dependencies on node-gyp are discouraged
➤ YN0032: │ fsevents@npm:2.3.2: Implicit dependencies on node-gyp are discouraged
➤ YN0000: └ Completed in 12s 825ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ wide-align@npm:1.1.3 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ with@npm:7.0.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ wrappy@npm:1.0.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yallist@npm:3.1.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yallist@npm:4.0.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed in 0s 767ms
➤ YN0000: ┌ Link step
➤ YN0062: │ fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=1cc4b2 The platform win32 is incompatible with this module, link skipped.
➤ YN0007: │ esbuild@npm:0.12.24 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 1s 480ms
➤ YN0000: Done with warnings in 15s 115ms

安装完成后，添加eslint以及prettier

yarn add -D eslint eslint-plugin-vue
yarn add -D prettier eslint-plugin-prettier eslint-config-prettier

然后我们继续安装typescript-eslint/typescript-eslint以支持ts的代码检查，这一步在实际测试中速度稍微有点慢，需要等待一会时间

yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

安装完成后，开始配置eslint，在配置中，我们会用到以下的文档，如有需要可以进行查看：

https://github.com/typescript-eslint/typescript-eslint/blob/HEAD/docs/getting-started/linting/README.md

https://eslint.vuejs.org/user-guide/#usage

https://github.com/prettier/eslint-plugin-prettier

在根目录中创建.eslintrc.js，写入以下内容：

module.exports = {
  env: {
    node: true,
  },
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
    sourceType: "module",
  },
  extends: [
    "eslint:recommended", //
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-essential",
    "plugin:prettier/recommended",
  ],
  globals: {
    defineProps: "readonly",
    defineEmits: "readonly",
    defineExpose: "readonly",
    withDefaults: "readonly",
  },
};

注：该文件中的注释"//"用于防止prettier换行

完成后，再创建.prettierrc.js，配置prettier，下面贴出我个人使用的配置：

module.exports = {
  endOfLine: "auto",
  printWidth: 120
};

测试TypeScript是否可用

我们可以在App.vue中写入具有ts特性的代码，然后运行测试，如果eslint没有报错则说明ts的规则有用

interface User {
  name: string;
}

let b: User = {
  name: "hello",
};

当然也可以输入下方命令启动开发服务器，然后打开相应的网页测试：

yarn dev

在vscode中使用vue-ts

官方推荐使用Volar插件来进行vue-ts的编码辅助，下面给出插件下载地址：

https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar

下载安装后，插件会自动识别tsconfig.json和jsconfig.json，而vue-ts项目创建后默认会创建tsconfig.json，所以无需多余配置就可以直接使用该插件进行代码提示以及其他的辅助编码，下面是默认的tsconfig.json的内容：

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

如果说我们的项目是使用js编写的，我们可以在根目录自己创建一个jsconfig.json，同时写入"{}"（空json对象），就可以开始使用该插件进行开发。