• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue.js使用typescript踩坑记

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

最近在把https://github.com/renrenio/renren-fast-vue这个项目转为typescript,在此记录一下遇到的小坑

 

name坑:属性该怎么给?

声明文件坑:如何解决不认识的对象\方法?

 

name坑

原代码如下图

 

<script>
  import SubMenu from './main-sidebar-sub-menu'
  export default {
    name: 'sub-menu',
    props: {
      menu: {
        type: Object,
        required: true
      },
      dynamicMenuRoutes: {
        type: Array,
        required: true
      }
    },
    components: {
      SubMenu
    },
    computed: {
      sidebarLayoutSkin: {
        get () { return this.$store.state.common.sidebarLayoutSkin }
      }
    },
    methods: {
      // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
      gotoRouteHandle (menu) {
        var route = this.dynamicMenuRoutes.filter(item => item.meta.menuId === menu.menuId)
        if (route.length >= 1) {
          this.$router.push({ name: route[0].name })
        }
      }
    }
  }
</script>

 转TS后代码如下:

<script lang="ts">
import {  Component,  Prop,  Vue,  Watch,  Provide,  Inject} from "vue-property-decorator";
import  SubMenu from "./main-sidebar-sub-menu.vue";
import { isURL } from "../utils/validate";

@Component({  
  components: {
    "sub-menu": SubMenu
  }
})
export default class MainSidebarSubMenu extends Vue {
  name:'sub-menu';

  @Prop({ type: Object, required: true }) readonly menu!: object;

  @Prop({ type: Array, required: true }) readonly dynamicMenuRoutes!: any[];

  get sidebarLayoutSkin() {
    return this.$store.state.common.sidebarLayoutSkin
  }

  // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
  gotoRouteHandle(menu:any) {
    var route = this.dynamicMenuRoutes.filter(
      item => item.meta.menuId === menu.menuId
    );
    if (route.length >= 1) {
      this.$router.push({ name: route[0].name });
    }
  }
}
</script>

报错如下:

 [Vue warn]: Unknown custom element: <sub-menu> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

 

很明显,提示没有提供name属性,但是代码里面明显是有写name='sub-menu'的,查了一下vue的api,发现这个name并不是一个普通的属性,作为特殊的选项,基本是放在@Component这个装饰器中,查看文档后添加name,正常运行

 

 

echarts部分方法不认识

其实这类问题在转ts的时候经常会遇到,本例中,我在项目中安装echarts的types之后,仍然有一些方法不认识,ts在编译时报错不能继续,这时候需要运用typescript的声明合并这个功能来解决。

问题如下图,vscode提示 RadialGradient找不到

看了一下在graphic的定义

显然是没有RadialGradient的定义,我们不可能直接去修改引用来的index.d.ts,解决办法是在项目目录中再新建一个xxx.d.ts文件,添加申明去扩展Graphic这个接口

原谅我偷了懒,直接用any,不想去细究这个RadialGradient从哪来的,现在ts就不会再报错了。关于声明文件的写法,一定要认真看ts的文档。

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript对象发布时间:2022-07-18
下一篇:
TypeScript——不能将类型“HTMLElement | null”分配给类型“HTMLElement” ...发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap