首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue配置TypeScript和JavaScript

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

2023-08-12 11:37:34 投稿：yin

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

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