vue3.0+ts引入详细步骤以及语法校验报错问题解决办法

 更新时间:2024年01月28日 12:03:59   作者:拉风的毛豆豆  
Vue 3.0是一个非常流行的JavaScript框架,不仅易于学习和使用,而且可以与许多UI框架集成,下面这篇文章主要给大家介绍了关于vue3.0+ts引入详细步骤以及语法校验报错问题的解决办法,需要的朋友可以参考下

一、前言

前段时间学习了ts,于是用脚手架搭了个vue3.0+ts的项目,引入详细步骤及语法校验报错解决办法,整理下遇到的问题以及解决办法,分享给大家。

二、使用

1. 引入ts

Q:在vue项目中编写tsx函数式组件提示报错。在没有引入ts的项目中,写tsx语法提示报错。无法使用 JSX,除非提供了 “–jsx” 标志。ts(17004)

A:

  • 先检查是否安装ts,cmd输入 tsc -v, 显示了版本号即安装了ts;未安装则执行 npm install -g typescript,全局安装ts;
  • 下载依赖包 yarn add typescript @vue/cli-plugin-typescript;
  • 添加tsconfig.json配置文件 。在项目目录下控制台输入tsc --init,该目录下生成tsconfig.json文件,内容替换成以下:
{
 "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” 配置项。

R: 问题解决视图

2 main.js 修改成 main.ts

Q: 控制台报错 Can’t resolve ‘./src/main.js’ in ‘F:\code\st\Vue\v3_ts’

A: 停止运行后重新运行npm run serve 即可

R: 运行成功

3. 修改app.vue 后缀为 .tsx, 修改文件内容

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

4. 组件引入less

使用import导入的方式引入,代码如下:

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

5. 组件引入图片

使用import导入的方式引入,代码如下:

Q:报错找不到模块“./img/right.png”或其相应的类型声明。

A:在src目录下新增文件 shims.d.ts 文件,内容如下:

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

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

三、报错类型及解决办法

  • Q:eslint 校验报错。
    A: vue.config.js 中添加 lintOnSave:false 配置项,重新运行即可。

  • Q: 引入 less 报错。

    A:未下载less依赖包,yarn add less less-loader即可。

  • Q:使用navigator.getUserMedia 提示报错 类型“Navigator”上不存在属性“getUserMedia”

    A:在src目录下 shims.d.ts 文件中添加如下内容即可。

interface Navigator {
  getUserMedia(
    constraints: MediaStreamConstraints, 
    successCallback: NavigatorUserMediaSuccessCallback, 
    errorCallback: NavigatorUserMediaErrorCallback
  ): Promise<MediaStream>;
}
declare const navigator: Navigator;
  • Q:使用dom获取页面元素,修改属性值时报错。不能将类型“HTMLElement | null”分配给类型“HTMLVideoElement”。不能将类型“null”分配给类型“HTMLVideoElement”。

    A:使用断言,把获取到的dom元素设置成 HTMLVideoElement 类型,代码如下:
videoEle = document.getElementById("video") as HTMLVideoElement;
videoEle.srcObject = stream;
videoEle.onloadedmetadata = function (e) {
  videoEle.play();
};

暂时遇到了这些,后续遇到其他语法报错的问题再更新。

  • Q: 父组件传子组件非必传参数,在子组件中使用报错。类型“string | undefined”的参数不能赋给类型“string”的参数。
    不能将类型“undefined”分配给类型“string”。

    A: 使用断言,设置成对应类型,如
let placeholder = ref<string>(props?.placeholder as string)
  • Q: 引入第三方js,报错 找不到名称“XLSX”。

    A:在src目录下 shims.d.ts 文件中添加如下内容即可。
declare const XLSX: any;
  • Q 使用父组件传入的属性报错,property) s: string | undefined,对象可能为“未定义”。ts(2532)

    A: 使用 let str = props.s as string; 变量接收属性值后断言成对应类型的数据类型
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="点击触发父级方法" @click="bindSend"/>
    <input type="button" value="点击触发父级方法" @click="handleSend"/>
    <input type="button" value="点击触发父级方法" @click="bindSend2"/>
    <!-- <Hello></Hello> -->
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
import Hello from "./HelloWorld.vue";
// 注明此类为一个vue组件
@Component({
  components: {
    Hello
  }
})
export default class Test extends Vue {
  // 原有data中的数据在这里展开编写
 public message: string = "asd";
  //原有props中的数据展开编写
  @Prop({
    type: Number,
    default: 1,
    required: false
  })
  propA?: number
  @Prop()
  propB:string
  //原有computed
  public get computedMsg(){
      return '这里是计算属性' + this.message;
  }
  public set computedMsg(message:string){
  }
  //原有的watch属性
  @Watch('propA',{
      deep:true
  })
  public test(newValue:string,oldValue:string){
      console.log('propA值改变了' + newValue);
  }
  // 以前需要给父级传值的时候直接方法中使用emit就行了,当前需要通过emit来处理
  @Emit()
  private bindSend():string{
      return this.message
  }
  @Emit()
  private bindSend1(msg:string,love:string){
      // 如果不处理可以不写下面的,会自动将参数回传
    //   msg += 'love';
    //   return msg;
  }
  //原有放在methods中的方法平铺出来
  public handleSend():void {
      this.bindSend1(this.message,'love');
  }
  // 这里的emit中的参数是表明父级通过什么接受,类似以前的$emit('父级定义的方法')
  @Emit('test')
  private bindSend2(){
      return '这个可以用test接受';
  }
}
</script>

