Vue3项目中配置TypeScript和JavaScript的兼容

更新时间：2023年08月12日 11:37:34 投稿：yin

在Vue3开发中,常见的使用JavaScript（JS）编写代码,但也会有调整编写语言使用TypeScript（TS）的需求,因此,在Vue3项目设置中兼容TS和JS是刻不容缓的重要任务,

一、安装TypeScript

首先，我们需要安装TypeScript。我们可以使用npm来进行安装。可以在控制台中使用以下命令:

npm install typescript --save

安装完成后，你可能需要验证是否已正确安装TypeScript。你可以使用命令tsc -v来检查TypeScript的版本，确保已安装成功。

二、创建tsconfig.json文件

创建tsconfig.json文件,它的作用是为TypeScript编译器提供编译选项. 在Vue3项目中，你可以使用以下命令进行创建:

npx tsc --init

运行此命令将在您的项目中创建一个名为 tsconfig.json 的文件。你可以在其中指定如下选项：

{
  "compilerOptions": {
    "target": "es5",   
    "module": "es6",  
    "allowJs": true, 
    "strict": true,   
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "moduleResolution": "node",   
    "sourceMap": true,         
    "outDir": "./dist", 
    "declaration": true,         
    "baseUrl": "./src",  
    "paths": {
      "@/*": ["./*"]
    },
    "typeRoots": [
      "./node_modules/@types",
      "./src/types"
    ],
    "experimentalDecorators": true
  },
  "include": [
    "./src/**/*.ts",
    "./src/**/*.d.ts",
    "./src/**/*.tsx",
    "./src/**/*.vue"
  ],
  "exclude": ["node_modules"]
}

让我们来看看其中一些重要的选项:

target: 指定目标环境。在Vue3项目中，你可以设置成ES5
module: 指定使用模块的规范，在Vue3项目中，你可以设置成ES6
allowJS: 允许TypeScript编译器编译JS文件
strict: 启用所有的严格类型检查
esModuleInterop: 允许使用ES模块的默认导出
resolveJsonModule: 允许导入JSON模块
moduleResolution: 设置模块解析方式
sourceMap: 生成代码映射文件
outDir: 设置编译结果输出目录
declaration: 生成声明文件（.d.ts）
baseUrl: 指定可以在源代码中使用的非相对路径的基本目录
paths: 映射模块名称以便在源代码中使用
typeRoots: 包含类型定义的目录路径列表
experimentalDecorators: 启用实验性装饰器支持

三、JS文件和TS文件共存配置

默认情况下，Vue CLI会忽略TypeScript（.ts或.tsx）文件，只会编译JavaScript（.js或.jsx）文件。因此，为了让Vue CLI识别TypeScript文件，我们需要像下面这样修改package.json:

"scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint",
      "dev": "vue-cli-service serve --mode development",
      "build-ts": "vue-cli-service build --target lib --name mylib src/main.ts",
      "build-js": "vue-cli-service build --target lib --name mylib src/main.js",
      "build-all": "npm run build-ts && npm run build-js"
    },
    "files": [
      "dist",
      "src"
    ],
    "main": "dist/mylib.umd.js",
    "types": "dist/mylib.d.ts",
    "exports": {
      ".": {
        "main": "./dist/mylib.umd.js",
        "types": "./dist/mylib.d.ts"
      }
    }

可以在src/main.js中添加对src/main.ts的引用，这样我们将可以使用两种文件格式创建Vue3应用。

四、TypeScript在Vue3中的使用

在Vue3开发中，组件的定义可以使用JavaScript或TypeScript。如果您使用TypeScript编写组件，您需要：

1. 设置组件的props、data、methods、和computed的类型

interface Props {
        msg: string
    }
    export default defineComponent({
      props: {
        msg: {
          type: String,
          required: true
        }
      },
      data() {
        return {
          count: 0
        }
      },
      methods: {
        increment() {
          this.count++
        }
      },
      computed: {
        doubleCount(): number {
          return this.count * 2
        }
      },
      render() {
        return h('div', [
          h('p', `Message: ${this.msg}`),
          h('p', `Double count: ${this.doubleCount}`),
          h('button', { onClick: this.increment }, 'Increment')
        ])
      }
    });

2. 指定Vue3中的生命周期方法

setup(props, context) {
        onMounted(() => {
            console.log('component is mounted')
        })
        onUnmounted(() => {
            console.log('component is unmounted')
        })
        return {}
    }

3. 引入第三方模块

import axios from 'axios'
    export default defineComponent({
      setup() {
        axios.post('/')
      }
    })

五、TypeScript在Vue3中的配置检查

在Vue3项目中，使用 TypeScript 能够帮助我们更好地避免在代码开发阶段出现bug，以上我们提到了tsconfig.json,file 但是这并不足够。有时，我们还需要使用插件或库，例如 eslint-plugin-typescript，对代码进行更彻底的检查，以保证代码质量和安全性。

1. 安装插件，执行以下命令：

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-vue

2. 配置.eslintrc文件

{
        "env": {
            "node": true,
            "es2021": true
        },
        "extends": [
            "plugin:vue/vue3-essential",
            "@vue/standard",
            "@vue/typescript/recommended"
        ],
        "parserOptions": {
            "ecmaVersion": 12,
            "parser": "@typescript-eslint/parser",
            "sourceType": "module"
        },
        "plugins": [
            "@typescript-eslint",
            "vue"
        ],
        "rules": {}
    }

在上面的代码中，我们同时使用了 typescript 和 vue 的插件来对代码进行修复和检查。下面是一些比较常用的规则：

no-unused-vars: Remove unused data
no-use-before-define: Disable using a variable or function before it is defined
@typescript-eslint/member-delimiter-style: Ensure member signatures are separated with semicolons
@typescript-eslint/no-empty-function: Disallow empty functions
@typescript-eslint/explicit-member-accessibility: Require explicit visibility declarations for class members

六、结束语

通过本文的介绍，你应该已经知道了如何在Vue3项目中配置JS和TS文件的兼容性。TypeScript作为 JavaScript的超集，可以为Vue3项目提供更加健壮的类型系统支持。当你面对更复杂的项目或团队协作时，TypeScript可以减少你和同事们因错误引用而导致的交互成本，提高配合效率。特别是在编写组件或者引入第三方组件库时，TypeScript具有更出色的类型支持，减少代码出错的风险。

到此这篇关于Vue3项目中配置TypeScript和JavaScript的兼容的文章就介绍到这了,更多相关Vue配置TypeScript和JavaScript内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue3+vite路由配置优化(自动化导入)
这篇文章主要介绍了Vue3+vite路由配置优化(自动化导入),需要的朋友可以参考下
2023-09-09
vue中如何自定义右键菜单详解
这篇文章主要给大家介绍了关于vue中如何自定义右键菜单的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
django中使用vue.js的要点总结
在本篇文章里小编给各位整理了关于django中使用vue.js需要注意的地方以及相关知识点，需要的朋友们跟着学习参考下。
2019-07-07
vue使用Font Awesome的方法步骤
这篇文章主要介绍了vue使用Font Awesome的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
vue+axios实现图片上传识别人脸的示例代码
本文主要介绍了vue+axios实现图片上传识别人脸，这里采用的是vant的文件上传组件，通过上传图片后端识别图片里的人脸，感兴趣的可以了解一下
2021-11-11
Vue封装通用table组件的完整步骤记录
对于一个中后台类的项目,一个比较常见的展示形式就是Table了,这篇文章主要给大家介绍了关于Vue封装通用table组件的相关资料,需要的朋友可以参考下
2021-07-07
基于vue开发的在线付费课程应用过程
这篇文章主要介绍了基于vue开发的在线付费课程应用过程，非常不错，具有参考借鉴价值,需要的朋友可以参考下
2018-01-01
vue router进行路由跳转并携带参数的实例详解(params/query)
在使用`router.push`进行路由跳转到另一个组件时，可以通过`params`或`query`来传递参数，这篇文章主要介绍了vue router进行路由跳转并携带参数（params/query）,需要的朋友可以参考下
2023-09-09
vue3+Element Plus实现自定义穿梭框的详细代码
找到一个好用的vue树形穿梭框组件都很难,又不想仅仅因为一个穿梭框在element-ui之外其他重量级插件,本文给大家分享vue3+Element Plus实现自定义穿梭框的示例代码,感兴趣的朋友一起看看吧
2024-01-01
vue中的计算属性的使用和vue实例的方法示例
本篇文章主要介绍了vue计算属性的使用和vue实例的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12