博客

背景

目前 antd 还没有写 .d.ts 类型的声明文件，所以无法在目前的项目中正常使用，

当在ts文件中导入ant-design-vue的时候

	import {Button,message,Tree} from "ant-design-vue"

会报错，如下：

	Could not find a declaration file for module 'ant-design-vue'.
	 '.../node_modules/ant-design-vue/dist/antd.min.js' implicitly 
	 has an 'any' type.Try `npm install @types/ant-design-vue` 
	 if it exists or add a new declaration (.d.ts) file containing 
	 `declare module 'ant-design-vue';

antd这么好用，不能在typescript中使用实在是太可惜，所以网上一顿搜，

然而可悲的是网上还没有什么样的解决方案，因此，通过自己的实践，以及如何在typescript的vue项目中使用antd的一些经验分享一下

撸起袖子干起来(使用tree组件实战)

1. 在项目的src文件夹下先创建一个声明文件，作用是当用户在ts文件下导入 ‘ant-design-vue’的时候默认导入Ant(可随意)变量
   
   
   
   文件路径 项目名/src/ant-design.d.ts中
   
   

declare module 'ant-design-vue' {
   const Ant: any
   export default Ant;
}

2. 在typescript中局部导入组件，因为不是全局的所以，我就不讲全局挂载了。

<template>
<a-tree
  :loadData="onLoadData"
  :treeData="treeData"
/>

</template>

<script lang='ts'>
import { Component, Vue, Prop, Emit, Watch } from 'vue-property-decorator';
import Ant from "ant-design-vue";//Ant就是上个声明文件中的别名，使用后需要用.
@Component({
  components: {
      ATree:Ant.Tree,// 挂载组件，别名为ATree，驼峰结构,在template中使用<a-tree>
  },
})
export default class LeftBar extends Vue {
  private treeData = [
          { title: 'Expand to load', key: '0' },
          { title: 'Expand to load', key: '1' },
          { title: 'Tree Node', key: '2', isLeaf: true },
    	];
   @Emit()
      private onLoadData(treeNode: any) {
      	dosomething()
      }
}
<style lang='scss' scoped>
.class...{
}
</style>

友情链接

Ant Design of Vue 官网