快捷導(dǎo)航

vue3.0+ts引入詳細(xì)步驟以及語法校驗(yàn)報(bào)錯(cuò)問題解決辦法

更新時(shí)間：2024年01月28日 12:03:59 作者：拉風(fēng)的毛豆豆

Vue?3.0是一個(gè)非常流行的JavaScript框架,不僅易于學(xué)習(xí)和使用,而且可以與許多UI框架集成,下面這篇文章主要給大家介紹了關(guān)于vue3.0+ts引入詳細(xì)步驟以及語法校驗(yàn)報(bào)錯(cuò)問題的解決辦法,需要的朋友可以參考下

一、前言

前段時(shí)間學(xué)習(xí)了ts，于是用腳手架搭了個(gè)vue3.0+ts的項(xiàng)目，引入詳細(xì)步驟及語法校驗(yàn)報(bào)錯(cuò)解決辦法，整理下遇到的問題以及解決辦法，分享給大家。

二、使用

1. 引入ts

Q:在vue項(xiàng)目中編寫tsx函數(shù)式組件提示報(bào)錯(cuò)。在沒有引入ts的項(xiàng)目中，寫tsx語法提示報(bào)錯(cuò)。無法使用 JSX，除非提供了 “–jsx” 標(biāo)志。ts(17004)

A:

先檢查是否安裝ts，cmd輸入 tsc -v，顯示了版本號(hào)即安裝了ts；未安裝則執(zhí)行 npm install -g typescript，全局安裝ts；
下載依賴包 yarn add typescript @vue/cli-plugin-typescript；
添加tsconfig.json配置文件。在項(xiàng)目目錄下控制臺(tái)輸入tsc --init，該目錄下生成tsconfig.json文件，內(nèi)容替換成以下：

{
 "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/main.js"],
 "exclude": ["node_modules"],
 "compilerOptions": {
   "jsx": "preserve",
   "noImplicitAny": false,
   "allowJs": true,
   "target": "es2016",
   "module": "commonjs",
   "baseUrl": "./",
   "paths": {
     "@/*": ["./src/*"]
   },
   "types": ["webpack-env"],
   "esModuleInterop": true,
   "forceConsistentCasingInFileNames": true,
   "strict": true,
   "skipLibCheck": true 
 },
}

jsconfig.json 文件添加 “jsx”: “preserve” 配置項(xiàng)。

R: 問題解決視圖

2 main.js 修改成 main.ts

Q: 控制臺(tái)報(bào)錯(cuò) Can’t resolve ‘./src/main.js’ in ‘F:\code\st\Vue\v3_ts’

A：停止運(yùn)行后重新運(yùn)行npm run serve 即可

R：運(yùn)行成功

3. 修改app.vue 后綴為 .tsx, 修改文件內(nèi)容

import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    return () => (
      <router-view />
    )
  }
})

4. 組件引入less

使用import導(dǎo)入的方式引入，代碼如下：

import "./index.less"
export default (props, ctx) => {
  return () => (
    <span>123</span>
  )
}

5. 組件引入圖片

使用import導(dǎo)入的方式引入，代碼如下：

Q：報(bào)錯(cuò)找不到模塊“./img/right.png”或其相應(yīng)的類型聲明。

A：在src目錄下新增文件 shims.d.ts 文件，內(nèi)容如下：

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

declare module '*.less';
declare module '*.png';
declare module '*.json';

三、報(bào)錯(cuò)類型及解決辦法

Q：eslint 校驗(yàn)報(bào)錯(cuò)。
A： vue.config.js 中添加 lintOnSave:false 配置項(xiàng)，重新運(yùn)行即可。
Q：引入 less 報(bào)錯(cuò)。

A：未下載less依賴包，yarn add less less-loader即可。
Q：使用navigator.getUserMedia 提示報(bào)錯(cuò) 類型“Navigator”上不存在屬性“getUserMedia”；

A：在src目錄下 shims.d.ts 文件中添加如下內(nèi)容即可。

interface Navigator {
  getUserMedia(
    constraints: MediaStreamConstraints, 
    successCallback: NavigatorUserMediaSuccessCallback, 
    errorCallback: NavigatorUserMediaErrorCallback
  ): Promise<MediaStream>;
}
declare const navigator: Navigator;

Q：使用dom獲取頁面元素，修改屬性值時(shí)報(bào)錯(cuò)。不能將類型“HTMLElement | null”分配給類型“HTMLVideoElement”。不能將類型“null”分配給類型“HTMLVideoElement”。
A：使用斷言，把獲取到的dom元素設(shè)置成 HTMLVideoElement 類型，代碼如下：

videoEle = document.getElementById("video") as HTMLVideoElement;
videoEle.srcObject = stream;
videoEle.onloadedmetadata = function (e) {
  videoEle.play();
};

暫時(shí)遇到了這些，后續(xù)遇到其他語法報(bào)錯(cuò)的問題再更新。

Q：父組件傳子組件非必傳參數(shù)，在子組件中使用報(bào)錯(cuò)。類型“string | undefined”的參數(shù)不能賦給類型“string”的參數(shù)。
不能將類型“undefined”分配給類型“string”。
A：使用斷言，設(shè)置成對應(yīng)類型，如

let placeholder = ref<string>(props?.placeholder as string)

Q：引入第三方j(luò)s，報(bào)錯(cuò) 找不到名稱“XLSX”。
A：在src目錄下 shims.d.ts 文件中添加如下內(nèi)容即可。

declare const XLSX: any;

Q 使用父組件傳入的屬性報(bào)錯(cuò)，property) s: string | undefined，對象可能為“未定義”。ts(2532)
A：使用 let str = props.s as string; 變量接收屬性值后斷言成對應(yīng)類型的數(shù)據(jù)類型

import { defineComponent } from "vue";
import VP from "./components/poker"
interface Props {
  s?: string
}
export default defineComponent({
  props: {
    s: {
      type: String
    }
  },
  setup(props: Props, ctx) {
    let str = props.s as string;
    return () => (
      <>
        {
          str.split("").map(v => {
            return (<VP></VP>)
          })
        }
      </>
    )
  }
})

附：Vue-cli3中使用TS完整代碼案例

<template>
  <div class="test-container">
    {{message}}
    <input type="button" value="點(diǎn)擊觸發(fā)父級(jí)方法" @click="bindSend"/>
    <input type="button" value="點(diǎn)擊觸發(fā)父級(jí)方法" @click="handleSend"/>
    <input type="button" value="點(diǎn)擊觸發(fā)父級(jí)方法" @click="bindSend2"/>
    <!-- <Hello></Hello> -->
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
import Hello from "./HelloWorld.vue";
// 注明此類為一個(gè)vue組件
@Component({
  components: {
    Hello
  }
})
export default class Test extends Vue {
  // 原有data中的數(shù)據(jù)在這里展開編寫
 public message: string = "asd";
  //原有props中的數(shù)據(jù)展開編寫
  @Prop({
    type: Number,
    default: 1,
    required: false
  })
  propA?: number
  @Prop()
  propB:string
  //原有computed
  public get computedMsg(){
      return '這里是計(jì)算屬性' + this.message;
  }
  public set computedMsg(message:string){
  }
  //原有的watch屬性
  @Watch('propA',{
      deep:true
  })
  public test(newValue:string,oldValue:string){
      console.log('propA值改變了' + newValue);
  }
  // 以前需要給父級(jí)傳值的時(shí)候直接方法中使用emit就行了，當(dāng)前需要通過emit來處理
  @Emit()
  private bindSend():string{
      return this.message
  }
  @Emit()
  private bindSend1(msg:string,love:string){
      // 如果不處理可以不寫下面的，會(huì)自動(dòng)將參數(shù)回傳
    //   msg += 'love';
    //   return msg;
  }
  //原有放在methods中的方法平鋪出來
  public handleSend():void {
      this.bindSend1(this.message,'love');
  }
  // 這里的emit中的參數(shù)是表明父級(jí)通過什么接受，類似以前的$emit('父級(jí)定義的方法')
  @Emit('test')
  private bindSend2(){
      return '這個(gè)可以用test接受';
  }
}
</script>

總結(jié)

到此這篇關(guān)于vue3.0+ts引入詳細(xì)步驟以及語法校驗(yàn)報(bào)錯(cuò)問題解決辦法的文章就介紹到這了,更多相關(guān)vue3.0 ts 引入步驟及語法校驗(yàn)報(bào)錯(cuò)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: