快捷導(dǎo)航

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

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

在Vue3開發(fā)中,常見的使用JavaScript（JS）編寫代碼,但也會有調(diào)整編寫語言使用TypeScript（TS）的需求,因此,在Vue3項目設(shè)置中兼容TS和JS是刻不容緩的重要任務(wù),

一、安裝TypeScript

首先，我們需要安裝TypeScript。我們可以使用npm來進行安裝。可以在控制臺中使用以下命令:

npm install typescript --save

安裝完成后，你可能需要驗證是否已正確安裝TypeScript。你可以使用命令tsc -v來檢查TypeScript的版本，確保已安裝成功。

二、創(chuàng)建tsconfig.json文件

創(chuàng)建tsconfig.json文件,它的作用是為TypeScript編譯器提供編譯選項. 在Vue3項目中，你可以使用以下命令進行創(chuàng)建:

npx tsc --init

運行此命令將在您的項目中創(chuàng)建一個名為 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: 指定目標環(huán)境。在Vue3項目中，你可以設(shè)置成ES5
module: 指定使用模塊的規(guī)范，在Vue3項目中，你可以設(shè)置成ES6
allowJS: 允許TypeScript編譯器編譯JS文件
strict: 啟用所有的嚴格類型檢查
esModuleInterop: 允許使用ES模塊的默認導(dǎo)出
resolveJsonModule: 允許導(dǎo)入JSON模塊
moduleResolution: 設(shè)置模塊解析方式
sourceMap: 生成代碼映射文件
outDir: 設(shè)置編譯結(jié)果輸出目錄
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的引用，這樣我們將可以使用兩種文件格式創(chuàng)建Vue3應(yīng)用。

四、TypeScript在Vue3中的使用

在Vue3開發(fā)中，組件的定義可以使用JavaScript或TypeScript。如果您使用TypeScript編寫組件，您需要：

1. 設(shè)置組件的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 能夠幫助我們更好地避免在代碼開發(fā)階段出現(xiàn)bug，以上我們提到了tsconfig.json,file 但是這并不足夠。有時，我們還需要使用插件或庫，例如 eslint-plugin-typescript，對代碼進行更徹底的檢查，以保證代碼質(zhì)量和安全性。

1. 安裝插件，執(zhí)行以下命令：

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 的插件來對代碼進行修復(fù)和檢查。下面是一些比較常用的規(guī)則：

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

六、結(jié)束語

通過本文的介紹，你應(yīng)該已經(jīng)知道了如何在Vue3項目中配置JS和TS文件的兼容性。TypeScript作為 JavaScript的超集，可以為Vue3項目提供更加健壯的類型系統(tǒng)支持。當你面對更復(fù)雜的項目或團隊協(xié)作時，TypeScript可以減少你和同事們因錯誤引用而導(dǎo)致的交互成本，提高配合效率。特別是在編寫組件或者引入第三方組件庫時，TypeScript具有更出色的類型支持，減少代碼出錯的風險。

到此這篇關(guān)于Vue3項目中配置TypeScript和JavaScript的兼容的文章就介紹到這了,更多相關(guān)Vue配置TypeScript和JavaScript內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: