快捷導(dǎo)航

vue3項(xiàng)目中引入ts的詳細(xì)圖文教程

更新時間：2022年09月01日 09:17:48 作者：一縷陽光@

最近項(xiàng)目需要將原vue項(xiàng)目結(jié)合ts的使用進(jìn)行改造,這個后面應(yīng)該是中大型項(xiàng)目的發(fā)展趨勢,下面這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目中引入ts的相關(guān)資料,需要的朋友可以參考下

1.基于腳手架的情況下創(chuàng)建 vue3項(xiàng)目

vue create vue3-ts

選擇自定義預(yù)設(shè)，ts設(shè)置未選中狀態(tài)

選擇yarn與npm啟動項(xiàng)目（根據(jù)個人，在這里我選擇yarn）

2.啟動未引入ts的vue3項(xiàng)目

3.在頁面中（HomeView.vue）引入ts

問題一：

問題二：

問題一

在script 標(biāo)簽中引入ts后，會產(chǎn)生JSX語法錯誤，這時我們需要引入ts（全局引用與局部引用）

第一步：

全局或者局部引用Ts并通過tsc -v 查看版本號 ts安裝成功，這里我直接在項(xiàng)目中 yarn add typescript

npm install -g typescript
yarn add -g typescript（需要添加環(huán)境變量后 tsc-v生效）

注意：使用yarn全局引入后需要配置環(huán)境變量后 tsc-v才生效

第二步：

命令生成ts配置文件tsconfig.json

tsc --init //生成 tsconfig.json

用以下內(nèi)容填充該文件，如有重復(fù)，刪除此文件內(nèi)的重復(fù)項(xiàng)

{
    "compilerOptions": {
        "outDir": "./built/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5"
    },
    "include": [
        "./src/**/*"
    ]
}

在 tsconfig.json 文件中設(shè)置 “jsx”：“preserve”，設(shè)置后發(fā)現(xiàn)還是報錯，（這里設(shè)置無效，如果設(shè)置有效下一步可以略過，繼續(xù)百度）

第三步：在jsconfig.json 文件下添加與 jsx（jsx 屬性允許我們在項(xiàng)目中使用 .tsx 文件）

解決問題二（找不到模塊“XXX.vue”或其相應(yīng)的類型聲明）

在根目錄中創(chuàng)建 shims.d.ts文件

declare module '*.vue' {
    import { ComponentOptions } from 'vue'
    const componentOptions: ComponentOptions
    export default componentOptions
}
declare module '*'

我們也可以修改tsconfig.json 中替換 declare module ‘*’ 如下所示

"noImplicitAny": false,
"allowJs": true,

嘗試打開項(xiàng)目會發(fā)現(xiàn)如下報錯

解決方案：

安裝我們的依賴 確保安裝了 TypeScript、Webpack、Vue 和必要的加載程序。

安裝@vue/cli-plugin-typescript

@vue/cli-plugin-typescript內(nèi)部預(yù)置了ts-loader的配置，無需單獨(dú)配置（這一步是不是覆蓋掉）

yarn add  @vue/cli-plugin-typescript --save-dev

安裝完畢后嘗試打開項(xiàng)目

我們將 main.js 改為 main.ts {構(gòu)建成功}

我們嘗試注釋掉 shims.d.ts 中的 declare module ‘*’ 或者替代他的 tsconfig文件中的
“noImplicitAny”: false, “allowJs”: true,

再次編譯項(xiàng)目會發(fā)現(xiàn)引入的router與store 沒有相應(yīng)的內(nèi)置類型文件，當(dāng)然main.js不會出現(xiàn)此問題（個人理解）

修改回來 tsconfig.json shims.d.ts我們進(jìn)行下一步

4.配置vue3+ts項(xiàng)目

我們可以看到在模塊文件中產(chǎn)生分號報錯，但是他并不會影響項(xiàng)目啟動，我們對typescript-eslint進(jìn)行配置

yarn add  @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

yarn add @vue/eslint-config-typescript --save-dev

修改.eslintrc.js

module.exports = {
    extends: [
        'plugin:vue/vue3-essential',
        'eslint:recommended',
        '@vue/typescript/recommended'
    ],
    plugins: [
        'vue',
        '@typescript-eslint'
    ],
    rules: {
        '@typescript-eslint/no-unused-vars': 'error',
        // 允許非空斷言
        '@typescript-eslint/no-non-null-assertion': 'off',
        // 允許自定義模塊和命名空間
        '@typescript-eslint/no-namespace': 'off',
        // 允許對this設(shè)置alias
        '@typescript-eslint/no-this-alias': 'off',
        // 允許使用any類型
        '@typescript-eslint/no-explicit-any': ['off'],
        ......
    }
}

錯誤解決

項(xiàng)目中會出現(xiàn)如下錯誤

解決：在.eslintrc.js文件中添加以下代碼

5.其他配置

###vue.config.js配置增加extension，引入 ts/tsx 文件時不必加后綴

module.exports = {
    chainWebpack: config => {
          config.resolve.extensions
            .add('ts')
            .add('tsx');
    }
}

在vscode中command+,打開settiings.json可配置保存時自動eslint格式化

6.在HomeView.vue 使用Ts語法

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import HelloWorld from "@/components/HelloWorld.vue";
interface Todo {
  id: number;
  title: string;
  isCompleted: boolean;
}
const aa = ref<Todo[]>([])
console.log(aa);
const bb:boolean = false
console.log(bb);
</script>