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

您可能感兴趣的文章:

vue2.0安装style/css loader的方法
下面小编就为大家分享一篇vue2.0安装style/css loader的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
TypeScript中集成Tween.js踩坑记录
这篇文章主要介绍了TypeScript中集成Tween.js踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue+F2生成折线图的方法
这篇文章主要为大家详细介绍了vue+F2生成折线图的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
基于vue.js实现侧边菜单栏
这篇文章主要为大家详细介绍了基于vue.js实现侧边菜单栏的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
vue cli3.0 引入eslint 结合vscode使用
这篇文章主要介绍了vue cli3.0 引入eslint 结合vscode使用，本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-05-05
vue实现富文本编辑器详细过程
Vue富文本的实现可以使用一些现成的第三方库,如Quill、Vue-quill-editor、wangEditor等,这篇文章主要给大家介绍了关于vue实现富文本编辑器的相关资料,需要的朋友可以参考下
2024-01-01
element-table如何实现自定义表格排序
这篇文章主要介绍了element-table如何实现自定义表格排序，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
Vue3的ts报错:类型"{}"上不存在属性"xxx"的两种彻底根治解决方法
这篇文章主要给大家介绍了关于Vue3的ts报错:类型"{}"上不存在属性"xxx"的两种彻底根治解决方法,这是最近做项目中遇到的一个问题,这里给大家总结下解决办法,需要的朋友可以参考下
2023-08-08
Vue3中Element-Plus分页(Pagination)组件的使用
Element-Plus分页(Pagination)组件在开发过程中数据展示会经常使用到,同时分页功能也会添加到页面中,下面我们就来学习一下它的具体使用,需要的可以参考一下
2023-11-11
van-picker组件default-index属性设置不生效踩坑及解决
这篇文章主要介绍了van-picker组件default-index属性设置不生效踩坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01