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

您可能感兴趣的文章:

使用Bootstrap4 + Vue2实现分页查询的示例代码
本篇文章主要介绍了使用Bootstrap4 + Vue2实现分页查询的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
vue.js项目使用原生js实现移动端的轮播图
这篇文章主要为大家介绍了vue.js项目中使用原生js实现移动端的轮播图，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-04-04
一文详解Vue3的watch是如何实现监听的
watch这个API大家都很熟悉,今天这篇文章小编来带你搞清楚Vue3的watch是如何实现对响应式数据进行监听的,希望对大家有一定的帮助
2024-11-11
在Vue渲染模板时保留HTML注释的方法
在使用 Vue.js 进行开发时,模板中的 HTML 注释通常会被 Vue 的编译器自动移除,然而,在某些情况下,我们可能希望保留这些注释,例如为了调试、文档生成或其他特殊需求,本文将详细介绍如何在 Vue 渲染模板时保留 HTML 注释,并提供相关的代码示例,需要的朋友可以参考下
2025-03-03
Vue.js实现一个todo-list的上移下移删除功能
这篇文章主要介绍了Vue.js实现一个todo-list的上移下移删除功能,需要的朋友可以参考下
2017-06-06
vue实现打地鼠小游戏
这篇文章主要为大家详细介绍了vue实现打地鼠小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
使用vuetify实现全局v-alert消息通知的方法
使用强大的Vuetify开发前端页面,结果发现官方没有提供简便的全局消息通知组件,所以自己动手写了一个简单的组件,接下来通过本文给大家介绍使用vuetify实现全局v-alert消息通知的详细代码,感兴趣的朋友跟随小编一起看看吧
2024-02-02
idea编译器vue缩进报错问题场景分析
idea编译器出现Vue缩进报错，怎么解决呢，很多朋友遇到这个问题都很棘手，不知该如何解决，今天小编给大家通过场景分析介绍解决方案，需要的朋友参考下吧
2021-07-07
vue通信方式EventBus的实现代码详解
这篇文章主要介绍了vue通信方法EventBus的实现代码，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-06-06
vue3封装request请求的完整案例
本文提供了如何将Vue3的静态页面集成到基于Vue2的若依项目中,并确保能够访问Vue2的接口,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
2024-09-09