总结 

到此这篇关于vue3.0+ts引入详细步骤以及语法校验报错问题解决办法的文章就介绍到这了,更多相关vue3.0 ts 引入步骤及语法校验报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue单页面在微信下只能分享落地页的解决方案

    vue单页面在微信下只能分享落地页的解决方案

    这篇文章主要介绍了vue单页面在微信下只能分享落地页的解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • Vue项目如何设置反向代理和cookie设置问题

    Vue项目如何设置反向代理和cookie设置问题

    这篇文章主要介绍了Vue项目如何设置反向代理和cookie设置问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • elementUI给el-tabs/el-tab-pane添加图标效果实例

    elementUI给el-tabs/el-tab-pane添加图标效果实例

    这篇文章主要给大家介绍了关于elementUI给el-tabs/el-tab-pane添加图标效果实例的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用elementUI具有一定的参考学习价值,需要的朋友可以参考下
    2023-07-07
  • 图文详解vue中proto文件的函数调用

    图文详解vue中proto文件的函数调用

    这篇文章主要给大家介绍了vue中proto文件函数调用的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2021-08-08
  • Vue computed 计算属性代码实例

    Vue computed 计算属性代码实例

    在本篇文章里小编给大家分享的是关于Vue computed 计算属性代码实例,需要的朋友们可以参考下。
    2020-04-04
  • 关于vue项目一直出现 sockjs-node/info?t=XX的解决办法

    关于vue项目一直出现 sockjs-node/info?t=XX的解决办法

    sockjs-node 是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双工的浏览器和web服务器之间通信通道,这篇文章主要介绍了vue项目一直出现 sockjs-node/info?t=XX的解决办法,需要的朋友可以参考下
    2023-12-12
  • 如何解决vuex在页面刷新后数据被清除的问题

    如何解决vuex在页面刷新后数据被清除的问题

    这篇文章主要介绍了如何解决vuex在页面刷新后数据被清除的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • Vue router-view和router-link的实现原理

    Vue router-view和router-link的实现原理

    这篇文章主要介绍了Vue router-view和router-link的实现原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • Vue的Class与Style绑定的方法

    Vue的Class与Style绑定的方法

    本篇文章主要介绍了Vue的Class与Style绑定的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue + Elementui实现多标签页共存的方法

    Vue + Elementui实现多标签页共存的方法

    这篇文章主要介绍了Vue + Elementui实现多标签页共存的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06

最新评论