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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue如何使用CSS自定义变量
这篇文章主要介绍了Vue如何使用CSS自定义变量，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-05-05
vue.js如何在网页中实现一个金属抛光质感的按钮
这篇文章主要给大家介绍了关于vue.js如何在网页中实现一个金属抛光质感的按钮的相关资料,文中给出了详细的实例代码以及图文将实现的方法介绍的非常详细,需要的朋友可以参考下
2023-04-04
Vue组件开发初探
本篇文章主要介绍了Vue组件开发初探，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
vue组件中props与data的结合使用方式
这篇文章主要介绍了vue组件中props与data的结合使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue3+elementPlus二次封装表单的实现代码
最近使用Vue3+ElementPlus开发项目，从整体上构思组件的封装。能写成组件的内容都进行封装，方便多个地方使用，这篇文章给大家介绍了vue3+elementPlus二次封装表单的实现，并通过代码介绍的非常详细,需要的朋友可以参考下
2024-03-03
vue如何实现接口统一管理
这篇文章主要介绍了vue如何实现接口统一管理，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue结合Video.js播放m3u8视频流的方法示例
本篇文章主要介绍了Vue+Video.js播放m3u8视频流的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
vue.js-div滚动条隐藏但有滚动效果的实现方法
下面小编就为大家分享一篇vue.js-div滚动条隐藏但有滚动效果的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Vue获取DOM的几种方法总结
这篇文章主要介绍了Vue获取DOM的几种方法总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue项目实战之圆柱状水波效果实现
最近工作中实现的一个效果不错,分享给大家,下面这篇文章主要给大家介绍了关于vue项目实战之圆柱状水波效果实现的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-12-12