vue.js使用typescript踩坑記

最近在把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的文檔。